baodan/.agents/skills/impeccable/reference/audit.md

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.

Web only. Native platforms (ios / android / adaptive) route to audit.native.md instead; if the project is native, switch to it now.

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)
• Motion sensitivity: prefers-reduced-motion needs an intentional alternative that preserves state change and hierarchy; flag a global 0.01ms kill that destroys useful feedback, flashing above threshold, and motion that blocks focus, reading, or task completion
• 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: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames
• 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:

• Hard-coded colors: Colors not using design tokens
• Broken dark mode: Missing dark mode variants, poor contrast in dark theme
• Inconsistent tokens: Using wrong tokens, mixing token types
• Theme switching issues: Values that don't update on theme change

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)

4. Responsive Design

Check for:

• Fixed widths: Hard-coded widths that break on mobile
• Touch targets: Interactive elements < 44x44px
• Horizontal scroll: Content overflow on narrow viewports
• Text scaling: Layouts that break when text size increases
• Missing breakpoints: No mobile/tablet variants

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)

5. Implementation Integrity (CRITICAL)

Run the bundled detector and verify each finding in context. Look for repeated implementation shortcuts, design-system drift, misleading or decorative content, and structure that is interchangeable with an unrelated product. Keep deterministic findings separate from visual judgment and call out false positives.

Score 0-4: 0=systemic drift, 1=major repeated failures, 2=several verified issues, 3=minor isolated issues, 4=coherent and intentional

Generate Report

Audit Health Score

#	Dimension	Score	Key Finding
1	Accessibility	?	[most critical a11y issue or "--"]
2	Performance	?
3	Responsive Design	?
4	Theming	?
5	Implementation Integrity	?
Total		??/20	[Rating band]

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)

Implementation Integrity Verdict

Start here. Pass/fail: does the implementation express a coherent product-specific system? Cite verified evidence and detector findings.

Executive Summary

• Audit Health Score: ??/20 ([rating band])
• Total issues found (count by severity: P0/P1/P2/P3)
• Top 3-5 critical issues
• Recommended next steps

Detailed Findings by Severity

Tag every issue with P0-P3 severity:

• P0 Blocking: Prevents task completion. Fix immediately
• P1 Major: Significant difficulty or WCAG AA violation. Fix before release
• P2 Minor: Annoyance, workaround exists. Fix in next pass
• P3 Polish: Nice-to-fix, no real user impact. Fix if time permits

For each issue, document:

• [P?] Issue name
• Location: Component, file, line
• Category: Accessibility / Performance / Theming / Responsive / Implementation Integrity
• Impact: How it affects users
• WCAG/Standard: Which standard it violates (if applicable)
• Recommendation: How to fix it
• 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)

Patterns & Systemic Issues

Identify recurring problems that indicate systemic gaps rather than one-off mistakes:

• "Hard-coded colors appear in 15+ components, should use design tokens"
• "Touch targets consistently too small (<44px) throughout mobile experience"

Positive Findings

Note what's working well: good practices to maintain and replicate.

Recommended Actions

List recommended commands in priority order (P0 first, then P1, then P2):

1. [P?] /command-name: Brief description (specific context from audit findings)
2. [P?] /command-name: Brief description (specific context)

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.

After presenting the summary, tell the user:

You can ask me to run these one at a time, all at once, or in any order you prefer.

Re-run /impeccable audit after fixes to see your score improve.

IMPORTANT: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.

NEVER:

• Report issues without explaining impact (why does this matter?)
• Provide generic recommendations (be specific and actionable)
• Skip positive findings (celebrate what works)
• Forget to prioritize (everything can't be P0)
• Report false positives without verification