Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
user-invocable
true
argument-hint
["AREA=<value>"]
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.
First: Use the frontend-design skill for design principles and anti-patterns.
Diagnostic Scan
Run comprehensive checks across multiple dimensions:
Accessibility (A11y) - Check for:
Contrast issues: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
Missing ARIA: Interactive elements without proper roles, labels, or states
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
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
Anti-Patterns (CRITICAL) - Check against ALL the DON'T guidelines in the frontend-design 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).
CRITICAL: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, 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 skill's Anti-Patterns section. 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)
"Hard-coded colors appear in 15+ components, should use design tokens"
"Touch targets consistently too small (<44px) throughout mobile experience"
"Missing focus indicators on all custom interactive components"
Positive Findings
Note what's working well:
Good practices to maintain
Exemplary implementations to replicate elsewhere
Recommendations by Priority
Create actionable plan:
Immediate: Critical blockers to fix first
Short-term: High-severity issues (this sprint)
Medium-term: Quality improvements (next sprint)
Long-term: Nice-to-haves and optimizations
Suggested Commands for Fixes
Map issues to available commands. Prefer these: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. You may also suggest other installed skills you're sure exist, but never invent commands.
Examples:
"Use /normalize to align with design system (addresses N theming issues)"
"Use /optimize to improve performance (addresses N performance issues)"
"Use /harden to improve resilience (addresses N edge cases)"
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.
