Design
Template for Flutter mobile applications.
npx -y skills add launch52-ai/flutter-template --skill designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
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.
SKILL.md
5.4 KB, as published. Nobody here has run it
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
- Primary action in thumb-friendly zone
- All touch targets ≥48dp
- Every interactive element has feedback
- Loading state matches operation type
- Error messages explain AND guide
- Works in light and dark mode
- iOS swipe-back not blocked
- Accessibility: labels, focus order, reduced motion (see interaction-guide.md)
Animation Checklist
- Page transitions feel natural (300ms default)
- Curves match motion type (easeOut for enter, easeIn for exit)
- List items animate in (staggered for many items)
- Loading → content transition is smooth
- Reduced motion preference respected
- AnimationControllers properly disposed
Accessibility Integration
This skill focuses on visual/interaction design. For comprehensive accessibility:
- Semantic labels: Use
/a11yskill for Semantics widget patterns - Screen reader testing: See ../a11y/testing-guide.md
- WCAG compliance: See ../a11y/SKILL.md for guidelines
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