Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/travisjneuman/.claude --skill generic-static-code-reviewerAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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
bash
# 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
html
<!-- 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
/* 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
javascript
// 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
