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

• 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

Performance - Check for:

• Layout thrashing: Reading/writing layout properties in loops

• Expensive animations: Animating layout properties (width, height, top, left) instead of transform/opacity

• Missing optimization: Images without lazy loading, unoptimized assets, missing will-change

• Bundle size: Unnecessary imports, unused dependencies

• Render performance: Unnecessary re-renders, missing memoization

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

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)

• 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: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)

Critical Issues

[Issues that block core functionality or violate WCAG A]

High-Severity Issues

[Significant usability/accessibility impact, WCAG AA violations]

Medium-Severity Issues

[Quality issues, WCAG AAA violations, performance concerns]

Low-Severity Issues

[Minor inconsistencies, optimization opportunities]

Patterns & Systemic Issues

Identify recurring problems:

• "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, /critique, /colorize. 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.