architecture-feature-first

Define a feature-first layered architecture for Flutter projects with UI, logic, and data layers.

611|60|Updated Apr 22, 2025
One-click install
npx skills add https://github.com/evanca/flutter-ai-rules --skill architecture-feature-first
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: architecture-feature-first
Source: https://github.com/evanca/flutter-ai-rules/tree/main/skills/architecture-feature-first
Command: npx skills add https://github.com/evanca/flutter-ai-rules --skill architecture-feature-first

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Organizes Flutter projects using a feature-first, layered architecture that clearly separates UI, business logic, and data concerns for scalable, maintainable codebases.

Core Features & Use Cases

  • Feature-centric directory structure: group all layers of a feature together in a single directory to simplify navigation and collaboration.
  • Clear layer responsibilities and data flow: UI components, a business-logic holder (ViewModel/Cubit/Controller/Provider), and data repositories/services with unidirectional data flow.
  • State-management agnostic: supports Bloc/Cubit, Provider, Riverpod, or other state-management approaches without enforcing a specific pattern.
  • Dependency injection guidance: demonstrates how to wire dependencies across layers for testability and flexibility.

Quick Start

Create a new feature directory and organize its UI, logic, and data files under that directory following the feature-first structure.

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 project using feature-first architecture?

Feature-first architecture in Flutter groups all layers of a specific feature into a single directory, separating UI, business logic, and data concerns to simplify navigation and maintain scalable codebases.

Can I use this Flutter architecture with Riverpod or Provider?

Yes, this feature-first architecture is state-management agnostic, meaning it supports Bloc, Cubit, Provider, or Riverpod without enforcing a specific pattern for your Flutter application.

How do I wire dependencies across layers in a Flutter app?

You wire dependencies across UI, logic, and data layers using dependency injection practices, ensuring your Flutter feature directories remain testable and flexible.

What is the difference between feature-first and layered architecture in Flutter?

Feature-first organization groups a feature's UI, logic, and data files together in one directory, while layered architecture defines clear responsibilities and unidirectional data flow across those specific layers.

When should I use a feature-first directory structure for my Flutter app?

Use a feature-first directory structure when creating new features and designing project structure in Flutter, enabling better collaboration by grouping all related UI, logic, and data files together.

Do I need a specific state management library to implement this Flutter architecture?

No, you do not need a specific state management library because this architecture is state-management agnostic, allowing you to implement your logic layer using Bloc, Provider, or Riverpod independently.