Design - UI/UX Implementation
Create interfaces that feel intuitive, responsive, and delightful. Focus on the small details that distinguish polished apps from mediocre ones.
When to Use This Skill
- Implementing new screens or components
- Reviewing UI code for UX issues
- Deciding between loading state patterns
- Placing buttons, CTAs, and interactive elements
- Handling errors and edge cases gracefully
- Adding animations and transitions
- Choosing animation timing and curves
The Golden Rules
- Thumb-first design - Primary actions in the bottom 2/3 of the screen
- Immediate feedback - Every tap/action should have visible response
- Smart defaults - Auto-focus, pre-fill, remember preferences
- Graceful failures - Errors should guide, not blame
- Platform respect - iOS swipe-back, Android gestures, Material patterns
- Purposeful motion - Animate to communicate, not to impress
Core Principles
Every Action Deserves Feedback
Users should never wonder "did that work?" - provide visual press states, haptics, loading indicators, and success/error messages. See interaction-guide.md for details.
Auto-Focus Intelligence
Focus the right field at the right time - login screens should auto-focus email, search screens should auto-focus the search field. See interaction-guide.md for the complete decision table.
Error Recovery, Not Error Display
Errors should help users succeed. Instead of "Error: Invalid input", show "Email needs an @ symbol". See visual-guide.md for error state patterns.
Touch Targets
Minimum 48×48dp for all interactive elements. See interaction-guide.md for sizing guidelines.
Purposeful Animation
Animation should communicate change, not decorate. Use 300ms for transitions, match curves to motion direction, and always respect reduced motion preferences. See animation-guide.md for timing, curves, and patterns.
Quick Decisions
| Question |
Answer |
| Loading for <300ms? |
No indicator needed |
| Loading for 1-3s? |
Skeleton screen |
| Button action? |
Inline button loader |
| Full page load? |
Skeleton matching layout |
| File upload? |
Progress bar with percentage |
| Page transition duration? |
300ms (default) |
| Element entering screen? |
Use easeOutCubic curve |
| Element leaving screen? |
Use easeInCubic curve |
| Simple property change? |
Use implicit animation (AnimatedContainer) |
| Complex animation? |
Use explicit (AnimationController) |
Workflow
- Before implementing: Where will the user's thumb be? What's the primary action? What if it fails? What animations are needed?
- During implementation: Touch targets ≥48dp, visual press states, appropriate loading pattern, natural animations.
- After implementation: Review against the checklists below and test with reduced motion enabled.
Guides
| Guide |
Use For |
| interaction-guide.md |
Touch targets, gestures, focus, keyboard, haptics |
| visual-guide.md |
Colors, loading states, dark mode, empty states |
| animation-guide.md |
Timing, curves, page transitions, Hero, performance |
| platform-guide.md |
iOS vs Android conventions |
| examples.md |
Complete Flutter code patterns |
UX Checklist
Animation Checklist
Accessibility Integration
This skill focuses on visual/interaction design. For comprehensive accessibility:
Key accessibility requirements covered by design:
- Touch targets ≥48dp (see interaction-guide.md)
- Color contrast ≥4.5:1 (see visual-guide.md)
- Reduced motion support (see animation-guide.md)
Related Skills
/a11y - Comprehensive accessibility (Semantics widgets, screen readers)/feature-init - Initialize feature scaffold before polishing/i18n - Localize user-facing text, error messages/testing - Widget tests for UI interactions
1---2name: design3description: Design user interfaces with exceptional UX patterns. Use when implementing screens, reviewing UI code, choosing loading states, handling errors gracefully, placing interactive elements, adding animations, or ensuring the app feels polished and intuitive. Focuses on user experience details that make apps feel professional.4---56# Design - UI/UX Implementation78Create interfaces that feel intuitive, responsive, and delightful. Focus on the small details that distinguish polished apps from mediocre ones.910## When to Use This Skill1112- Implementing new screens or components13- Reviewing UI code for UX issues14- Deciding between loading state patterns15- Placing buttons, CTAs, and interactive elements16- Handling errors and edge cases gracefully17- Adding animations and transitions18- Choosing animation timing and curves1920## The Golden Rules21221. **Thumb-first design** - Primary actions in the bottom 2/3 of the screen232. **Immediate feedback** - Every tap/action should have visible response243. **Smart defaults** - Auto-focus, pre-fill, remember preferences254. **Graceful failures** - Errors should guide, not blame265. **Platform respect** - iOS swipe-back, Android gestures, Material patterns276. **Purposeful motion** - Animate to communicate, not to impress2829## Core Principles3031### Every Action Deserves Feedback32Users should never wonder "did that work?" - provide visual press states, haptics, loading indicators, and success/error messages. See [interaction-guide.md](interaction-guide.md) for details.3334### Auto-Focus Intelligence35Focus the right field at the right time - login screens should auto-focus email, search screens should auto-focus the search field. See [interaction-guide.md](interaction-guide.md) for the complete decision table.3637### Error Recovery, Not Error Display38Errors should help users succeed. Instead of "Error: Invalid input", show "Email needs an @ symbol". See [visual-guide.md](visual-guide.md) for error state patterns.3940### Touch Targets41Minimum 48×48dp for all interactive elements. See [interaction-guide.md](interaction-guide.md) for sizing guidelines.4243### Purposeful Animation44Animation should communicate change, not decorate. Use 300ms for transitions, match curves to motion direction, and always respect reduced motion preferences. See [animation-guide.md](animation-guide.md) for timing, curves, and patterns.4546## Quick Decisions4748| Question | Answer |49|----------|--------|50| Loading for <300ms? | No indicator needed |51| Loading for 1-3s? | Skeleton screen |52| Button action? | Inline button loader |53| Full page load? | Skeleton matching layout |54| File upload? | Progress bar with percentage |55| Page transition duration? | 300ms (default) |56| Element entering screen? | Use `easeOutCubic` curve |57| Element leaving screen? | Use `easeInCubic` curve |58| Simple property change? | Use implicit animation (`AnimatedContainer`) |59| Complex animation? | Use explicit (`AnimationController`) |6061## Workflow62631. **Before implementing**: Where will the user's thumb be? What's the primary action? What if it fails? What animations are needed?642. **During implementation**: Touch targets ≥48dp, visual press states, appropriate loading pattern, natural animations.653. **After implementation**: Review against the checklists below and test with reduced motion enabled.6667## Guides6869| Guide | Use For |70|-------|---------|71| [interaction-guide.md](interaction-guide.md) | Touch targets, gestures, focus, keyboard, haptics |72| [visual-guide.md](visual-guide.md) | Colors, loading states, dark mode, empty states |73| [animation-guide.md](animation-guide.md) | Timing, curves, page transitions, Hero, performance |74| [platform-guide.md](platform-guide.md) | iOS vs Android conventions |75| [examples.md](examples.md) | Complete Flutter code patterns |7677## UX Checklist7879- [ ] Primary action in thumb-friendly zone80- [ ] All touch targets ≥48dp81- [ ] Every interactive element has feedback82- [ ] Loading state matches operation type83- [ ] Error messages explain AND guide84- [ ] Works in light and dark mode85- [ ] iOS swipe-back not blocked86- [ ] Accessibility: labels, focus order, reduced motion (see [interaction-guide.md](interaction-guide.md))8788### Animation Checklist8990- [ ] Page transitions feel natural (300ms default)91- [ ] Curves match motion type (easeOut for enter, easeIn for exit)92- [ ] List items animate in (staggered for many items)93- [ ] Loading → content transition is smooth94- [ ] Reduced motion preference respected95- [ ] AnimationControllers properly disposed9697## Accessibility Integration9899This skill focuses on visual/interaction design. For comprehensive accessibility:100101- **Semantic labels**: Use `/a11y` skill for Semantics widget patterns102- **Screen reader testing**: See [../a11y/testing-guide.md](../a11y/testing-guide.md)103- **WCAG compliance**: See [../a11y/SKILL.md](../a11y/SKILL.md) for guidelines104105Key accessibility requirements covered by design:106- Touch targets ≥48dp (see [interaction-guide.md](interaction-guide.md))107- Color contrast ≥4.5:1 (see [visual-guide.md](visual-guide.md))108- Reduced motion support (see [animation-guide.md](animation-guide.md))109110## Related Skills111112- `/a11y` - Comprehensive accessibility (Semantics widgets, screen readers)113- `/feature-init` - Initialize feature scaffold before polishing114- `/i18n` - Localize user-facing text, error messages115- `/testing` - Widget tests for UI interactions
launch52-ai