使用方法
- 复制安装命令,在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物,并对照来源检查输出。
npx skills add https://github.com/travisjneuman/.claude --skill generic-static-code-reviewer开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况,不等于独立质量或安全测试。
按源仓库内容呈现,保留标题、案例、代码、表格、链接以及原文引用的演示图片。
Static Site Code Reviewer
Review HTML/CSS/JS code against production quality standards.
Extends: Generic Code Reviewer - Read base skill for full code review methodology, P0/P1/P2 priority system, and judgment calls.
Pre-Commit Checklist
# Local testing (cross-platform options)
python -m http.server 8000 # Windows
python3 -m http.server 8000 # macOS/Linux
npx serve . # Node.js (recommended - all platforms)
# Visual inspection
# - Test in Chrome, Firefox, Safari
# - Test at 375px, 768px, 1024px
# - Lighthouse audit- [ ] Visual inspection passed
- [ ] Works in all major browsers
- [ ] Responsive at all breakpoints
- [ ] Lighthouse Performance 95+
Static-Specific Checks
No Build Tools Verification
Files should be served as-is:
- Pure
.htmlfiles (no templating) - Pure
.cssfiles (no Sass/Less) - Pure
.jsfiles (no bundling/transpilation) - No
node_modulesrequired for production
Page Weight Targets (P1)
| Target | Max Size |
|---|---|
| HTML | < 5KB |
| CSS | < 10KB |
| JavaScript | < 5KB |
| Total (excl. images) | < 50KB |
| Images (each) | < 500KB |
HTML Quality
<!-- Semantic structure -->
<header>
<nav><a href="#">Link</a></nav>
</header>
<main>
<article>
<h1>Title</h1>
<p>Content</p>
</article>
</main>
<footer></footer>
<!-- Void elements (no closing slash needed in HTML5) -->
<img src="image.jpg" alt="Description" />
<br />
<input type="text" />CSS Quality
/* CSS custom properties for theming */
:root {
--bg-primary: #000000;
--text-primary: #ffffff;
--accent: #00ff00;
}
/* Mobile-first responsive */
.container {
padding: 1rem;
}
@media (min-width: 768px) {
.container {
padding: 2rem;
}
}
/* Avoid !important - signals specificity problems */JavaScript Quality
// ES6+ syntax (modern browsers support it)
const items = document.querySelectorAll(".item");
const handler = (e) => console.log(e.target);
// Event delegation (preferred)
document.body.addEventListener("click", (e) => {
if (e.target.matches(".button")) {
handleClick(e.target);
}
});
// No jQuery dependencies
// No framework overheadLighthouse Requirements (P1)
| Metric | Target |
|---|---|
| Performance | 95+ |
| Accessibility | 90+ |
| Best Practices | 100 |
| SEO | 100 |
| First Contentful Paint | < 1s |
See Also
- Generic Code Reviewer - Base methodology
- Code Review Standards - Full requirements
- Design Patterns - UI consistency




