Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
MANDATORY PREPARATION
Read ${CLAUDE_CONFIG_DIR:-~/.claude}/skills/i-frontend-design/SKILL.md for design principles and anti-patterns. Check for design context (design/context.md, .impeccable.md, or design/direction.md) — if found, use it to inform brand-specific judgments. If no context exists, proceed anyway but note in the report: "No design context found — anti-pattern checks are universal only; brand-specific judgments may not apply. Run /i-teach-impeccable to establish context."
Audits are read-only diagnostics — they should never be blocked by missing context.
Diagnostic Scan
Scan across these dimensions. The specific checks within each are standard — work through them against the reference files rather than from a checklist here:
- Accessibility — contrast, ARIA, keyboard nav, semantic HTML, alt text, form labeling. See interaction-design.md.
- Performance — layout thrashing, layout-property animations, missing lazy-load, bundle bloat, needless re-renders.
- Theming — hard-coded colors vs tokens, dark-mode coverage and contrast, token consistency.
- Responsive — fixed widths, sub-44px touch targets, horizontal scroll, text-scaling breakage, missing breakpoints.
- Anti-Patterns (CRITICAL) — check against the anti-patterns reference for AI slop tells and general design anti-patterns.
CRITICAL: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (polish, optimize, harden, etc.) to fix issues after audit.
Generate Comprehensive Report
Create a detailed audit report with the following structure:
Anti-Patterns Verdict
Start here. Pass/fail: Does this look AI-generated? List specific tells from the anti-patterns reference. Be brutally honest.
Executive Summary
- Total issues found (count by severity)
- Most critical issues (top 3-5)
- Overall quality score (if applicable)
- Recommended next steps
Detailed Findings by Severity
For each issue, document:
- Location: Where the issue occurs (component, file, line)
- Severity: Critical / High / Medium / Low
- Category: Accessibility / Performance / Theming / Responsive
- Description: What the issue is
- Impact: How it affects users
- WCAG/Standard: Which standard it violates (if applicable)
- Recommendation: How to fix it
- Suggested command: Route to the most relevant modification skill:
- Contrast, color system, palette issues →
/i-colorize
- Layout, spacing, alignment, hierarchy →
/i-layout
- Typography, font choices, type scale →
/i-typeset
- Animation, motion, transition issues →
/i-animate
- Performance, load time, rendering →
/i-optimize
- Responsive, mobile, touch targets →
/i-adapt
- Hard-coded values, design system drift, consistency →
/i-polish
- Missing states, error handling, i18n, onboarding →
/i-harden
- Copy, labels, error messages →
/i-clarify
- Overall too busy/noisy →
/i-quieter
- Overall too generic/bland →
/i-bolder
- Final polish pass →
/i-polish
Group findings under four severity tiers:
- Critical — blocks core functionality or violates WCAG A
- High — significant usability/accessibility impact, WCAG AA violations
- Medium — quality issues, WCAG AAA, performance concerns
- Low — minor inconsistencies, optimization opportunities
Then call out systemic patterns (the same defect across many components), positive findings worth keeping, and a priority-ordered fix plan that groups findings by the skill that fixes them (using the per-finding "Suggested command" routing).
IMPORTANT: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
NEVER:
- Report issues without explaining impact (why does this matter?)
- Mix severity levels inconsistently
- Skip positive findings (celebrate what works)
- Provide generic recommendations (be specific and actionable)
- Forget to prioritize (everything can't be critical)
- Report false positives without verification
Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
Completion
Run get-skill-tmpdir i-audit and write the audit report to <tmpdir>/audit-YYYY-MM-DD.md. Then summarize in conversation:
- Verdict: One-line overall assessment
- Top findings: The 3-5 most important issues
- Suggested next step: Which modification skill to run first
1---2name: i-audit3description: 'Use when the user says: "audit this UI", "frontend quality", "full UI audit", "design audit". Comprehensive audit of interface quality across accessibility, performance, theming, and responsive design.'4user-invocable: true5---67Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.89## MANDATORY PREPARATION1011Read `${CLAUDE_CONFIG_DIR:-~/.claude}/skills/i-frontend-design/SKILL.md` for design principles and anti-patterns. Check for design context (`design/context.md`, `.impeccable.md`, or `design/direction.md`) — if found, use it to inform brand-specific judgments. If no context exists, **proceed anyway** but note in the report: "No design context found — anti-pattern checks are universal only; brand-specific judgments may not apply. Run `/i-teach-impeccable` to establish context."1213Audits are read-only diagnostics — they should never be blocked by missing context.1415---1617## Diagnostic Scan1819Scan across these dimensions. The specific checks within each are standard — work through them against the reference files rather than from a checklist here:20211. **Accessibility** — contrast, ARIA, keyboard nav, semantic HTML, alt text, form labeling. See [interaction-design.md](../i-frontend-design/reference/interaction-design.md).222. **Performance** — layout thrashing, layout-property animations, missing lazy-load, bundle bloat, needless re-renders.233. **Theming** — hard-coded colors vs tokens, dark-mode coverage and contrast, token consistency.244. **Responsive** — fixed widths, sub-44px touch targets, horizontal scroll, text-scaling breakage, missing breakpoints.255. **Anti-Patterns (CRITICAL)** — check against the [anti-patterns reference](../i-frontend-design/reference/anti-patterns.md) for AI slop tells and general design anti-patterns.2627**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (polish, optimize, harden, etc.) to fix issues after audit.2829## Generate Comprehensive Report3031Create a detailed audit report with the following structure:3233### Anti-Patterns Verdict34**Start here.** Pass/fail: Does this look AI-generated? List specific tells from the [anti-patterns reference](../i-frontend-design/reference/anti-patterns.md). Be brutally honest.3536### Executive Summary37- Total issues found (count by severity)38- Most critical issues (top 3-5)39- Overall quality score (if applicable)40- Recommended next steps4142### Detailed Findings by Severity4344For each issue, document:45- **Location**: Where the issue occurs (component, file, line)46- **Severity**: Critical / High / Medium / Low47- **Category**: Accessibility / Performance / Theming / Responsive48- **Description**: What the issue is49- **Impact**: How it affects users50- **WCAG/Standard**: Which standard it violates (if applicable)51- **Recommendation**: How to fix it52- **Suggested command**: Route to the most relevant modification skill:53 - Contrast, color system, palette issues → `/i-colorize`54 - Layout, spacing, alignment, hierarchy → `/i-layout`55 - Typography, font choices, type scale → `/i-typeset`56 - Animation, motion, transition issues → `/i-animate`57 - Performance, load time, rendering → `/i-optimize`58 - Responsive, mobile, touch targets → `/i-adapt`59 - Hard-coded values, design system drift, consistency → `/i-polish`60 - Missing states, error handling, i18n, onboarding → `/i-harden`61 - Copy, labels, error messages → `/i-clarify`62 - Overall too busy/noisy → `/i-quieter`63 - Overall too generic/bland → `/i-bolder`64 - Final polish pass → `/i-polish`6566Group findings under four severity tiers:67- **Critical** — blocks core functionality or violates WCAG A68- **High** — significant usability/accessibility impact, WCAG AA violations69- **Medium** — quality issues, WCAG AAA, performance concerns70- **Low** — minor inconsistencies, optimization opportunities7172Then call out systemic patterns (the same defect across many components), positive findings worth keeping, and a priority-ordered fix plan that groups findings by the skill that fixes them (using the per-finding "Suggested command" routing).7374**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.7576**NEVER**:77- Report issues without explaining impact (why does this matter?)78- Mix severity levels inconsistently79- Skip positive findings (celebrate what works)80- Provide generic recommendations (be specific and actionable)81- Forget to prioritize (everything can't be critical)82- Report false positives without verification8384Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.8586## Completion8788Run `get-skill-tmpdir i-audit` and write the audit report to `<tmpdir>/audit-YYYY-MM-DD.md`. Then summarize in conversation:89901. **Verdict**: One-line overall assessment912. **Top findings**: The 3-5 most important issues923. **Suggested next step**: Which modification skill to run first