用途
静态站点代码审查器（Static Site Code Reviewer）用于按照生产质量标准审查 HTML/CSS/JS 代码。它是对通用代码审查器（Generic Code Reviewer）的扩展，后者提供完整的代码审查方法、P0/P1/P2 优先级体系和判断准则。该技能适用于功能完成时、提交（commit）前或审查代码变更时使用。
主要能力
提交前检查清单
技能提供了本地测试与可视化检查的操作指引：
# 本地测试（跨平台选项）
python -m http.server 8000 # Windows
python3 -m http.server 8000 # macOS/Linux
npx serve . # Node.js（推荐 - 全平台）
# 可视化检查
# - 在 Chrome、Firefox、Safari 中测试
# - 在 375px、768px、1024px 下测试
# - Lighthouse 审计
对应的检查项包括：可视化检查通过、在所有主流浏览器中可用、在所有断点下响应式正常、Lighthouse 性能 95+。
静态站点专项检查
无构建工具验证：文件应原样提供服务，包括纯 .html 文件（无模板）、纯 .css 文件（无 Sass/Less）、纯 .js 文件（无打包/转译），生产环境不需要 node_modules。
页面体积目标（P1）：HTML 小于 5KB，CSS 小于 10KB，JavaScript 小于 5KB，总计（不含图片）小于 50KB，单张图片小于 500KB。
HTML 质量：要求语义化结构，示例中使用 <header>、<nav>、<main>、<article>、<footer> 等语义标签；空元素（void elements）在 HTML5 中无需闭合斜杠，如 <img src="image.jpg" alt="Description" />、<br />、<input type="text" />。
CSS 质量：使用 CSS 自定义属性进行主题化，示例中定义 :root 变量 --bg-primary、--text-primary、--accent；采用移动优先响应式写法，基础样式针对小屏，再通过 @media (min-width: 768px) 增强；避免使用 !important，因为它通常意味着优先级问题。
JavaScript 质量：使用 ES6+ 语法（现代浏览器均支持），例如 const items = document.querySelectorAll(".item") 与箭头函数；推荐使用事件委托，将监听器绑定到 document.body 并通过 e.target.matches(".button") 判断；不依赖 jQuery，不引入框架开销。
Lighthouse 要求（P1）
性能（Performance）目标 95+，无障碍（Accessibility）目标 90+，最佳实践（Best Practices）目标 100，SEO 目标 100，首次内容绘制（First Contentful Paint）目标小于 1 秒。
使用方式
按照技能说明，在功能完成、提交代码前或审查变更时调用该技能执行审查，并参照提交前检查清单逐项核对。技能本身继承通用代码审查器的方法论。
适用场景
适用于采用纯 HTML/CSS/JS 构建、不使用构建工具的静态站点，关注代码缺陷、安全、性能、无障碍与 CLAUDE.md 合规性的审查场景。
限制
该技能要求文件原样提供服务，不适用于需要模板、Sass/Less、打包或转译的项目。其页面体积与 Lighthouse 指标为技能设定的目标值，实际达成情况取决于具体项目。关于收费、价格、平台等信息暂未提供。