Audit

MANDATORY PREPARATION

Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.

Run systematic technical quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address.

This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.

Diagnostic Scan

Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below.

1. Accessibility (A11y)

Check for:

• Contrast issues: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
• Missing ARIA: Interactive elements without proper roles, labels, or states
• Keyboard navigation: Missing focus indicators, illogical tab order, keyboard traps
• Semantic HTML: Improper heading hierarchy, missing landmarks, divs instead of buttons
• Alt text: Missing or poor image descriptions
• Form issues: Inputs without labels, poor error messaging, missing required indicators

Score 0-4: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA)

2. Performance

Check for:

• Layout thrashing: Reading/writing layout properties in loops
• Expensive animations: Animating layout properties (width, height, top, left) instead of transform/opacity
• Missing optimization: Images without lazy loading, unoptimized assets, missing will-change
• Bundle size: Unnecessary imports, unused dependencies
• Render performance: Unnecessary re-renders, missing memoization

Score 0-4: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized)

3. Theming

Check for: