---

name: ux-design description: Comprehensive UX design guidance covering research, information architecture, interaction patterns, and accessibility. Activates on ANY UI/UX work including user flows, navigation, forms, onboarding, error handling, and responsive design. Covers both process (Design Thinking, user research, personas) and implementation (patterns, accessibility, mobile UX). Use this skill for all user experience decisions on web and mobile platforms.

UX Design

User experience is the foundation. Visual aesthetics built on poor UX will fail. This skill ensures structural soundness before surface polish.

Related skills:

• aesthetic-ui-designer — Visual execution after UX decisions are made
• persona-creation — Deep user research, personas, JTBD, journey mapping
• accessibility-auditor — Comprehensive WCAG 2.2 AA audits

Design Thinking Framework

A pragmatic approach: Design Thinking structure with Lean UX speed.

CopyEmpathize → Define → Ideate → Prototype → Test → Iterate
    ↑                                              |
    └──────────────────────────────────────────────┘

Quick Process Guide

For detailed process guidance: See references/design-thinking-process.md

---

Core UX Principles

1. User Control & Freedom

• Always provide escape routes (cancel, undo, back)
• Don't trap users in flows
• Confirm destructive actions, but don't over-confirm routine ones

2. Consistency & Standards

• Follow platform conventions (web vs iOS vs Android)
• Internal consistency: same action = same result everywhere
• Use familiar patterns before inventing new ones

3. Error Prevention > Error Messages

• Disable invalid actions rather than allowing then rejecting
• Use constraints (date pickers vs free text)
• Provide smart defaults

4. Recognition Over Recall

• Show options, don't require memorization
• Persistent navigation and context
• Recently used items, search history

5. Flexibility & Efficiency

• Shortcuts for experts, guidance for novices
• Customizable workflows
• Progressive disclosure: simple default, advanced available

6. Feedback & Visibility

• Every action needs acknowledgment
• System status always visible
• Loading states, progress indicators, success confirmations

7. Help Users Recover

• Clear error messages: what happened, why, how to fix
• Preserve user input on errors
• Offer alternatives when primary path fails

---

Information Architecture

Structure content so users find what they need.

Navigation Principles

• 7±2 rule: Limit top-level items to 5-9
• 3-click guideline: Major content within 3 clicks (flexible, not rigid)
• Clear labeling: User language, not internal jargon
• Visible location: Users should always know where they are

Navigation Patterns

For detailed IA guidance: See references/information-architecture.md

---

Implementation Patterns

Forms

Structure:

• One column layouts outperform multi-column
• Group related fields visually
• Logical order (don't ask shipping before cart)

Inputs:

• Label above field (not placeholder-only)
• Appropriate input types (email, tel, date)
• Inline validation after field blur, not while typing

Actions:

• Primary action visually dominant
• Destructive actions require confirmation
• Disabled submit until valid (with clear indication why)

Feedback States

Every interactive element needs:

• Default: Resting state
• Hover: Mouse over (desktop)
• Focus: Keyboard navigation (accessibility critical)
• Active: Being pressed/clicked
• Disabled: Unavailable, with clear reason
• Loading: Processing, with indicator
• Success/Error: Outcome confirmation

Loading & Empty States

Loading:

• Skeleton screens over spinners
• Progress indicators for long operations
• Optimistic UI where safe

Empty states:

• Explain why empty
• Guide toward first action
• Never just blank space

Error Handling

Copy[Clear icon] What went wrong
             Why it happened (briefly)
             [Primary action to fix] [Secondary: help/retry]

• Position near the source
• Don't blame the user
• Offer recovery path

Onboarding

• Delay account creation until necessary
• Value first, signup second
• Progressive profiling over long forms
• Skippable for returning users

For detailed patterns: See references/patterns.md For modern patterns (AI, dark mode, animation): See references/modern-patterns.md

---

Mobile-Specific UX

Touch Targets

• Minimum 44×44pt (iOS) / 48×48dp (Android)
• Spacing between targets to prevent mis-taps
• Primary actions in thumb zone (bottom of screen)

Gestures

• Swipe for delete/archive (with undo)
• Pull-to-refresh for lists
• Pinch-to-zoom for images/maps
• Avoid gesture-only actions; provide visible alternatives

Mobile Navigation

• Bottom tab bar for primary nav (≤5 items)
• Stack navigation for hierarchical content
• Modal for focused tasks (with clear dismiss)
• Avoid hamburger menus as primary nav

Performance UX

• Perceived performance matters more than actual
• Instant feedback, background processing
• Offline states and graceful degradation

---

Accessibility Essentials

Accessibility improves UX for everyone. For comprehensive audits, use the accessibility-auditor skill.

Quick Checklist

Perceivable:

• Text alternatives for images (alt text)
• Color contrast: 4.5:1 for text, 3:1 for large text
• Don't convey info by color alone

Operable:

• Full keyboard navigation
• Visible focus indicators
• Touch targets ≥44px
• No keyboard traps

Understandable:

• Clear error messages with recovery path
• Labels for all form inputs
• Consistent navigation

Robust:

• Semantic HTML (use right elements)
• ARIA only when HTML isn't sufficient

For implementation details: See references/accessibility.md For full WCAG 2.2 AA audits: Use the accessibility-auditor skill

---

Responsive Design

Breakpoint Strategy

• Design mobile-first, enhance upward
• Content determines breakpoints, not devices
• Common: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)

