architecture-feature-first

Structure Flutter app features into layered UI, logic, and data responsibilities.

2|Updated Aug 13, 2023
One-click install
npx skills add https://github.com/NNPopov/movie-theater-tickets --skill architecture-feature-first-nnpopov
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: architecture-feature-first
Source: https://github.com/NNPopov/movie-theater-tickets/tree/main/src/clients/.claude/skills/architecture-feature-first
Command: npx skills add https://github.com/NNPopov/movie-theater-tickets --skill architecture-feature-first-nnpopov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design Flutter apps with clear boundaries between UI, logic, and data so features stay easy to build, test, and refactor as the project grows.

Core Features & Use Cases

  • Feature-first organization: Group each feature into its own folder instead of scattering screens, services, and models by type.
  • Layered responsibility: Keep views focused on presentation, business logic holders on state and commands, and repositories or services on data access.
  • Architecture decisions: Decide when to introduce a logic layer, where dependency injection belongs, and which layer should own each piece of logic.
  • Practical use case: Use it when starting a new Flutter feature, migrating an existing app to a cleaner structure, or reviewing code that mixes UI and data concerns.

Quick Start

Ask for a feature-first Flutter architecture plan for your app or feature, including the folder structure, layer responsibilities, and dependency wiring.

Frequently Asked Questions about architecture-feature-first

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a Flutter app using feature-first architecture?

Feature-first architecture in Flutter groups each feature into its own folder with layered UI, logic, and data responsibilities, keeping views focused on presentation and repositories on data access. It requires unidirectional data flow and adjacent-layer communication.

What is the best way to separate UI and data logic in Flutter?

Separate UI and data logic in Flutter by assigning presentation to views, state and commands to business logic holders, and data access to repositories or services. This layered responsibility ensures clear boundaries and unidirectional data flow.

Can I use dependency injection with a layered Flutter feature structure?

Yes, dependency injection is a required component for layered Flutter feature structures. It wires dependencies across adjacent layers and clarifies which layer should own each piece of logic, ensuring services and repositories remain decoupled from the UI.

When should I refactor an existing Flutter app to a feature-first structure?

Refactor an existing Flutter app to a feature-first structure when UI and data concerns are mixed, making features hard to test and build. This structure eases refactoring by separating repository, service, and view responsibilities into distinct layers.

Why does my Flutter state management break when UI directly accesses repositories?

Directly accessing repositories from the UI breaks Flutter state management by bypassing the logic layer. Enforcing adjacent-layer communication and placing state holders between views and data services restores unidirectional data flow and clean boundaries.