audit.md

  1Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues; document them for other commands to address.
  2
  3This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.
  4
  5## Diagnostic Scan
  6
  7Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below.
  8
  9### 1. Accessibility (A11y)
 10
 11**Check for**:
 12- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
 13- **Missing ARIA**: Interactive elements without proper roles, labels, or states
 14- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
 15- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
 16- **Alt text**: Missing or poor image descriptions
 17- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
 18
 19**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)
 20
 21### 2. Performance
 22
 23**Check for**:
 24- **Layout thrashing**: Reading/writing layout properties in loops
 25- **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames
 26- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
 27- **Bundle size**: Unnecessary imports, unused dependencies
 28- **Render performance**: Unnecessary re-renders, missing memoization
 29
 30**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)
 31
 32### 3. Theming
 33
 34**Check for**:
 35- **Hard-coded colors**: Colors not using design tokens
 36- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
 37- **Inconsistent tokens**: Using wrong tokens, mixing token types
 38- **Theme switching issues**: Values that don't update on theme change
 39
 40**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)
 41
 42### 4. Responsive Design
 43
 44**Check for**:
 45- **Fixed widths**: Hard-coded widths that break on mobile
 46- **Touch targets**: Interactive elements < 44x44px
 47- **Horizontal scroll**: Content overflow on narrow viewports
 48- **Text scaling**: Layouts that break when text size increases
 49- **Missing breakpoints**: No mobile/tablet variants
 50
 51**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)
 52
 53### 5. Anti-Patterns (CRITICAL)
 54
 55Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). 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).
 56
 57**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)
 58
 59## Generate Report
 60
 61### Audit Health Score
 62
 63| # | Dimension | Score | Key Finding |
 64|---|-----------|-------|-------------|
 65| 1 | Accessibility | ? | [most critical a11y issue or "--"] |
 66| 2 | Performance | ? | |
 67| 3 | Responsive Design | ? | |
 68| 4 | Theming | ? | |
 69| 5 | Anti-Patterns | ? | |
 70| **Total** | | **??/20** | **[Rating band]** |
 71
 72**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)
 73
 74### Anti-Patterns Verdict
 75**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest.
 76
 77### Executive Summary
 78- Audit Health Score: **??/20** ([rating band])
 79- Total issues found (count by severity: P0/P1/P2/P3)
 80- Top 3-5 critical issues
 81- Recommended next steps
 82
 83### Detailed Findings by Severity
 84
 85Tag every issue with **P0-P3 severity**:
 86- **P0 Blocking**: Prevents task completion. Fix immediately
 87- **P1 Major**: Significant difficulty or WCAG AA violation. Fix before release
 88- **P2 Minor**: Annoyance, workaround exists. Fix in next pass
 89- **P3 Polish**: Nice-to-fix, no real user impact. Fix if time permits
 90
 91For each issue, document:
 92- **[P?] Issue name**
 93- **Location**: Component, file, line
 94- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern
 95- **Impact**: How it affects users
 96- **WCAG/Standard**: Which standard it violates (if applicable)
 97- **Recommendation**: How to fix it
 98- **Suggested command**: Which command to use (prefer: {{available_commands}})
 99
100### Patterns & Systemic Issues
101
102Identify recurring problems that indicate systemic gaps rather than one-off mistakes:
103- "Hard-coded colors appear in 15+ components, should use design tokens"
104- "Touch targets consistently too small (<44px) throughout mobile experience"
105
106### Positive Findings
107
108Note what's working well: good practices to maintain and replicate.
109
110## Recommended Actions
111
112List recommended commands in priority order (P0 first, then P1, then P2):
113
1141. **[P?] `{{command_prefix}}command-name`**: Brief description (specific context from audit findings)
1152. **[P?] `{{command_prefix}}command-name`**: Brief description (specific context)
116
117**Rules**: Only recommend commands from: {{available_commands}}. Map findings to the most appropriate command. End with `{{command_prefix}}impeccable polish` as the final step if any fixes were recommended.
118
119After presenting the summary, tell the user:
120
121> You can ask me to run these one at a time, all at once, or in any order you prefer.
122>
123> Re-run `{{command_prefix}}impeccable audit` after fixes to see your score improve.
124
125**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.
126
127**NEVER**:
128- Report issues without explaining impact (why does this matter?)
129- Provide generic recommendations (be specific and actionable)
130- Skip positive findings (celebrate what works)
131- Forget to prioritize (everything can't be P0)
132- Report false positives without verification
133