SkillHub

ux

v1.0.0

Design and analyze user experiences that are intuitive, efficient, and aligned with user mental models.

Sourced from ClawHub, Authored by Iván

Installation

Please help me install the skill `ux` from SkillHub official store. npx skills add ivangdavila/ux

Flow Analysis

  • Map every step to complete key tasks—identify unnecessary steps
  • Each step is a potential dropout—minimize count and friction
  • Question every required field—if not essential now, defer or remove
  • Identify points requiring user memory—provide recognition instead

Mental Model Alignment

  • Use vocabulary users would expect—not internal/technical terms
  • Match familiar patterns before inventing—innovation has learning cost
  • Consistent metaphors throughout—don't mix paradigms in same product
  • Align with platform conventions—users bring expectations from other apps

Friction Reduction

  • Smart defaults reduce decisions—good default better than more options
  • Pre-fill from available context—location, previous selections, account data
  • Auto-save progress—never lose user work
  • Don't ask for information already available—or not yet needed

Progressive Disclosure

  • Show only what's needed for current task—hide advanced options until relevant
  • Reveal complexity gradually—basic path first, power features discoverable
  • Empty states guide to first action—not just "Nothing here"
  • Teach by doing, not explaining—inline hints over tutorials

Feedback Design

  • Every action gets acknowledgment—visual, haptic, or audible
  • Progress indication for waits over 1 second
  • Error messages: what happened + what to do next
  • Success confirmation for significant actions

Error Prevention

  • Design to prevent errors—constraints, confirmations, smart defaults
  • Confirmation dialogs only for destructive/irreversible actions
  • Undo available for reversible actions—reduces fear of exploring
  • Inline validation catches errors before submission

Cognitive Load

  • One primary action per screen—clear visual hierarchy
  • Group related information—chunking aids comprehension
  • Limit simultaneous choices—too many options cause paralysis
  • Consistent patterns across product—learned once, applied everywhere

Edge Cases to Design

  • Empty state: first time, cleared, filtered with no results
  • Loading state: skeleton preferred over spinner for known layouts
  • Error state: what went wrong, how to recover
  • Partial state: some data available, some loading/failed
  • Offline state: what works, what's queued, what's unavailable

Reversibility

  • Trash over permanent delete—recovery possible
  • Preview before commit—show effect of action
  • Draft states for complex work—don't require completion in one session
  • Settings and decisions easy to change—not buried or locked

Task Completion

  • Define what success looks like for each flow
  • First value delivered quickly—quick win before complex setup
  • Clear next step always visible—no dead ends
  • Completion feels complete—confirmation, celebration for big tasks

Accessibility Integration

  • Keyboard/switch navigation works for all flows
  • Screen reader announces what's needed—labels, states, updates
  • Sufficient contrast without relying on color alone
  • Respects user preferences—motion, text size, dark mode

Copy and Labels

  • Button labels describe outcome—"Save Changes" not "Submit"
  • Headings scannable—user finds what they need quickly
  • Error text actionable—not just "Invalid input"
  • Microcopy reduces uncertainty—helper text where questions arise

Consistency Checks

  • Same words for same concepts—create glossary if needed
  • Same interaction patterns—swipe/tap/long-press mean same things
  • Visual similarity reflects functional similarity
  • Exceptions rare and justified