← ClaudeAtlas

flutter-ai-ui-skilllisted

A master-level Flutter UI/UX design skill that equips AI coding assistants with curated design intelligence, colour palettes, typography pairings, animation patterns, component blueprints and actionable checklists for building beautiful, accessible, production-ready Flutter applications. Covers Material 3, Cupertino, adaptive layouts, animations, theming, state management integration, accessibility and performance optimization.
rantlieu-blip/flutter-ai-ui-skill · ★ 4 · Web & Frontend · score 77
Install: claude install-skill rantlieu-blip/flutter-ai-ui-skill
# Flutter AI UI Skill 🎨 > **Design intelligence for Flutter** — turn any AI coding assistant into a Flutter UI expert. --- ## Overview This skill provides comprehensive design intelligence for building and refining Flutter applications. It combines curated Flutter-specific best practices with professional UI/UX heuristics to produce beautiful, accessible, performant, and maintainable mobile interfaces. ### When does this skill activate? The skill activates automatically when you: - Request UI/UX work in a Flutter project - Ask to build, create, design, or improve any screen or component - Use the `/flutter-ai-ui` slash command (Kiro, Copilot, Roo Code) --- ## How to Use This Skill ### Step 1 – Gather Context Before writing a single line of code, understand: - **App domain**: healthcare, fintech, e-commerce, social, productivity, etc. - **Target audience**: age group, technical literacy, accessibility needs - **Brand personality**: playful, professional, minimal, bold, luxurious, warm - **Platform priorities**: Android-first, iOS-first, cross-platform + web - **Color & font preferences**: any existing assets or brand guidelines ### Step 2 – Generate a Design System Use `data/flutter_colors.csv` to choose your primary, secondary, surface and error palette based on category. Use `data/flutter_typography.csv` to pick a font-pairing that matches the app mood. Then generate a `AppTheme` class: ```dart // Example — do NOT hardcode colours across widgets final theme =