mobbin-flutter

Claude Code skill for Flutter UI/UX research and implementation using Mobbin MCP. Flutter 3.44 / Dart 3.12 ready · May 2026

Ground every Flutter design decision in real shipped apps — research patterns, implement production widgets, preview every state, and verify accessibility.

What it does

• Dual MCP strategy — official Mobbin MCP (API) first, browser automation fallback
• Audits existing Flutter screens and identifies UX gaps
• Researches Mobbin with goal-oriented queries; analyses the actual screen images
• Generates a Flutter design spec (widget tree, theme tokens, states) — approval-gated
• Implements production Dart code: Material 3 / Cupertino / custom, dot shorthands, private named params, sealed-class state, official MVVM architecture
• Previews every state via @Preview annotations (instant IDE preview, no full app run)
• Verifies with bundled validation script + accessibility guideline tests
• Optional golden tests for visual regression

Requirements

• Mobbin MCP (paid plan) or claude-in-chrome MCP
• Flutter 3.38+ (@Preview, dot shorthands); 3.44 recommended

Install

npx skills add https://github.com/cadoCG/mobbin-flutter

Restart Claude Code, then in your Flutter project:

Redesign my HomeScreen using Mobbin — fintech style, Material 3, Riverpod
Find UI patterns for an onboarding flow for a health app
Build a new PaywallScreen using real subscription UI patterns from Mobbin
How does Revolut do onboarding? Build it in Flutter
Audit my ProfileScreen and improve the UX based on top apps
Redesign my settings screen and add golden tests

Workflow (6 phases)

Phase	What happens
0 — Preflight	MCP check, read pubspec.yaml, single clarification
1 — Audit	Analyse existing screen(s) if redesigning
2 — Research	Goal-oriented Mobbin searches; visual analysis of real screen images
3 — Spec	Flutter design spec — approval required before code
4 — Implementation	Production Dart / Flutter code
4.5 — Preview	@Preview annotations for each state + accessibility variant
5 — Validate	scripts/validate.sh (format + analyze + test) + a11y tests

Files

mobbin-flutter/
├── SKILL.md
├── README.md
├── references/
│   ├── flutter-widgets.md    # 50+ pattern→widget mappings, M3 tokens, Cupertino
│   ├── mobbin-queries.md     # goal-oriented query templates + reference apps
│   ├── mobbin-mcp.md         # MCP tool sequence: two-step path, filter taxonomy
│   ├── architecture.md       # MVVM, folder structure, Dart 3.12, adaptive/foldable
│   └── testing-a11y.md       # @Preview, accessibility tests, semantics, golden tests
└── scripts/
    └── validate.sh           # dart format + flutter analyze + flutter test

Highlights

• Two Mobbin query modes: broad pattern search + app-specific two-step path (quick_search → get_app_screens/get_app_flows)
• Filter taxonomy scoped by kind to stay under token limits
• Real image analysis — patterns are based on screens actually examined, not metadata
• @Preview everywhere — see every state in the IDE without launching the app
• Testable accessibility — androidTapTargetGuideline, textContrastGuideline, labeledTapTargetGuideline as generated widget tests, not just a checklist
• Adaptive by default — Material 3 window size classes, foldable hinge handling
• Deterministic validation — bundled script instead of hoping the checklist was followed
• Explicit approval gate before any code is written

Compatibility

State management	GoRouter	auto_route	Navigator 2
Riverpod ✅	✅	✅	✅
BLoC ✅	✅	✅	✅
Provider ✅	✅	✅	✅

Disclaimer

This is an unofficial, community-built skill. It is not affiliated with, endorsed by, or sponsored by Mobbin or Google/Flutter. "Mobbin" and "Flutter" are trademarks of their respective owners. Using the Mobbin MCP requires a valid Mobbin subscription; this skill does not provide access to Mobbin's library.

License

MIT © 2026 Cado