bitjaru/styleseed

ss-audit

Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices

First seen Apr 13, 2026

Installation

$ npx skills add bitjaru/styleseed --skill ss-audit

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from bitjaru/styleseed · top by installs.

npx skills add bitjaru/styleseed

Browse all from bitjaru/styleseed

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 944
License LICENSE
Default branch main
Open issues 9
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Allowed toolsRead, Grep, Glob

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,270 B
  • docs SUMMARY.md 103 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 721 installs

SKILL.md

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