What Changes Per Breakpoint

• Navigation pattern (tabs → sidebar → topnav)
• Grid columns
• Touch vs hover interactions
• Content density

What Stays Consistent

• Core functionality
• Information hierarchy
• Brand identity
• Accessibility

---

UX Anti-Patterns

Navigation Anti-Patterns

Form Anti-Patterns

Feedback Anti-Patterns

Onboarding Anti-Patterns

Mobile Anti-Patterns

General Anti-Patterns

---

UX Decision Trees

Modal vs Page vs Drawer

CopyIs the task focused and short?
├── Yes: Does user need to reference background content?
│   ├── Yes → Drawer/Panel (side sheet)
│   └── No → Modal
└── No: Is the task a full workflow?
    ├── Yes → Full page
    └── No: Is it contextual actions?
        ├── Yes → Bottom sheet (mobile) / Dropdown (web)
        └── No → Consider page or panel

Tabs vs Accordion vs Sections

CopyIs content mutually exclusive (only one visible at a time)?
├── Yes: Are items few (≤5) and parallel?
│   ├── Yes → Tabs
│   └── No → Accordion
└── No: Should all content be scannable?
    ├── Yes → Stacked sections (all visible)
    └── No → Progressive disclosure (expand on demand)

Pagination vs Infinite Scroll

CopyDoes user need to find specific item or reach specific point?
├── Yes → Pagination (URL stability, can bookmark)
└── No: Is content time-based / feed-like?
    ├── Yes: Is list long and exploratory?
    │   ├── Yes → Infinite scroll + "back to top"
    │   └── No → Load more button
    └── No → Pagination with visible page count

Toast vs Inline vs Modal (for messages)

CopyIs immediate action required?
├── Yes → Modal with action buttons
└── No: Is it an error related to specific field?
    ├── Yes → Inline (near field)
    └── No: Is it a success/info message?
        ├── Yes → Toast (auto-dismiss ok)
        └── No: Is it a system-level warning?
            ├── Yes → Banner (top of page)
            └── No → Toast or inline

---

UX Checklist

Before finalizing any interface:

Structure

• Clear information hierarchy
• Intuitive navigation
• User always knows their location
• Important actions are prominent

Interaction

• Every action has feedback
• Error states are helpful
• Loading states are present
• Empty states guide users

Accessibility

• Keyboard navigable
• Screen reader compatible
• Sufficient color contrast
• Touch targets adequate

Mobile

• Thumb-zone friendly
• Touch targets ≥44pt
• Works offline or degrades gracefully
• No hover-dependent functionality

---

References:

• references/design-thinking-process.md — Full process, research methods, ideation, testing
• references/information-architecture.md — Site structure, navigation, content organization
• references/patterns.md — Detailed implementation patterns with decision guidance
• references/modern-patterns.md — AI UX, dark mode, animation, i18n, data visualization
• references/accessibility.md — Accessibility implementation essentials