ux-design

aster-void's avatarfrom aster-void

Design user experiences with usability focus. Use when planning user flows, navigation, forms, error handling, or accessibility. Complements frontend-design (visual) with UX structure.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 11, 2026
[Creative Quality Checks]

When & Why to Use This Skill

The UX Design skill for Claude is a comprehensive toolkit for building user-centered digital experiences. It integrates core design principles like CRAP (Contrast, Repetition, Alignment, Proximity) and Nielsen’s 10 Heuristics to guide the creation of intuitive navigation, accessible forms, and seamless user flows. By focusing on usability, error recovery, and WCAG compliance, this skill ensures that frontend structures are not only visually appealing but also functionally superior and inclusive.

Use Cases

  • Designing high-conversion web forms with optimized layouts, clear labels, and robust error handling to improve completion rates.
  • Creating accessible user interfaces that comply with WCAG AA standards, including proper contrast ratios and touch target sizes for mobile devices.
  • Mapping complex user journeys and navigation structures (breadcrumbs, sidebars, bottom nav) to enhance site scannability and information architecture.
  • Conducting heuristic evaluations of existing designs using Nielsen's 10 principles to identify usability bottlenecks and implement structural improvements.
nameux-design
descriptionDesign user experiences with usability focus. Use when planning user flows, navigation, forms, error handling, or accessibility. Complements frontend-design (visual) with UX structure.
## Visual Foundation (CRAP) 1. [Contrast]: hierarchy through size/color/weight, important = stands out 2. [Repetition]: consistent patterns, colors, spacing throughout 3. [Alignment]: consistent alignment, grid-based layout 4. [Proximity]: related items close, unrelated items separated

Interaction

  1. [Scannable]: F-pattern layout, primary info top-left
  2. [Progressive]: essentials first → details on demand
  3. [Constrained]: dropdown over free text, radio over checkbox swarm
  4. [Recoverable]: undo for destructive, soft-delete over hard-delete
  5. [Semantic]: <button> not <div onclick>, <label> for all inputs
## Navigation - depth >3 → breadcrumbs - <7 same-page sections → tabs - many persistent sections → sidebar - mobile primary actions → bottom nav (thumb zone)

Forms

  • layout: single column, labels top-aligned
  • groups: visual separation between related fields
  • defaults: pre-fill from context
  • password: strength indicator + reveal toggle
  • submit: loading state + disable button

Feedback

  • <100ms → immediate state change

  • 1s → skeleton/progress bar

  • success → inline confirmation at action source
  • error → inline at source
  • empty → guide next action: "Add your first {item}"

Destructive

  • [Decision] reversible → Ctrl+Z undo | irreversible → confirm modal
  • confirm modal: show affected items, require explicit action
  • critical (delete account) → type-to-confirm
- buttons: verb + object (`Save draft` not `OK`) - specific: `Add to cart` not `Submit` - user vocabulary: `Projects` not `Entities` - focus: trap in modals, restore on close - contrast: WCAG AA (4.5:1 text, 3:1 UI) - touch: ≥44px targets - required: mark with `*`, announce to screen readers ## UX Design Process 1. Understand: Who is {user}? {user}'s goal: {goal}. Context: {when/where/device} 2. Map current state, identify pain points [skip if new] 3. Sketch flow: {entry point} → {key actions} → {success state} 4. Design the main structure 5. Identify friction: where might users hesitate, misunderstand, or abandon? 6. Design for failure: what errors can occur? how does user recover? 7. Find issues → iterate from step 3 - Consider using CRAP etc... ## Nielsen's 10 (evaluation checklist) - [ ] 1. Visibility of system status - [ ] 2. Match between system and real world - [ ] 3. User control and freedom (undo, exit) - [ ] 4. Consistency and standards - [ ] 5. Error prevention - [ ] 6. Recognition over recall - [ ] 7. Flexibility and efficiency - [ ] 8. Aesthetic and minimalist design - [ ] 9. Help users recover from errors - [ ] 10. Help and documentation ## Implementation - [ ] 1. Location always clear? - [ ] 2. Errors actionable? - [ ] 3. Tab order logical? - [ ] 4. Touch targets ≥44px? - [ ] 5. Focus managed in modals? - [ ] 6. Labels on all inputs?