travisjneuman/.claude

generic-static-code-reviewer

Review static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance.

Quelltext ansehen

Verwendung

  1. Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
  2. Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
  3. Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/travisjneuman/.claude --skill generic-static-code-reviewer

Vor dem Start

  • Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
  • Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

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 .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)

TargetMax 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 overhead

Lighthouse Requirements (P1)

MetricTarget
Performance95+
Accessibility90+
Best Practices100
SEO100
First Contentful Paint< 1s

See Also

Verwandte Aufgaben

aus demselben Repository

Weitere Skills

Alle Skills
travisjneuman
Community

learning-gap-analyzer

Map understanding, identify knowledge gaps, and build targeted learning plans with spaced repetition. Use when assessing knowledge levels, designing study plans, or optimizing learning paths.

Installationen
1
GitHub Stars
105
Aktualisiert
19. Okt.
travisjneuman
Community

tech-debt-analyzer

This skill should be used when analyzing technical debt in a codebase, documenting code quality issues, creating technical debt registers, or assessing code maintainability. Use this for identifying code smells, architectural issues, dependency problems, missing documentation, security vulnerabilities, and creating comprehensive technical debt documentation.

Installationen
1
GitHub Stars
105
Aktualisiert
19. Okt.
travisjneuman
Community

agent-desktop-developer

Specialist subagent: Expert desktop application developer for Electron, Tauri, and native desktop development

Installationen
1
GitHub Stars
105
Aktualisiert
19. Okt.
travisjneuman
Community

agent-technical-writer

Specialist subagent: Architecture Decision Records, API documentation, migration guides, runbooks, and technical documentation specialist. Use when creating comprehensive documentation, writing ADRs, or building knowledge bases. Trigger phrases: ADR, documentation, runbook, migration guide, technical writing, API docs, changelog, architecture decision, knowledge base, onboarding docs.

Installationen
1
GitHub Stars
105
Aktualisiert
19. Okt.