Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
One-time setup that gathers your project's design context and saves it to CLAUDE.md for future sessions.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
reference/audit.md
1Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues; document them for other commands to address.23This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.45## Diagnostic Scan67Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below.89### 1. Accessibility (A11y)1011**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 states14- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps15- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons16- **Alt text**: Missing or poor image descriptions17- **Form issues**: Inputs without labels, poor error messaging, missing required indicators1819**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)2021### 2. Performance2223**Check for**:24- **Layout thrashing**: Reading/writing layout properties in loops25- **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames26- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change27- **Bundle size**: Unnecessary imports, unused dependencies28- **Render performance**: Unnecessary re-renders, missing memoization2930**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)3132### 3. Theming3334**Check for**:35- **Hard-coded colors**: Colors not using design tokens36- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme37- **Inconsistent tokens**: Using wrong tokens, mixing token types38- **Theme switching issues**: Values that don't update on theme change3940**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)4142### 4. Responsive Design4344**Check for**:45- **Fixed widths**: Hard-coded widths that break on mobile46- **Touch targets**: Interactive elements < 44x44px47- **Horizontal scroll**: Content overflow on narrow viewports48- **Text scaling**: Layouts that break when text size increases49- **Missing breakpoints**: No mobile/tablet variants5051**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)5253### 5. Anti-Patterns (CRITICAL)5455Check 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).5657**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)5859## Generate Report6061### Audit Health Score6263| # | 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]** |7172**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)7374### Anti-Patterns Verdict75**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest.7677### Executive Summary78- Audit Health Score: **??/20** ([rating band])79- Total issues found (count by severity: P0/P1/P2/P3)80- Top 3-5 critical issues81- Recommended next steps8283### Detailed Findings by Severity8485Tag every issue with **P0-P3 severity**:86- **P0 Blocking**: Prevents task completion. Fix immediately87- **P1 Major**: Significant difficulty or WCAG AA violation. Fix before release88- **P2 Minor**: Annoyance, workaround exists. Fix in next pass89- **P3 Polish**: Nice-to-fix, no real user impact. Fix if time permits9091For each issue, document:92- **[P?] Issue name**93- **Location**: Component, file, line94- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern95- **Impact**: How it affects users96- **WCAG/Standard**: Which standard it violates (if applicable)97- **Recommendation**: How to fix it98- **Suggested command**: Which command to use (prefer: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable document, $impeccable harden, $impeccable layout, $impeccable onboard, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset)99100### Patterns & Systemic Issues101102Identify 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"105106### Positive Findings107108Note what's working well: good practices to maintain and replicate.109110## Recommended Actions111112List recommended commands in priority order (P0 first, then P1, then P2):1131141. **[P?] `$command-name`**: Brief description (specific context from audit findings)1152. **[P?] `$command-name`**: Brief description (specific context)116117**Rules**: Only recommend commands from: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable document, $impeccable harden, $impeccable layout, $impeccable onboard, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset. Map findings to the most appropriate command. End with `$impeccable polish` as the final step if any fixes were recommended.118119After presenting the summary, tell the user:120121> You can ask me to run these one at a time, all at once, or in any order you prefer.122>123> Re-run `$impeccable audit` after fixes to see your score improve.124125**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.126127**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 verification133134