flutter-ai-ui-skilllisted
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 =