majiayu000 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:
- Loading - skeleton or spinner
- Empty - illustration + CTA
- Error - message + recovery action
- 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