1---
  2name: audit
  3description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review."
  4argument-hint: "[area (feature, page, component...)]"
  5user-invocable: true
  6---
  7
  8## MANDATORY PREPARATION
  9
 10Invoke {{command_prefix}}impeccable — 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 {{command_prefix}}impeccable teach first.
 11
 12---
 13
 14Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address.
 15
 16This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.
 17
 18## Diagnostic Scan
 19
 20Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below.
 21
 22### 1. Accessibility (A11y)
 23
 24**Check for**:
 25- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
 26- **Missing ARIA**: Interactive elements without proper roles, labels, or states
 27- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
 28- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
 29- **Alt text**: Missing or poor image descriptions
 30- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
 31
 32**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)
 33
 34### 2. Performance
 35
 36**Check for**:
 37- **Layout thrashing**: Reading/writing layout properties in loops
 38- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
 39- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
 40- **Bundle size**: Unnecessary imports, unused dependencies
 41- **Render performance**: Unnecessary re-renders, missing memoization
 42
 43**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)
 44
 45### 3. Theming
 46
 47**Check for**:
 48- **Hard-coded colors**: Colors not using design tokens
 49- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
 50- **Inconsistent tokens**: Using wrong tokens, mixing token types
 51- **Theme switching issues**: Values that don't update on theme change
 52
 53**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly)
 54
 55### 4. Responsive Design
 56
 57**Check for**:
 58- **Fixed widths**: Hard-coded widths that break on mobile
 59- **Touch targets**: Interactive elements < 44x44px
 60- **Horizontal scroll**: Content overflow on narrow viewports
 61- **Text scaling**: Layouts that break when text size increases
 62- **Missing breakpoints**: No mobile/tablet variants
 63
 64**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
 65
 66### 5. Anti-Patterns (CRITICAL)
 67
 68Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
 69
 70**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design)
 71
 72## Generate Report
 73
 74### Audit Health Score
 75
 76| # | Dimension | Score | Key Finding |
 77|---|-----------|-------|-------------|
 78| 1 | Accessibility | ? | [most critical a11y issue or "--"] |
 79| 2 | Performance | ? | |
 80| 3 | Responsive Design | ? | |
 81| 4 | Theming | ? | |
 82| 5 | Anti-Patterns | ? | |
 83| **Total** | | **??/20** | **[Rating band]** |
 84
 85**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues)
 86
 87### Anti-Patterns Verdict
 88**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest.
 89
 90### Executive Summary
 91- Audit Health Score: **??/20** ([rating band])
 92- Total issues found (count by severity: P0/P1/P2/P3)
 93- Top 3-5 critical issues
 94- Recommended next steps
 95
 96### Detailed Findings by Severity
 97
 98Tag every issue with **P0-P3 severity**:
 99- **P0 Blocking**: Prevents task completion — fix immediately
100- **P1 Major**: Significant difficulty or WCAG AA violation — fix before release
101- **P2 Minor**: Annoyance, workaround exists — fix in next pass
102- **P3 Polish**: Nice-to-fix, no real user impact — fix if time permits
103
104For each issue, document:
105- **[P?] Issue name**
106- **Location**: Component, file, line
107- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern
108- **Impact**: How it affects users
109- **WCAG/Standard**: Which standard it violates (if applicable)
110- **Recommendation**: How to fix it
111- **Suggested command**: Which command to use (prefer: {{available_commands}})
112
113### Patterns & Systemic Issues
114
115Identify recurring problems that indicate systemic gaps rather than one-off mistakes:
116- "Hard-coded colors appear in 15+ components, should use design tokens"
117- "Touch targets consistently too small (<44px) throughout mobile experience"
118
119### Positive Findings
120
121Note what's working well — good practices to maintain and replicate.
122
123## Recommended Actions
124
125List recommended commands in priority order (P0 first, then P1, then P2):
126
1271. **[P?] `{{command_prefix}}command-name`** — Brief description (specific context from audit findings)
1282. **[P?] `{{command_prefix}}command-name`** — Brief description (specific context)
129
130**Rules**: Only recommend commands from: {{available_commands}}. Map findings to the most appropriate command. End with `{{command_prefix}}polish` as the final step if any fixes were recommended.
131
132After presenting the summary, tell the user:
133
134> You can ask me to run these one at a time, all at once, or in any order you prefer.
135>
136> Re-run `{{command_prefix}}audit` after fixes to see your score improve.
137
138**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.
139
140**NEVER**:
141- Report issues without explaining impact (why does this matter?)
142- Provide generic recommendations (be specific and actionable)
143- Skip positive findings (celebrate what works)
144- Forget to prioritize (everything can't be P0)
145- Report false positives without verification
146
147Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.