flutter-apply-architecture-best-practices Skill: Layers

Makes Claude structure a Flutter app in UI, optional logic and data layers using MVVM and repositories. From the Flutter team.

Installs: 44.3K; on skills.sh
Stars: 3.1K; on GitHub
Updated: Nov 2026; last repo commit

This skill makes Claude architect a Flutter app in layers. The UI layer uses MVVM, with ViewModels that extend ChangeNotifier. The data layer uses services that wrap APIs and repositories that turn raw models into domain models. An optional logic layer adds use cases for complex business logic.

It gives a folder layout and an 8-step workflow for adding a feature, ending with running ViewModel and repository tests. It is one of the Flutter skills in the Flutter team's agent-plugins repo, and it is a single SKILL.md file.

Good for

Flutter developers starting a new project
Teams refactoring a growing Flutter app for scalability
Developers separating UI from data fetching

Install flutter-apply-architecture-best-practices

Claude Code

Copy this prompt.

Install the flutter-apply-architecture-best-practices skill in Claude Code. Run this command:

npx skills add flutter/agent-plugins --skill flutter-apply-architecture-best-practices

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

The repo holds 10 Flutter skills, so name this one with --skill or you install all of them. The README does not give install commands; it points to the Flutter docs page "Get started developing with AI" for installing the Flutter plugins.

From the vendor's docs. Source.

What's in the skill

When it loads

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

Sections in SKILL.md

Contents
Architectural Layers
UI Layer (Presentation)
Data Layer
Logic Layer (Domain - Optional)
Project Structure
Workflow: Implementing a New Feature
Task Progress
Examples
Data Layer: Service and Repository
UI Layer: ViewModel and View

Key facts

Author: The Flutter team. The README says the plugins are maintained by the Flutter team
Repo: flutter/agent-plugins
Installs on skills.sh: 44,283 (Nov 2, 2026)
GitHub stars: 3,136 (Nov 2, 2026)
License: BSD-3-Clause
Last commit: Nov 1, 2026
Files: 1 file including SKILL.md
Last modified: Apr 21, 2026, per the SKILL.md metadata
skills.sh checks: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Lean Views; ViewModels extend ChangeNotifier and get Repositories by constructor
Views hold only UI logic. ViewModels expose immutable state to the View.
Write · UI layer (MVVM)
Stateless Services wrap APIs; Repositories cache, retry and return domain models
Repositories are the single source of truth for a kind of data.
Write · Data layer
Use cases only for complex or shared business logic
Skipped for simple CRUD features.
Write · Logic layer (optional)
lib/ with data, domain and ui folders; UI grouped by feature
Data and domain code is grouped by type, UI by feature.
Write · Project structure
8 steps: models, services, repositories, optional use case, ViewModel, View, DI, tests
Domain models use freezed or built_value. Dependencies are registered with a container such as provider or get_it. The last step runs unit tests and loops until they pass.
Runs code · New-feature workflow
Service and Repository, then ViewModel and View, in Dart
Show ListenableBuilder driving the View from the ViewModel.
Code examples

From the official docs

Permissions

Low risk

Claude creates and moves Dart files across your lib folder and runs your unit tests. Use a clean git branch and review the diff.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It restructures your code
A refactor can touch many files. Work on a clean git branch so you can review or revert it. github.com
It names packages to add
The workflow mentions freezed, built_value, provider and get_it. Check any dependency changes before you accept them. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	The skill's workflow creates and edits files.
Scopes	Creates and edits Dart files under lib/ The last workflow step runs your unit tests

Questions

How do I install it?

Use the install box above, which installs this one skill. The README gives no commands; it points to the Flutter docs page "Get started developing with AI" for installing the Flutter plugins in your preferred agent. It says the plugins bundle skills, MCP server configuration and rules.

What prompt triggers it?

The README gives this example: "Refactor the authentication flow to follow the recommended layered architecture". SKILL.md says to use it when structuring a new project or refactoring for scalability.

Which state management and DI does it use?

ViewModels extend ChangeNotifier and Views listen with ListenableBuilder or AnimatedBuilder. For dependency injection SKILL.md names provider or get_it as examples. Domain models use freezed or built_value.

Does it need an API key?

No key is named, and the skill is one SKILL.md file with no scripts.

Does flutter-apply-architecture-best-practices work in the Claude app or Claude.ai?

You can zip the skill folder and upload it under Customize, then Skills, in the Claude app. That is our generic instruction; the README documents no Claude app route.

Is it safe to use?

It is Markdown instructions with no scripts. When Claude follows it, it creates and edits Dart files across your lib folder and runs unit tests. Use a clean git branch and review the diff.

Information

updated Nov 2, 2026

Repository: flutter/agent-plugins
Folder: skills/flutter-apply-architecture-best-practices

flutter/agent-plugins skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

agent-plugins · github.com
commands.md · github.com
flutter-apply-architecture-best-practices SKILL.md · github.com
README.md · github.com