← ClaudeAtlas

flutter-uilisted

Flutter UI/UX: components, screens, animations, responsive layouts, custom widgets/themes, performance + accessibility. Triggers: 'create/build Flutter UI/screen', 'Flutter animations', 'responsive Flutter layout', 'custom Flutter widgets', 'Flutter theme'.
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. ###