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.

安装