ux-design

---

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

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

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