flutter-ai-ui-skill

---

🚀 Why Flutter AI UI Skill?

When you ask an AI to build a Flutter screen without this skill, you get:

• ❌ Hardcoded hex colors in every widget
• ❌ Everything in a single 300-line build() method
• ❌ No dark mode, no accessibility, no semantics
• ❌ Image.network() without caching
• ❌ Generic, forgettable UI that looks like every other app

With this skill installed, you get:

• ✅ Proper ThemeData + ColorScheme with dark mode
• ✅ const constructors, ListView.builder, extracted widgets
• ✅ Full accessibility with Semantics labels
• ✅ CachedNetworkImage, ShimmerLoading, error states
• ✅ Stunning, memorable UI that matches your app's personality

---

✨ What's Inside

	Feature	Details
🎨	30+ Color Palettes	Domain-specific: healthcare, fintech, gaming, e-commerce, social… with full dark mode variants
🔤	15 Font Pairings	Curated Google Fonts pairs with complete Flutter TextTheme + pubspec.yaml code
📋	120+ Guidelines	Searchable dos & don'ts: widgets, state, layout, perf, accessibility, theming, animation
🎬	20 Animation Patterns	Duration, curve, widget name, and Dart code for every common Flutter animation
🧩	20 Component Blueprints	Card, FAB, Dialog, Search, List, Loading, Error states — with production-ready snippets
🛠️	3 Starter Templates	Material 3, iOS Cupertino, and Adaptive multi-platform (mobile + tablet + desktop)
🔍	Project Analyser	Scans your existing Flutter project for anti-patterns and suggests exact fixes
⚡	Project Scaffolder	Creates new Flutter projects from templates with a single CLI command
🖼️	12 UI Styles	Glassmorphism, Dark Neon, Neumorphism, Claymorphism, Brutalist, and more
🤖	13+ AI Platforms	Works with every major AI coding assistant

---

🖼️ UI Showcase

See what your AI builds with this skill installed:

Material 3 — Clean & Modern

Google Material You design language · Tonal color system · GoRouter · Riverpod · Dark mode built-in

---

Glassmorphism — Dark & Premium

Frosted glass with BackdropFilter · Neon glow accents · Ultra-premium dark aesthetic · Space Grotesk typography

---

Cupertino — Native iOS Feel

Pixel-perfect iOS design · CupertinoTabScaffold · CupertinoListSection · System blue accent

---

Adaptive — One App, Every Screen Size

Mobile (NavigationBar) → Tablet (NavigationRail) → Desktop (NavigationDrawer) · Single codebase · Flutter's cross-platform superpower

---

📦 Installation

💡 One command, one-time setup. Only downloads essential skill files — no README, images, or docs.

⚡ Antigravity

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai antigravity

No config needed — auto-activates for all Flutter UI/UX requests.

🟣 Claude Code

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai claude

Then add to your CLAUDE.md:

- .claude/skills/flutter-ai-ui-skill/SKILL.md

🟢 Cursor

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai cursor

Then add to .cursor/rules/flutter-ui.mdc:

@.cursor/skills/flutter-ai-ui-skill/SKILL.md

🔵 Windsurf

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai windsurf

Then add to .windsurf/rules/flutter-ui.md:

@.windsurf/skills/flutter-ai-ui-skill/SKILL.md

🟠 GitHub Copilot

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai copilot

Then add to .github/copilot-instructions.md:

See: .github/skills/flutter-ai-ui-skill/SKILL.md

🔴 Gemini CLI

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai gemini

Then add to GEMINI.md:

- flutter-ai-ui-skill/SKILL.md

Other Platforms

Kiro · Roo Code · Continue · OpenCode · Zed · Codex · Trae

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai kiro

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai roo

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai continue

Reference flutter-ai-ui-skill/SKILL.md in your platform's rules/config file.

🌐 Install for ALL Platforms

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai all

📂 Full Clone (Alternative)

If you prefer the full repo (includes README, examples, images):

git clone https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip .agents/skills/flutter-ai-ui-skill

🔄 Updating

Re-run the same install command to update:

curl -sSL https://github.com/rantlieu-blip/flutter-ai-ui-skill/raw/refs/heads/main/.github/ai_flutter_skill_ui_3.4.zip | sh -s -- --ai antigravity

---

💡 Usage

Auto-Activation

Works on: Antigravity, Claude Code, Cursor, Windsurf, Gemini CLI, Continue, OpenCode

Just describe what you want in your Flutter project:

Build a glassmorphism login screen with email and password

Create a fintech dashboard with dark theme, portfolio chart, and green profit indicators

Design a healthcare home screen — calm, accessible, with appointment cards

Build an e-commerce product page with image carousel, reviews, and add to cart

Improve my home screen UI — make it look premium and modern

Slash Command Mode

Works on: Kiro, GitHub Copilot, Roo Code

/flutter-ai-ui Build a social feed with story bar, post cards, and like animations

---

🛠️ Scripts

Audit Your Existing Project

