Flutter Development Skill
Teaches Claude Flutter best practices, widget patterns, state management conventions, and your team's coding style.
What it does
The Flutter Development Skill teaches Claude your team's exact Flutter conventions so every widget, every state management pattern, and every file structure it generates matches what your team actually ships. Most developers using Claude for Flutter get generic code that needs heavy editing — wrong folder structure, outdated patterns, widgets that don't match team conventions. This skill fixes that permanently.
What it does when Claude uses it
When installed, Claude automatically applies Flutter best practices without being asked. It knows to use proper widget separation, understands when to use StatelessWidget versus StatefulWidget, applies your preferred state management approach (Riverpod, Bloc, Provider, or GetX), and generates folder structures that match Flutter's recommended architecture.
Who should use it
The skill is especially valuable for Flutter team leads — instead of reviewing AI-generated code and rewriting it, your team gets code that is already close to production-ready. It reduces the back-and-forth prompting from "fix this, now fix that" to a single request that returns correct output.
What it solves
If you have ever pasted a Claude-generated Flutter widget into your project only to spend ten minutes renaming variables, extracting nested widgets, adding const constructors, and moving state out of build methods — this skill removes that entire loop. The conventions live in one place and Claude applies them every time.
How to install
Which tool are you using?
Not sure? Claude.ai is the website. Claude Code is the command-line tool you install separately. Cursor is a code editor that reads .cursorrules.
- 01
Open your terminal
Open Terminal (Mac/Linux) or Command Prompt / PowerShell (Windows). You can find Terminal on Mac in Applications → Utilities → Terminal.
Claude Code runs in the terminal. If you've never used it before, check out our Claude Code Getting Started guide first.
- 02
Navigate to your project
Type this command and press Enter, replacing 'your-project-folder' with your actual folder name:
terminalshellcd ~/your-project-folderNot sure where your project is? In Finder (Mac) or File Explorer (Windows), right-click your project folder → 'Copy as path' then paste after 'cd '.
- 03
Start Claude Code
Type this command and press Enter. You should see the Claude Code interface appear in your terminal.
terminalshellclaudeIf you get 'command not found', Claude Code isn't installed yet. Install it with: npm install -g @anthropic-ai/claude-code
- 04
Download the skill file
Click the 'Download Skill' button in the file section below to download flutter.md to your computer. Note where it saves (usually your Downloads folder).
- 05
Install the skill
In your terminal, type this command (replace the path if your Downloads folder is different):
terminalshellclaude skills add ~/Downloads/flutter.mdOn Windows the path looks like: C:\Users\YourName\Downloads\flutter.md
- 06
Verify it's installed
Type this to see all your installed skills. You should see 'flutter-development' appear in the list.
terminalshellclaude skills listThat's it! Claude Code will now automatically use this skill whenever it's relevant to your current project.
The claude skill file
Copy the full contents below, or download the file directly.
---name: flutter-developmentdescription: Use this skill for any Flutter or Dart development task. Activates Flutter best practices, widget patterns, and architecture conventions.--- # Flutter Development Skill ## Widget Architecture- Prefer StatelessWidget unless state is truly needed- Extract widgets when build method exceeds 50 lines- Use const constructors wherever possible- Name widgets descriptively (LoginButton not MyWidget) ## State Management- Use Riverpod for new projects (preferred)- Use Bloc for complex business logic with many states- Keep state as close to where it's used as possible- Never put business logic inside widget build methods ## File Structurelib/ features/ [feature_name]/ data/ domain/ presentation/ screens/ widgets/ shared/ widgets/ utils/ constants/ ## Code Style- Always handle loading and error states- Use named parameters for constructors with 2+ params- Add const to all possible constructors- Import order: dart, flutter, packages, relative ## Performance- Use ListView.builder for lists over 20 items- Avoid rebuilding parent to update child — use providers- Use RepaintBoundary for complex animated widgetsExample output
What Claude does before and after you install this claude skill.
Claude returns a 120-line widget with inline state, no const constructors, direct API calls inside build(), and wrong folder placement. You rewrite half of it.
Claude returns a 40-line StatelessWidget extracted into widgets/, state lifted to a Riverpod provider, const everywhere possible, and a clean feature folder structure. Ship it.
Customization tips
Open flutter.md and edit any section to match your team's actual preferences. If you use Bloc instead of Riverpod, swap the state management section. If your folder structure differs, replace the tree. The skill is a live document — treat it like a team convention file that lives in your dotfiles, not a black box. Commit it to a personal repo and sync it across machines so every environment uses the same rules.
Related resources
React Native Skill
Navigation patterns, performance optimizations, and platform-specific conventions for React Native projects.
Flutter + Dart Rules
Cursor rules for Flutter + Dart projects. Widget patterns, state management, naming, and error handling conventions.
Flutter Widget Architect
Designs Flutter widget trees with proper separation of concerns and state management.
Frequently asked questions
I typed 'claude' in terminal but nothing happens — what's wrong?
Claude Code needs to be installed first. Run 'npm install -g @anthropic-ai/claude-code' and then try again. You'll also need to run 'claude login' to connect your Anthropic account.
Where exactly does the skill file go? Does it need to be in my project?
Skills are global — they live in ~/.claude/skills/ and work across ALL your projects. You install once and every Claude Code session can use it.
My Flutter project uses GetX, not Riverpod. Will this skill still work?
Yes. The skill covers general Flutter best practices. Open the downloaded flutter.md file and edit the State Management section to say GetX instead of Riverpod.
Can I use this on Windows?
Yes. The commands work the same way in PowerShell or Command Prompt. Replace '~/' with 'C:\Users\YourName\' in the paths.
How do I know Claude is actually using the skill?
Ask Claude Code: "Which skills are you using?" at the start of a session. It will list active skills. You can also type 'claude skills list' in terminal.
Want more like this?
Browse the full RohanKit library — free resources for Claude and Cursor.