← ClaudeAtlas

flutter-ui-uxlisted

Comprehensive Flutter UI/UX development skill for creating beautiful, responsive, and animated mobile applications. Use when user asks to: (1) Build Flutter UI components or screens (2) Implement animations and transitions (3) Design responsive layouts (4) Create custom widgets and themes (5) Optimize UI performance and accessibility Triggers: "create Flutter UI", "build Flutter screen", "Flutter animations", "responsive Flutter layout", "custom Flutter widgets", "Flutter theme design"
juliuswiener/nord-kit · ★ 0 · Web & Frontend · score 62
Install: claude install-skill juliuswiener/nord-kit
# Flutter UI/UX Development Create beautiful, responsive, and animated Flutter applications with modern design patterns and best practices. ## Core Philosophy **"Mobile-first, animation-enhanced, accessible design"** - Focus on: | Priority | Area | Purpose | |----------|------|---------| | 1 | Widget Composition | Reusable, maintainable UI components | | 2 | Responsive Design | Adaptive layouts for all screen sizes | | 3 | Animations | Smooth, purposeful transitions and micro-interactions | | 4 | Custom Themes | Consistent, branded visual identity | | 5 | Performance | 60fps rendering and optimal resource usage | ## Development Workflow Execute phases sequentially. Complete each before proceeding. ### Phase 1: Analyze Requirements 1. **Understand app structure** - Identify existing widgets, screens, and navigation 2. **Design system review** - Check existing themes, colors, and typography 3. **Platform considerations** - Note iOS/Android specific requirements 4. **Performance constraints** - Identify animation complexity and rendering needs Output: UI requirements analysis with component breakdown. ### Phase 2: Design Widget Architecture 1. **Widget hierarchy planning** - Design composition tree 2. **State management strategy** - Choose StatefulWidget vs StatelessWidget 3. **Custom widget identification** - Plan reusable components 4. **Theme integration** - Define color schemes and typography Output: Widget architecture diagram and component specifications. ###