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) - **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, missing will-change - **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. Anti-Patterns (CRITICAL) Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). 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). **Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) ## Generate Report ### Audit Health Score | # | Dimension | Score | Key Finding | |---|-----------|-------|-------------| | 1 | Accessibility | ? | [most critical a11y issue or "--"] | | 2 | Performance | ? | | | 3 | Responsive Design | ? | | | 4 | Theming | ? | | | 5 | Anti-Patterns | ? | | | **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) ### Anti-Patterns Verdict **Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. ### 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 Findings by Severity Tag every issue with **P0-P3 severity**: - **P0 Blocking**: Prevents task completion. Fix immediately - **P1 Major**: Significant difficulty or WCAG AA violation. Fix before release - **P2 Minor**: Annoyance, workaround exists. Fix in next pass - **P3 Polish**: Nice-to-fix, no real user impact. Fix if time permits For each issue, document: - **[P?] Issue name** - **Location**: Component, file, line - …
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.