jamie-bitflight/code-review-web
plugins/development-harness/skills/code-review-web/SKILL.md
Use when reviewing web frontend code — HTML, CSS, JSX, or browser-targeted JavaScript. Enforces accessibility (WCAG AA, aria labels, focus management), XSS prevention (innerHTML, dangerouslySetInnerHTML), performance (layout thrash, CLS, lazy loading), CSS design tokens, form labeling, and event listener cleanup. Loaded by dh:code-reviewer on *.html, *.css, *.jsx detection.
$ install --global
skillsauthnpx skillsauth add jamie-bitflight/claude_skills code-review-webInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 19, 2026, 5:07 AM12.7s1 file scanned
SKILL.md
- name:
- code-review-web
- description:
- Use when reviewing web frontend code — HTML, CSS, JSX, or browser-targeted JavaScript. Enforces accessibility (WCAG AA, aria labels, focus management), XSS prevention (innerHTML, dangerouslySetInnerHTML), performance (layout thrash, CLS, lazy loading), CSS design tokens, form labeling, and event listener cleanup. Loaded by dh:code-reviewer on *.html, *.css, *.jsx detection.
- user-invocable:
- false
Web Frontend Code Review Patterns
Stack-specific rules loaded by dh:code-reviewer when *.html, *.css, or *.jsx (browser-targeted) files are detected.
Accessibility
- Every interactive element (button, link, input, select) must have an accessible name — either visible text,
aria-label, oraria-labelledby - Focus must be managed when modals, dialogs, or dynamic panels open — trap focus inside and restore it on close
- Color contrast ratio must meet WCAG AA — 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
- Icon-only buttons without visible text must have
aria-labelor a visually-hidden text span - Form inputs must be associated with their label via
for/idpairing oraria-labelledby— proximity alone is not sufficient - Images conveying information must have descriptive
alttext; decorative images usealt="" - Keyboard navigation must work — focus order must follow visual order, no focus traps outside intentional modal patterns
XSS Prevention
element.innerHTML = userValueis a blocking finding — usetextContentfor plain textdangerouslySetInnerHTML(React) or equivalent without sanitization is a blocking finding- User-controlled values used in
eval(),Function(), orsetTimeout(string)are a blocking finding - URL values from user input used in
href,src, oractionattributes must be validated against an allowlist of schemes (blockjavascript:,data:)
Performance
- Layout thrash — reading layout properties (
offsetWidth,getBoundingClientRect) inside a loop that also writes styles — is a blocking finding - Images must have explicit
widthandheightattributes to prevent layout shift (CLS) - Images below the fold must use
loading="lazy"— eager loading of off-screen images delays critical rendering - Large JavaScript bundles loaded synchronously in
<head>withoutdeferorasyncare a blocking finding - Expensive computations inside render functions (React
render, Vue template expressions) without memoization are a blocking finding
CSS
!importantwithout an explanatory comment is a blocking finding- Design tokens (colors, spacing, typography) must use CSS custom properties (
--color-primary) — hardcoded hex values and px values are non-blocking but flagged - Magic
z-indexvalues without a documented z-index scale are a blocking finding — use named tokens (z-index: var(--z-modal)) position: fixedorposition: stickywithout overflow and scroll container awareness is flagged*selectors in component styles that may bleed into child components are a blocking finding
Forms
- Every
<input>,<select>, and<textarea>must have an associated<label>(either wrapping or viafor/id) autocompleteattributes must be set on inputs that collect personal data (name, email, address, payment) — required for WCAG 1.3.5- Validation error messages must be associated with the field via
aria-describedby— color alone is not sufficient to communicate errors - Form submission must not clear field values without user confirmation when validation fails
Event Listener Cleanup
- Event listeners added in component mount / setup must be removed in the corresponding unmount / cleanup
document.addEventListenerwithout a correspondingremoveEventListenerin the cleanup lifecycle is a blocking findingAbortControlleris preferred for fetch-and-cleanup patterns — pass the signal and abort on cleanup
Anti-Patterns
<!-- WRONG: no label, no accessible name -->
<input type="text" placeholder="Search..." />
<!-- RIGHT: associated label -->
<label for="search">Search</label>
<input type="text" id="search" autocomplete="off" />
<!-- WRONG: XSS vector -->
<div id="output"></div>
<script>
document.getElementById("output").innerHTML = userInput;
</script>
<!-- RIGHT: safe text insertion -->
<script>
document.getElementById("output").textContent = userInput;
</script>
/* WRONG: magic z-index */
.modal { z-index: 9999; }
/* RIGHT: design token */
.modal { z-index: var(--z-modal); }
/* WRONG: unexplained !important */
.button { color: red !important; }
/* RIGHT: explained override */
/* Overrides third-party widget styles that cannot be targeted more specifically */
.widget-container .button { color: red !important; }
Related Skills
jamie-bitflight/xdg-base-directory
development
VerifiedTrustedCommunity
When an application needs to store config, data, cache, or state files. When designing where user-specific files should live. When code writes to ~/.appname or hardcoded home paths. When implementing cross-platform file storage with platformdirs.
39SKILL.mdUpdated Apr 30, 2026
jamie-bitflight/verification-gate
testing
VerifiedTrustedCommunity
Enforce mandatory pre-action verification checkpoints to prevent pattern-matching from overriding explicit reasoning. Use this skill when about to execute implementation actions (Bash, Write, Edit) to verify hypothesis-action alignment. Blocks execution when hypothesis unverified or action targets different system than hypothesis identified. Critical for preventing cognitive dissonance where correct diagnosis leads to wrong implementation.
39SKILL.mdUpdated Apr 30, 2026
jamie-bitflight/twelve-factor-app
tools
VerifiedTrustedCommunity
Reference guide for the Twelve-Factor App methodology — 15 principles (12 original + 3 modern extensions) for building portable, resilient, cloud-native applications. Use when evaluating application architecture, designing cloud-native services, reviewing codebases for methodology compliance, advising on configuration, scaling, observability, security, and deployment patterns. Incorporates the 2025 open-source community evolution and cloud-native reinterpretations of each factor.
39SKILL.mdUpdated Apr 30, 2026
jamie-bitflight/user-docs-to-ai-skill
tools
VerifiedTrustedCommunity
Converts user-facing documentation (how-to guides, tutorials, API references, examples) in any format — Markdown, PDF, DOCX, PPTX, XLSX, AsciiDoc, RST, HTML, Jupyter notebooks, man pages, TOML/YAML/JSON configs, and plain text — into Claude Code skill directories with SKILL.md plus thematically grouped references/*.md files. Use when given a docs directory or mixed-format documentation to transform into an AI skill. Uses MCP file-reader server for binary formats.
39SKILL.mdUpdated Apr 30, 2026