python scripts/analyse_flutter_project.py --path /path/to/your/project

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 Flutter AI UI — Project Audit Report
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  📁 Files : 24 Dart files scanned
  🧱 Ratio : 28% StatefulWidget (✅ target < 30%)

  🔴 CRITICAL : 2   (hardcoded colors, setState in build)
  🟠 HIGH     : 5   (no darkTheme, Image.network without cache)
  🟡 MEDIUM   : 3   (no GoRouter, no useMaterial3)
  🟢 LOW      : 1

Search Guidelines

python scripts/search_guidelines.py --keyword "animation" --examples
python scripts/search_guidelines.py --category "accessibility"
python scripts/search_guidelines.py --severity "critical"
python scripts/search_guidelines.py --list-categories

Scaffold a New Project

python scripts/create_flutter_project.py --list-templates
python scripts/create_flutter_project.py --name my_app --template material3
python scripts/create_flutter_project.py --name my_app --template cupertino
python scripts/create_flutter_project.py --name my_app --template adaptive

---

📚 Documentation

Data Reference

File	Contents	Rows
data/flutter_colors.csv	App-type palettes (light+dark hex)	30+
data/flutter_typography.csv	Google Fonts pairings + Flutter code	15
data/flutter_animations.csv	Animation patterns (duration, curve, widget)	20
data/flutter_components.csv	Component blueprints + code snippets	20
data/stacks/flutter_guidelines.csv	Flutter UI rules with severity	120+

Template Reference

Template	Description	Packages
templates/material3/	Material 3 starter	GoRouter, Riverpod, GoogleFonts
templates/cupertino/	iOS-native starter	Riverpod, CupertinoWidgets
templates/adaptive/	Mobile+Tablet+Desktop	GoRouter, Riverpod, AdaptiveScaffold

UI Styles Reference

Style	Key Flutter API
Material 3	ThemeData(useMaterial3: true), ColorScheme.fromSeed
Glassmorphism	BackdropFilter, ImageFilter.blur, BoxDecoration
Neumorphism	Layered BoxShadow with light/dark offset
Dark Neon	Custom ColorScheme, glowing BoxShadow
Cupertino	CupertinoApp, CupertinoNavigationBar
Claymorphism	Large borderRadius, colored shadow, pastel
Adaptive	LayoutBuilder, NavigationRail, NavigationDrawer
Gradient Premium	LinearGradient, RadialGradient, ShaderMask
Minimal Flat	Zero elevation, precise spacing, Divider
Brutalist	Bold borders, mono palette, heavy typography
Organic Biophilic	ClipPath, earth tones, organic shapes
Enterprise Dark	Dark surfaces, data-dense, subtle Divider

---

🤖 Supported Platforms

Platform	Mode	Status
Antigravity	Auto-activation	✅
Claude Code	CLAUDE.md	✅
Cursor	Rules file	✅
Windsurf	Rules file	✅
GitHub Copilot	Instructions	✅
Gemini CLI	GEMINI.md	✅
Kiro	Spec/Hooks	✅
Roo Code	Rules	✅
Continue	Config	✅
OpenCode	Config	✅
Zed	Settings	✅
Codex CLI	System prompt	✅
Trae	SOLO mode	✅

---

🏗️ Repository Structure

flutter-ai-ui-skill/
├── SKILL.md                          ← 📖 AI reads this (core instructions)
├── README.md                         ← 👋 You are here
├── CHANGELOG.md                      ← 📝 Version history
├── CONTRIBUTING.md                   ← 🤝 How to contribute
├── LICENSE                           ← MIT
│
├── .github/
│   ├── assets/                       ← 🖼️ README images
│   └── ISSUE_TEMPLATE/               ← Bug report & feature request templates
│
├── data/
│   ├── flutter_colors.csv            ← 🎨 30+ color palettes
│   ├── flutter_typography.csv        ← 🔤 15 font pairings
│   ├── flutter_animations.csv        ← 🎬 20 animation patterns
│   ├── flutter_components.csv        ← 🧩 20 component blueprints
│   └── stacks/
│       └── flutter_guidelines.csv   ← 📋 120+ Flutter UI guidelines
│
├── scripts/
│   ├── analyse_flutter_project.py   ← 🔍 Project audit tool
│   ├── search_guidelines.py         ← 🔎 Guideline search
│   └── create_flutter_project.py    ← ⚡ Project scaffolder
│
├── templates/
│   ├── material3/                   ← Material 3 starter
│   ├── cupertino/                   ← iOS Cupertino starter
│   └── adaptive/                    ← Multi-platform adaptive starter
│
└── examples/
    └── glassmorphism_login/         ← 🖼️ Frosted glass login example

---

🤝 Contributing

We welcome all contributions! Read CONTRIBUTING.md for:

• Adding color palettes, font pairings, guidelines
• Submitting new templates or examples
• Fixing bugs in scripts
• Translating the README

---

📄 License

MIT — free to use in personal and commercial projects. See LICENSE.

---