.png)
Table of Contents
AI is already part of how most Flutter teams build apps. Engineers ship features faster, refactor old screens in minutes, and debug with an AI sitting next to them. But across teams, we keep seeing the same gap: the AI knows how to code, not how Flutter teams code.
That’s the difference between an AI that helps you write a screen and one that builds a screen the way your senior engineer would. The bridge between those two outcomes is a set of repeatable, well-defined agent skills, and the Flutter team has now published 10 of them which you can install and use on your day-to-day basis.
The way Flutter developers build apps is changing
A few years ago, scaling a Flutter team meant onboarding more developers, writing more documentation, and enforcing conventions through code review. AI was supposed to make that easier.
Mostly, it has. Generation is fast, refactoring code is cheap, and even junior developers can ship features at a senior pace.
But quality hasn’t scaled at the same rate. Layouts overflow on tablets because the AI never asked about constraints. JSON parsing files freezes the UI thread because nobody mentioned isolates. Two developers using the same tool produce two different architectures for the same feature.
AI is only as effective as the system surrounding it.
Generic AI falls short in Flutter
A general-purpose model can write valid Dart. It can scaffold a MaterialApp, define a StatefulWidget, and even configure routing. But when the conversation gets specific: Should this use go_router or Navigator 2.0? Where should the repository live? Should this JSON parse on the main thread?
The answers depend on whoever is prompting.
That’s how you end up with five distinct patterns for the same problem with one codebase.
We need to fix that, not just by better prompting, but by giving the agent the same domain expertise your senior engineers carry: which packages to reach for, which anti-patterns to avoid, and the exact workflow to follow for common tasks. Flutter calls that an agent skill.
From prompts to skill curation
A skill is a folder of instructions an agent reads before acting. It’s the difference between asking an intern to “set up routing” and handing them a one-pager that says “Use go_router. These are the steps. Here’s the deep linking config. Here’s what to test.”
That’s exactly what the flutter/skills repository delivers: A collection of 10 skills, maintained by the Flutter team itself, that encode happy-path workflows for the tasks Flutter developers do every week.
Each skill is a single SKILL.md file with three things:
- A clear trigger so that the agent knows when to use it
- A workflow checklist that the agent follows step by step
- High-fidelity code examples that anchor the output
Installing them is one line:
After that, your AI wouldn’t write some version of a Flutter app, but the Flutter team’s version.
10 skills worth adding to your Flutter workflow
Here are the 10 skills in the order you’d typically reach for them across a project’s lifecycle, from the first commit to the last regression test.
1. flutter-apply-architecture-best-practices
Before you write a single screen, the project needs a spine. This skill enforces the layered architecture (UI → Logic → Data) recommended in Flutter’s official guidance, with MVVM for the UI layer, the Repository pattern for the data layer, and an optional Domain layer for complex business logic.
The agent ends up structuring your project like this:
ViewModels extend ChangeNotifier, receive Repositories via the constructor, and expose immutable state to dumb Views.
2. flutter-setup-declarative-routing
Routing is one of those things every Flutter project gets wrong twice before getting right. This skill installs go_router, configures MaterialApp.router, handles authentication redirects, and, the part most teams forget, sets up native deep linking on iOS and Android with assetlinks.json and apple-app-site-association.
A minimal config looks like this:
For nested navigation with state preservation, the Instagram-style bottom-nav where every tab keeps its own stack and scroll, the skill walks the agent through StatefulShellRoute.indexedStack.
3. flutter-setup-localization
Localization is something teams keep postponing until it’s painful to maintain. This skill wires up flutter_localizations and intl from scratch, enables code generation, and defines the l10n.yaml config, and gives the agent the patterns for placeholders, plurals, and conditional selects.
ARB files end up looking like this:
Then in your widget you just call AppLocalizations.of(context)!.nWombats(count) and the right form gets picked automatically.
4. flutter-use-http-package
Networking sounds trivial until you hit small things, such as forgetting the INTERNET permission on Android, the network.client entitlement on macOS, or returning null on failure and breaking FutureBuilder‘s error branch. This skill encodes all of that, including the convention of throwing typed exceptions on non-success status codes.
A fetch with proper error handling looks like this:
The compute() call pushes JSON parsing to a background isolate, which leads naturally into the next skill.
5. flutter-implement-json-serialization
This skill teaches the agent to write fromJson and toJson methods using Dart 3’s pattern matching for type safety, and, when payloads are large, to offload parsing to a background isolate so the UI never freezes.
A type-safe model:
'If the parser breaks because the backend started sending id as a string, you get a clean FormatException instead of a runtime cast error 20 frames deep in the stack trace.
6. flutter-build-responsive-layout
Flutter apps run on phones, tablets, foldables, web, desktop, and picture-in-picture windows. This skill teaches the agent to think in available width, not device type: using LayoutBuilder and MediaQuery.sizeOf(context) instead of guessing whether the user is on “a tablet.”
The pattern is consistent: wrap, measure, branch.
The skill also gives the agent the rules for constraining content on wide screens (ConstrainedBox with maxWidth) so text doesn’t stretch into unreadable lines on a 4K monitor.
7. flutter-fix-layout-issues
This is the skill you reach for when CI reports “RenderFlex overflowed by 47 pixels on the right” at 11 PM. It’s a debugging playbook with one fix per error type expanded for unbounded scrollables, Flexible for overflowing text, moving Positioned inside a Stack, plus, the rule to ignore cascading “RenderBox was not laid out” errors and look further up the stack trace.
A textbook before/after:
8. flutter-add-widget-preview
Flutter 3.38 shipped a native widget previewer, but built into the IDE. This skill teaches the agent to annotate widgets with @Preview, build custom annotations for theme variants, and generate multi-state previews automatically.
A preview that renders light and dark variants in one go:
Designers see every state of every component side by side without needing to run the full app or navigate to a specific screen.
9. flutter-add-widget-test
Widget tests are the cheapest insurance policy in Flutter. This skill teaches the agent to write meaningful WidgetTester tests: covering not just initial render but the actual interactions a user makes: tapping, scrolling, entering text, swipe-to-dismiss.
A test that covers an add-then-remove flow:
10. flutter-add-integration-test
This is the most ambitious skill in the bunch. It wires up integration_test, enables Flutter Driver, and — the killer feature — uses the Dart/Flutter MCP server to launch the running app, inspect the live widget tree, simulate taps and gestures, and write the test based on the actual rendered UI.
The output is a clean end-to-end test:
The skill also covers the execution targets: Chrome with chromedriver, headless web, Android local, and Firebase Test Lab.
From first scaffold to production
No single skill is impressive on its own. The magic is that together they cover the full lifecycle of a Flutter project — and each one teaches the agent what your team would have to teach it manually otherwise.
A typical project flow used to look like this:
- idea → screen → refactor → bug → patch → test (maybe) → ship
With skills installed, the same flow becomes:
- spec → architecture → data layer → UI → responsive pass → tests → ship
The difference is subtle, but powerful. Every step becomes consistent across the team. The intern’s auth flow uses the same Repository pattern as the senior’s checkout. Integration tests run on every PR with the same fixtures. The layout works on a phone, a tablet, and a foldable without anyone having to remember the rules.
From 1x to 10x developer
The “10x developer” used to mean someone who could write code faster than everyone else. That definition stopped being useful the day AI hit production. Today, every developer with an AI assistant can write code fast. The differentiator is how much rework you avoid.
In short, it’s about not writing the same buggy responsive layout three times. It’s about not chasing a RenderFlex overflow error for 40 minutes. It’s about not realizing in week 8 that your architecture won’t survive for the long run.
Skills compress that gap. They give every developer on the team the same baseline of Flutter expertise, on the first try, every time.
The edge so Flutter teams build better!
Wrapping up
AI is only as good as the structure you build around it. We thought of this while working on these skills.
At Somnio Software, we work with teams across the U.S. and LATAM building Flutter apps with intent. We help teams move from ad-hoc AI usage to a structured workflow where every commit feels like it came from your most senior engineer.
Install the 10 skills. Then think about how many more your team should write next.
Writing better Flutter code is only part of the challenge. What matters more is building systems that raise the level of the entire team, every day.
Contact us to learn how we can help turn your product vision into reality.
.png)
.png)