ss-audit
starsforks
How to install ss-audit?
bitjaru/styleseed/ss-audit
$npx -y skills add bitjaru/styleseed --skill ss-auditAudit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
SKILL.md
| 1 | # UX Audit |
| 2 | |
| 3 | ## When NOT to use |
| 4 | |
| 5 | - For accessibility-only issues → use `/ss-a11y` |
| 6 | - For design system token/golden-rule compliance → use `/ss-review` |
| 7 | - For copy/microcopy quality → use `/ss-copy` |
| 8 | - For brand new screens that don't exist yet — design first with `/ss-page` or `/ss-flow` |
| 9 | |
| 10 | Target: **$ARGUMENTS** |
| 11 | |
| 12 | ## Audit Framework |
| 13 | |
| 14 | ### Nielsen's 10 Usability Heuristics |
| 15 | |
| 16 | #### 1. Visibility of System Status |
| 17 | - [ ] Loading states present (skeleton screens, not spinners) |
| 18 | - [ ] Success/error feedback after actions (toast notifications) |
| 19 | - [ ] Progress indicators for multi-step flows |
| 20 | - [ ] Active state clearly shown on navigation items |
| 21 | - [ ] Real-time data has timestamp showing freshness |
| 22 | |
| 23 | #### 2. Match Between System and Real World |
| 24 | - [ ] Labels use user's language, not technical jargon |
| 25 | - [ ] Icons are universally recognizable (Lucide standard set) |
| 26 | - [ ] Number formats match user expectations (comma separators, currency symbols) |
| 27 | - [ ] Date formats are locale-appropriate |
| 28 | |
| 29 | #### 3. User Control and Freedom |
| 30 | - [ ] Back navigation available on all non-root screens |
| 31 | - [ ] Destructive actions have confirmation dialogs |
| 32 | - [ ] Undo available for reversible actions (toast with undo) |
| 33 | - [ ] Bottom sheet/modal can be dismissed (backdrop tap, swipe down, X button) |
| 34 | - [ ] No dark patterns (no forced actions, always a way to dismiss) |
| 35 | |
| 36 | #### 4. Consistency and Standards |
| 37 | - [ ] Same action = same appearance everywhere |
| 38 | - [ ] Color meanings are consistent (green=success, red=error, brand=active) |
| 39 | - [ ] Text hierarchy follows the 5-level grayscale system |
| 40 | - [ ] All cards use the same shadow, radius, padding |
| 41 | - [ ] Spacing follows the 6px grid system |
| 42 | |
| 43 | #### 5. Error Prevention |
| 44 | - [ ] Destructive buttons are visually distinct (destructive variant) |
| 45 | - [ ] Form validation happens on blur (not while typing) |
| 46 | - [ ] Dangerous actions require explicit confirmation |
| 47 | - [ ] Input constraints are visible before errors occur (character limits, format hints) |
| 48 | |
| 49 | #### 6. Recognition Rather Than Recall |
| 50 | - [ ] Labels on all icons (especially BottomNav) |
| 51 | - [ ] Current state visible without memorization (active tab highlighted) |
| 52 | - [ ] Recent/frequent items shown for quick access |
| 53 | - [ ] Placeholder text shows expected format |
| 54 | |
| 55 | #### 7. Flexibility and Efficiency |
| 56 | - [ ] Key actions reachable within 3 taps from home |
| 57 | - [ ] Pull-to-refresh on data screens |
| 58 | - [ ] Touch targets >= 44x44px (no tiny tap areas) |
| 59 | - [ ] Frequently used actions in easy-to-reach zones (bottom of screen) |
| 60 | |
| 61 | #### 8. Aesthetic and Minimalist Design |
| 62 | - [ ] Each screen focuses on ONE primary task |
| 63 | - [ ] No decorative elements that don't serve a purpose |
| 64 | - [ ] Information pyramid respected (most important = biggest) |
| 65 | - [ ] Card density follows the max-4-items rule |
| 66 | - [ ] No competing visual elements (one hero metric per page) |
| 67 | |
| 68 | #### 9. Help Users Recover from Errors |
| 69 | - [ ] Error messages explain what went wrong in plain language |
| 70 | - [ ] Error messages suggest how to fix the problem |
| 71 | - [ ] Partial failures don't break the whole page (one card fails, others load) |
| 72 | - [ ] Network errors show retry button |
| 73 | - [ ] Form errors highlight the specific field |
| 74 | |
| 75 | #### 10. Help and Documentation |
| 76 | - [ ] Empty states guide users to take action |
| 77 | - [ ] Onboarding for first-time features (if applicable) |
| 78 | - [ ] Tooltips for complex metrics (if applicable) |
| 79 | |
| 80 | ### Mobile-Specific UX Checks |
| 81 | |
| 82 | #### Touch & Gesture |
| 83 | - [ ] Touch targets minimum 44x44px |
| 84 | - [ ] Minimum 8px between adjacent touch targets |
| 85 | - [ ] No hover-dependent interactions (mobile has no hover) |
| 86 | - [ ] Swipe gestures have visible affordances (carousel indicators) |
| 87 | |
| 88 | #### Performance Perception |
| 89 | - [ ] Skeleton screens appear within 300ms |
| 90 | - [ ] Optimistic updates for user actions |
| 91 | - [ ] Above-the-fold content loads first |
| 92 | - [ ] No layout shift after content loads |
| 93 | |
| 94 | #### Safe Areas |
| 95 | - [ ] Content not hidden behind notch/Dynamic Island |
| 96 | - [ ] Bottom content not behind home indicator |
| 97 | - [ ] BottomNav has `pb-safe` padding |
| 98 | |
| 99 | ### Dark Pattern Prevention |
| 100 | - [ ] No forced bottom sheets on entry |
| 101 | - [ ] No exit-prevention dialogs |
| 102 | - [ ] Every screen has a way to go back/dismiss |
| 103 | - [ ] CTA labels clearly describe the action |
| 104 | - [ ] No manipulative graphics (begging, urgency) |
| 105 | |
| 106 | ## Output Format |
| 107 | |
| 108 | 1. **Score**: A+ to F rating with breakdown |
| 109 | 2. **Critical Issues**: Must fix (blocks usability) |
| 110 | 3. **Major Issues**: Should fix (degrades experience) |
| 111 | 4. **Minor Issues**: Nice to fix (polish) |
| 112 | 5. **Recommendations**: Specific code changes for each issue |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
