Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
Real-world examples
Live HTML demos for this skill — rendered directly in the page. 4 examples.
- 01
Accessibility findings
Annotated WCAG failures the audit flags: low contrast, unlabeled controls, missing focus rings, div-as-button, and form inputs without labels — with a fixed view.
- 02
Five-dimension scorecard
Audit Health Score report across Accessibility, Performance, Theming, Responsive, and Anti-Patterns — with P0–P3 findings and rating bands.
- 03
Anti-pattern tells
Visual checklist of AI-slop and design anti-patterns the audit scores: gradient text, glass cards, hero metrics, generic fonts, nested cards.
- 04
Responsive & touch targets
Desktop-only layout failures: fixed widths, sub-44px hit areas, horizontal overflow, and missing breakpoints — contrasted with a fluid fix.
Skill markdown
Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues; document them for other commands to address. This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation. **Web only.** Native platforms (`ios` / `android` / `adaptive`) route to [audit.native.md](audit.native.md) instead; if the project is native, switch to it now. ## Diagnostic Scan Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. ### 1. Accessibility (A11y) **Check for**: - **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) - **Motion sensitivity**: `prefers-reduced-motion` needs an intentional alternative that preserves state change and hierarchy; flag a global `0.01ms` kill that destroys useful feedback, flashing above threshold, and motion that blocks focus, reading, or task completion - **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 **Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) ### 2. Performance **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames - **Missing optimization**: Images without lazy loading, unoptimized assets - **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization **Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) ### 3. 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 **Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) ### 4. 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 **Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) ### 5. Implementation Integrity (CRITICAL) Run the bundled detector and verify each finding in context. Look for repeated implementation shortcuts, design-system drift, misleading or decorative content, and structure that is interchangeable with an unrelated product. Keep deterministic findings separate from visual judgment and call out false positives. **Score 0-4**: 0=systemic drift, 1=major repeated failures, 2=several verified issues, 3=minor isolated issues, 4=coherent and intentional ## Generate Report ### Audit Health Score | # | Dimension | Score | Key Finding | |---|-----------|-------|-------------| | 1 | Accessibility | ? | [most critical a11y issue or "--"] | | 2 | Performance | ? | | | 3 | Responsive Design | ? | | | 4 | Theming | ? | | | 5 | Implementation Integrity | ? | | | **Total** | | **??/20** | **[Rating band]** | **Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) ### Implementation Integrity Verdict **Start here.** Pass/fail: does the implementation express a coherent product-specific system? Cite verified evidence and detector findings. ### Executive Summary - Audit Health Score: **??/20** ([rating band]) - Total issues found (count by severity: P0/P1/P2/P3) - Top 3-5 critical issues - Recommended next steps ### Detailed Fin …
More from pbakaus
- AdaptAdapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
- AnimateEnhance UX with purposeful animation and micro-interactions that support usability and delight.
- BolderIncrease visual impact and personality for interfaces that feel too safe, bland, or generic.
- ClarifyImprove labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
- ColorizeIntroduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.
- CritiqueEvaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.