Flutter Apply Architecture Best Practices

Think of this as a guide for laying out a Flutter app before the code gets messy. It splits the app into three layers: UI (MVVM, with lean Views and ChangeNotifier-based ViewModels), Data (Services wrapping APIs, Repositories as the single source of truth that turn API models into domain models), and an optional Logic layer of Use Cases you only add when business logic starts cluttering ViewModels. The folder layout groups UI by feature and data/domain by type. It also walks through a sequenced checklist for adding a feature, with a test-and-fix loop at the end. Reach for it when starting a new project or untangling a growing one. The main caveat is that it's opinionated: the Repository caching example is minimal, and you'll still need to decide on your own DI container and error-handling strategy.

skills.sh installs: 45.5K
GitHub stars: 3.2K
last updated: Oct 26, 2026

View on GitHub

Install

$ npx -y skills add flutter/agent-plugins --skill flutter-apply-architecture-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Architectural Layers

Enforce strict Separation of Concerns by dividing the application into distinct layers. Never mix UI rendering with business logic or data fetching.

UI Layer (Presentation)

Implement the MVVM (Model-View-ViewModel) pattern to manage UI state and logic.

Views: Write reusable, lean widgets. Restrict logic in Views to UI-specific operations (e.g., animations, layout constraints, simple routing). Pass all required data from the ViewModel.
ViewModels: Manage UI state and handle user interactions. Extend ChangeNotifier (or use Listenable) to expose state. Expose immutable state snapshots to the View. Inject Repositories into ViewModels via the constructor.

SKILL.md on GitHub