audit_skill

Overview

This skill performs a comprehensive audit of UI quality across accessibility, performance, theming, and responsive design. It produces a prioritized report listing issues with severity ratings, clear impact statements, and actionable recommendations. The audit points to which follow-up commands to run to resolve or harden problems.

How this skill works

The auditor runs systematic checks using design principles from the frontend-design skill, scanning markup, styles, scripts, and runtime behavior. It flags accessibility violations (contrast, ARIA, keyboard), performance anti-patterns (layout thrash, heavy animations, bundle bloat), theming problems (hard-coded colors, dark-mode failures), responsive issues (fixed widths, touch targets), and explicit anti-patterns that indicate AI-generated or low-quality design. The output is a structured report: anti-patterns verdict, executive summary, categorized findings by severity, patterns, positives, prioritized remediation, and suggested commands.

When to use it

• Before a design or engineering sprint to triage UI debt
• Prior to accessibility audits for compliance (WCAG A/AA/AAA checks)
• When onboarding a new design system or integrating third-party components
• Before a major release that impacts UX across breakpoints
• When suspicious visual patterns suggest AI-generated or inconsistent design

Best practices

• Prioritize fixes by user impact: accessibility and touch/keyboard first
• Document exact locations (component/file/line) for each issue to avoid rework
• Group recurring problems into systemic remediation tasks (tokens, breakpoints)
• Avoid over-reporting trivial items; focus on actionable, high-impact findings
• Link each recommendation to a remedial command (e.g., /normalize, /optimize, /harden)

Example use cases

• Audit a component library to find widespread hard-coded colors and map to design tokens
• Scan a web app before release to find keyboard traps and missing ARIA labels
• Assess a mobile layout for touch target and horizontal overflow problems
• Review animations and render paths to identify layout-thrashing hotspots
• Detect AI-slop visual tells (gradient text, generic fonts) and recommend remediation