Jak używać
- Skopiuj polecenie instalacji i sprawdź źródła przed instalacją we własnym środowisku agenta.
- W oryginale sprawdź wymagane narzędzia, dane dostępowe i obsługiwane środowiska.
- Opisz dane wejściowe i oczekiwany rezultat; porównaj wynik ze źródłami.
npx skills add https://github.com/travisjneuman/.claude --skill generic-static-code-reviewerPrzed rozpoczęciem
- Instalacja nie obejmuje subskrypcji modelu, limitu API ani uprawnień do plików.
- Gwiazdki i instalacje pokazują aktywność, a nie niezależny test jakości lub bezpieczeństwa.
Oryginalny dokument Skill
Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.
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
