--- name: UX Audit slug: ux-audit category: Quality description: UX Audit reviews screens for usability issues using Nielsen’s heuristics and mobile UX checks. Use it when you need a structured screen audit with scores, issues, and recommendations. github: "https://github.com/bitjaru/styleseed/tree/main/skills/ss-audit" language: TypeScript stars: 906 forks: 82 install: "npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-audit ~/.claude/skills/ss-audit" installs_to: ~/.claude/skills/ss-audit source_path: skills/ss-audit/SKILL.md collection_size: 23 category_size: 1354 collection_url: "https://dirskills.com/collections/bitjaru/styleseed" added: 2026-08-22T05:21:03.933Z last_synced: 2026-08-22T05:21:03.933Z canonical_url: "https://dirskills.com/skills/ux-audit" --- # UX Audit UX Audit reviews screens for usability issues using Nielsen’s heuristics and mobile UX checks. Use it when you need a structured screen audit with scores, issues, and recommendations. **Install:** ```bash npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-audit ~/.claude/skills/ss-audit ``` ## README # UX Audit ## Registry-first artifact boundary When `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/.md` and `.styleseed/manifests/.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists. ## When NOT to use - For accessibility-only issues → use `/ss-a11y` - For design system token/golden-rule compliance → use `/ss-review` - For copy/microcopy quality → use `/ss-copy` - For brand new screens that don't exist yet — design first with `/ss-page` or `/ss-flow` Target: **$ARGUMENTS** ## Audit Framework ### Nielsen's 10 Usability Heuristics #### 1. Visibility of System Status - [ ] Loading states present (skeleton screens, not spinners) - [ ] Success/error feedback after actions (toast notifications) - [ ] Progress indicators for multi-step flows - [ ] Active state clearly shown on navigation items - [ ] Real-time data has timestamp showing freshness #### 2. Match Between System and Real World - [ ] Labels use user's language, not technical jargon - [ ] Icons are universally recognizable (Lucide standard set) - [ ] Number formats match user expectations (comma separators, currency symbols) - [ ] Date formats are locale-appropriate #### 3. User Control and Freedom - [ ] Back navigation available on all non-root screens - [ ] Destructive actions have confirmation dialogs - [ ] Undo available for reversible actions (toast with undo) - [ ] Bottom sheet/modal can be dismissed (backdrop tap, swipe down, X button) - [ ] No dark patterns (no forced actions, always a way to dismiss) #### 4. Consistency and Standards - [ ] Same action = same appearance everywhere - [ ] Color meanings are consistent (green=success, red=error, brand=active) - [ ] Text hierarchy follows the 5-level grayscale system - [ ] Surface treatment follows the resolved grammar and brand recipe - [ ] Spacing follows the resolved token scale and adapter constraints #### 5. Error Prevention - [ ] Destructive buttons are visually distinct (destructive variant) - [ ] Form validation happens on blur (not while typing) - [ ] Dangerous actions require explicit confirmation - [ ] Input constraints are visible before errors occur (character limits, format hints) #### 6. Recognition Rather Than Recall - [ ] Icon controls have accessible labels; navigation labels follow the selected adapter - [ ] Current state visible without memorization (active tab highlighted) - [ ] Recent/frequent items shown for quick access - [ ] Placeholder text shows expected format #### 7. Flexibility and Efficiency - [ ] Key actions are reachable through an appropriate product-specific path - [ ] Refresh behavior follows the platform adapter and the product's data semantics - [ ] Touch targets >= 44x44px (no tiny tap areas) - [ ] Frequently used actions are placed according to the resolved navigation adapter #### 8. Aesthetic and Minimalist Design - [ ] Each screen focuses on ONE primary task - [ ] No decorative elements that don't serve a purpose - [ ] Information pyramid respected (most important = biggest) - [ ] Card and collection density follows the resolved grammar and task complexity - [ ] No competing visual elements (one hero metric per page) #### 9. Help Users Recover from Errors - [ ] Error messages explain what went wrong in plain language - [ ] Error messages suggest how to fix the problem - [ ] Partial failures don't break the whole page (one card fails, others load) - [ ] Network errors show retry button - [ ] Form errors highlight the specific field #### 10. Help and Documentation - [ ] Empty states guide users to take action - [ ] Onboarding for first-time features (if applicable) - [ ] Tooltips for complex metrics (if applicable) ### Mobile-Specific UX Checks #### Touch & Gesture - [ ] Touch targets minimum 44x44px - [ ] Minimum 8px between adjacent touch targets - [ ] No hover-dependent interactions (mobile has no hover) - [ ] Swipe gestures have visible affordances (carousel indicators) #### Performance Perception - [ ] Skeleton screens appear within 300ms - [ ] Optimistic updates for user actions - [ ] Above-the-fold content loads first - [ ] No layout shift after content loads #### Safe Areas - [ ] Content not hidden behind notch/Dynamic Island - [ ] Bottom content not behind home indicator - [ ] Navigation surfaces respect the platform safe-area contract when one applies ### Dark Pattern Prevention - [ ] No forced bottom sheets on entry - [ ] No exit-prevention dialogs - [ ] Every screen has a way to go back/dismiss - [ ] CTA labels clearly describe the action - [ ] No manipulative graphics (begging, urgency) ## Output Format 1. **Score**: A+ to F rating with breakdown 2. **Critical Issues**: Must fix (blocks usability) 3. **Major Issues**: Should fix (degrades experience) 4. **Minor Issues**: Nice to fix (polish) 5. **Recommendations**: Specific code changes for each issue