# UX

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

- Skill: `modbender/ux` (Agent Skill)
- Install (CLI): `npx skillmds add modbender/ux`
- Raw SKILL.md: https://api.skillmd.com/api/skills/modbender/ux/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: modbender (https://skillmd.com/u/modbender)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/modbender/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