Flutter Architecture — Feature-First
A skill that guides Claude to structure Flutter apps with layered UI/Domain/Data architecture and feature-first folders.
Dev & CodingIntermediate★ 644⑂ 67AI score 9/10Last updated: Sep 14, 2026
What it does
- Enforces Flutter's recommended layered architecture: UI layer, optional Logic (domain) layer, and Data layer — with hard rules such as "UI never calls a Service directly" and "only the Repository (SSOT) mutates data".
- Provides a concrete feature-first folder tree:
lib/features/<feature>/data|domain|ui, with shared code split intocore/andshared/. - Stays state-management agnostic: ViewModel, Cubit/Bloc, Provider/Riverpod Notifier are all supported, with a file-naming table per approach.
- Spells out responsibilities for View, business logic holder, Repository and Service, plus Dart samples and a
get_itdependency-injection setup example. - Ships a 7-step workflow for adding a feature: create directories → Service → Repository → ViewModel → View → register DI → verify unidirectional data flow.
Who it's for
- Flutter developers starting a new app who want a scalable layout from day one.
- Teams refactoring a legacy type-first codebase into feature modules.
- Tech leads who want architecture conventions shared consistently with AI coding tools.
Examples
- "Add a login feature" → scaffolds
features/auth/withauth_api_service.dart,auth_repository.dart,auth_viewmodel.dart,login_screen.dartand wires the service locator. - "Where should this caching logic live?" → answers Repository, since it is the single source of truth handling caching, errors and refresh.
- "This calculation is reused on three screens" → checks it against the criteria for introducing a use case in the
domain/layer and proposes the file location.
· · · Install guide · · ·
Try it now, no install
Paste this into Claude to use the skill without installing anything.
Read the instructions in this file and follow them to help me: https://raw.githubusercontent.com/evanca/flutter-ai-rules/HEAD/skills/architecture-feature-first/SKILL.md What I want: (describe your task here)
If Claude can't open the link, open it yourself and paste the contents instead.
↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.
Install in the Claude app (no terminal)
- Download the ZIP with the button below.
- In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
- Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
Install in Claude Code
Let Claude do it — paste this into Claude Code
Install the skill I found on Claude Skill Mart. Copy the skills/architecture-feature-first folder from the GitHub repo evanca/flutter-ai-rules into my ~/.claude/skills/architecture-feature-first/. When it's done, tell me in one line what this skill can do.
Install with a command instead
git clone https://github.com/evanca/flutter-ai-rules.git && mkdir -p ~/.claude/skills && cp -r flutter-ai-rules/skills/architecture-feature-first ~/.claude/skills/⚠ This is a third-party skill. Check the source repository before installing.
- Open a terminal and go to your home directory:
cd ~ - Clone the repository:
git clone https://github.com/evanca/flutter-ai-rules.git - Make sure the Claude skills folder exists:
mkdir -p ~/.claude/skills - Copy just this skill:
cp -r flutter-ai-rules/skills/architecture-feature-first ~/.claude/skills/ - Verify with
ls ~/.claude/skills/architecture-feature-first— you should seeSKILL.md. - Restart Claude Code, then in a Flutter project ask something like "scaffold the folder structure for a new feature" and the skill will trigger automatically.
View source on GitHub ↗License: MIT