# UI UX Patterns

> When designing layouts, navigation, forms, or feedback components. Reference for consistent UI decisions.

- Skill: `majiayu000/ui-ux-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ui-ux-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ui-ux-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/ui-ux-patterns

---


## When to Use
When designing layouts, navigation, forms, or feedback components. Reference for consistent UI decisions.

## Patterns

### 4 Required Screen States
Every screen MUST define:
1. **Loading** - skeleton or spinner
2. **Empty** - illustration + CTA
3. **Error** - message + recovery action
4. **Success** - content + next steps

### Layout Patterns
```
Card Grid     - Products, dashboard widgets
Master-Detail - Email client, settings
Split View    - Editor + preview
```

### Form Best Practices
```
- Validate on blur (not on every keystroke)
- Error message below field (not tooltip)
- Color + icon for status (not color alone)
- Multi-step: max 5-7 steps, progress indicator
```

### Feedback Patterns
```
Toast         - Auto-dismiss 3-5s, non-blocking, offer Undo
Modal         - Destructive actions, critical decisions only
Loading       - Skeleton (<3s), Spinner (unknown), Progress (>5s)
```

### Action Hierarchy
```
Primary   - Right side, filled button, max 1 per view
Secondary - Left of primary, outline button
Danger    - Red outline (not filled), requires confirmation
```

## Anti-Patterns
- Skipping empty/error states
- Walls of text (use scannable content)
- Desktop-only thinking (mobile-first!)
- Modal for non-critical info (use toast)
- Tiny touch targets (<44px)

## Verification Checklist
- [ ] All 4 states defined (loading, empty, error, success)
- [ ] Touch targets ≥44x44px
- [ ] Mobile breakpoints defined
- [ ] One primary action per view
- [ ] Destructive actions require confirmation
- [ ] Feedback is immediate and clear