Flutter Dev
Ship a cross-platform Flutter app with consistent widgets, state management, routing, and performance habits without guessing Riverpod, Bloc, or GoRouter patterns.
Overview
flutter-dev is an agent skill for the Build phase that guides Flutter 3 cross-platform UI, Riverpod/Bloc state, GoRouter navigation, performance tuning, and widget testing.
Install
npx skills add https://github.com/minimax-ai/skills --skill flutter-devWhat is this skill?
- Quick-reference widget patterns table mapping goals to Riverpod, Bloc, GoRouter, and layout primitives
- Riverpod and Bloc coverage including FutureProvider, StreamProvider, and NotifierProvider patterns
- GoRouter navigation with context.go/push and responsive LayoutBuilder breakpoints
- Performance focus: const optimization, ListView.builder, CustomScrollView, and DevTools profiling
- Cross-platform testing strategies for widget tests and async providers
- Metadata version 1.0.0
- Quick-reference widget patterns table with 8+ purpose-to-component rows
Adoption & trust: 1.1k installs on skills.sh; 12.5k GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You are building a Flutter app but lack a consistent playbook for widgets, state, routing, and performance optimization across platforms.
Who is it for?
Solo builders creating or extending Flutter apps who want Riverpod/Bloc and GoRouter spelled out in one procedural skill.
Skip if: Teams that only need native Swift/Kotlin shells without Dart, or projects with no Flutter toolchain installed.
When should I use this skill?
building Flutter apps, implementing state management (Riverpod/Bloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.
What do I get? / Deliverables
Your agent applies documented Flutter patterns—providers, navigation, responsive layouts, and tests—so the codebase stays idiomatic and easier to ship.
- Widget and provider implementations aligned to the guide
- GoRouter navigation structure
- Widget tests and performance-minded layout code
Recommended Skills
Journey fit
Flutter work is core product construction—UI, navigation, and client-side architecture belong on the Build shelf under frontend mobile delivery. The guide centers on widgets, layouts, and client state—not backend APIs or release ops—so frontend is the canonical subphase.
How it compares
A Flutter-focused build guide—not a generic mobile checklist or an MCP server for device farms.
Common Questions / FAQ
Who is flutter-dev for?
flutter-dev is for indie and solo developers (and small teams) using Claude Code, Cursor, or Codex to implement Flutter features with Riverpod, Bloc, GoRouter, and performance-aware widgets.
When should I use flutter-dev?
Use it during Build when you are scaffolding apps, adding state management, setting up navigation, optimizing lists and const usage, or writing widget tests—any time Flutter-specific patterns should drive the agent.
Is flutter-dev safe to install?
It is documentation-style procedural knowledge with MIT license; review the Security Audits panel on this Prism page and your org policy before pulling third-party skills into production agent workflows.
SKILL.md
READMESKILL.md - Flutter Dev
# Flutter Development Guide A practical guide for building cross-platform applications with Flutter 3 and Dart. Focuses on proven patterns, state management, and performance optimization. ## Quick Reference ### Widget Patterns | Purpose | Component | |---------|-----------| | State management (simple) | `StateProvider` + `ConsumerWidget` | | State management (complex) | `NotifierProvider` / `Bloc` | | Async data | `FutureProvider` / `AsyncNotifierProvider` | | Real-time streams | `StreamProvider` | | Navigation | `GoRouter` + `context.go/push` | | Responsive layout | `LayoutBuilder` + breakpoints | | List display | `ListView.builder` | | Complex scrolling | `CustomScrollView` + Slivers | | Hooks | `HookWidget` + `useState/useEffect` | | Forms | `Form` + `TextFormField` + validation | ### Performance Patterns | Purpose | Solution | |---------|----------| | Prevent rebuilds | `const` constructors | | Selective updates | `ref.watch(provider.select(...))` | | Isolate repaints | `RepaintBoundary` | | Lazy lists | `ListView.builder` | | Heavy computation | `compute()` isolate | | Image caching | `cached_network_image` | ## Core Principles ### Widget Optimization - Use `const` constructors wherever possible - Extract static widgets to separate const classes - Use `Key` for list items (ValueKey, ObjectKey) - Prefer `ConsumerWidget` over `StatefulWidget` for state ### State Management - Riverpod for dependency injection and simple state - Bloc/Cubit for event-driven workflows and complex logic - Never mutate state directly (create new instances) - Use `select()` to minimize rebuilds ### Layout - 8pt spacing increments (8, 16, 24, 32, 48) - Responsive breakpoints: mobile (<650), tablet (650-1100), desktop (>1100) - Support all screen sizes with flexible layouts - Follow Material 3 / Cupertino design guidelines ### Performance - Profile with DevTools before optimizing - Target <16ms frame time for 60fps - Use `RepaintBoundary` for complex animations - Offload heavy work with `compute()` ## Checklist ### Widget Best Practices - [ ] `const` constructors on all static widgets - [ ] Proper `Key` on list items - [ ] `ConsumerWidget` for state-dependent widgets - [ ] No widget building inside `build()` method - [ ] Extract reusable widgets to separate files ### State Management - [ ] Immutable state objects - [ ] `select()` for granular rebuilds - [ ] Proper provider scoping - [ ] Dispose controllers and subscriptions - [ ] Handle loading/error states ### Navigation - [ ] GoRouter with typed routes - [ ] Auth guards via redirect - [ ] Deep linking support - [ ] State preservation across routes ### Performance - [ ] Profile mode testing (`flutter run --profile`) - [ ] <16ms frame rendering time - [ ] No unnecessary rebuilds (DevTools check) - [ ] Images cached and resized - [ ] Heavy computation in isolates ### Testing - [ ] Widget tests for UI components - [ ] Unit tests for business logic - [ ] Integration tests for user flows - [ ] Bloc tests with `blocTest()` ## References | Topic | Reference | |-------|-----------| | Widget patterns, const optimization, responsive layout | [Widget Patterns](references/widget-patterns.md) |