ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
By bitjaru · 744 installs
npx skills add bitjaru/styleseed --skill ss-audit
Source repository · Upstream listing
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/<artifact id .md and .styleseed/manifests/<artifact id .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