ss-audit
GitHub基于尼尔森启发式原则和现代移动端UX最佳实践,对界面进行可用性审计。支持通过Registry解析特定Artifact,严格区分于无障碍、设计令牌及文案审查场景,确保交互体验合规。
Trigger Scenarios
Install
npx skills add bitjaru/styleseed --skill ss-audit -g -y
SKILL.md
Frontmatter
{
"name": "ss-audit",
"description": "Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices",
"allowed-tools": "Read, Grep, Glob",
"argument-hint": "[file-path or screen-name]"
}
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-pageor/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
- Score: A+ to F rating with breakdown
- Critical Issues: Must fix (blocks usability)
- Major Issues: Should fix (degrades experience)
- Minor Issues: Nice to fix (polish)
- Recommendations: Specific code changes for each issue
Version History
-
bfd06d8
Current 2026-08-19 16:29
新增 Registry-first artifact boundary 逻辑,优先解析特定 Artifact 文件,不再回退到全局 legacy bundle。
- c414969 2026-08-13 14:12


