Claude Code Plugins

Community-maintained marketplace

Feedback

generic-static-code-reviewer

@travisjneuman/.claude
0
0

Review static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance. Enforces pure HTML/CSS/JS standards, minimal page weight, mobile-first design. Use when completing features, before commits, or reviewing changes.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name generic-static-code-reviewer
description Review static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance. Enforces pure HTML/CSS/JS standards, minimal page weight, mobile-first design. Use when completing features, before commits, or reviewing changes.

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 .html files (no templating)
  • Pure .css files (no Sass/Less)
  • Pure .js files (no bundling/transpilation)
  • No node_modules required 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 overhead

Lighthouse Requirements (P1)

Metric Target
Performance 95+
Accessibility 90+
Best Practices 100
SEO 100
First Contentful Paint < 1s

See Also