New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Architecture Feature First

by evanca in evanca/flutter-ai-rules

A skill your agent uses when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.

MITAuto-check passedMobile

Install Architecture Feature First

skills CLI
$ npx skills add evanca/flutter-ai-rules --skill architecture-feature-first -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install evanca/flutter-ai-rules architecture-feature-first --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/evanca/flutter-ai-rules.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/architecture-feature-first .claude/skills/architecture-feature-first && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
architecture-feature-first
GitHub stars
650
Token cost
~1.9k tokens
SKILL.md length
612 words
Files
1
Skills in repo
37
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.

  • Works in 6 steps: Layers → Feature-First File Structure → Component Responsibilities → …
  • Creating a feature
  • SKILL.md covers When to Use, 1. Layers, 2. Feature-First File Structure and 3. Component Responsibilities, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Architecture Feature First is an agent skill from evanca/flutter-ai-rules. Use when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Design patterns, File organization and Cross-platform mobile apps. It works with Flutter. The repository describes itself as: Flutter AI Skills and Rules for Claude, Codex, Cursor, and Other AI-Powered IDEs. The licence is MIT.

When your agent uses it

  • Creating a feature
  • Designing folder structure
  • Adding repositories/services/view models
  • Wiring dependency injection

Example prompts

  • “/architecture-feature-first”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Layers
  2. Feature-First File Structure
  3. Component Responsibilities
  4. Domain Layer (Use Cases)
  5. Dependency Injection
  6. Workflow: Add a New Feature

What it can do on your machine

Read from SKILL.md and the folder at commit 7b9cce2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are dart).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • docs.flutter.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Architecture Feature First loads about 1.9k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 612 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from evanca/flutter-ai-rules at commit 7b9cce2, republished under its MIT licence (© evanca). 612 words, ~1,915 tokens.

Download SKILL.mdSave it as .claude/skills/architecture-feature-first/SKILL.md (or your agent's skills folder).
name
architecture-feature-first
description
Use when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.
license
MIT

Flutter Architecture — Feature-First Skill

This skill defines how to design, structure, and implement Flutter applications using the recommended layered architecture with feature-first file organization.

It is state management agnostic: the business logic holder in the UI layer may be named ViewModel, Controller, Cubit, Bloc, Provider, or Notifier — depending on the chosen state management approach. The architectural rules apply equally to all of them.

When to Use

Use this skill when:

  • Designing the folder/file structure of a new Flutter app or feature.
  • Creating a new View, ViewModel, Repository, or Service.
  • Deciding which layer owns a piece of logic.
  • Wiring dependency injection between components.
  • Adding a domain (logic) layer for complex business logic.
  • Refactoring an existing app from type-first to feature-first organization.

1. Layers

Separate every app into a UI Layer and a Data Layer. Add a Logic (Domain) Layer between them only for complex apps.

┌──────────────────────────────────────────────────────────────┐
│   UI Layer    │  Views + business logic holders              │
│               │  (ViewModel / Cubit / Controller / Provider) │
├──────────────────────────────────────────────────────────────┤
│  Logic Layer  │  Use Cases / Interactors  (optional)         │
├──────────────────────────────────────────────────────────────┤
│   Data Layer  │  Repositories + Services                     │
└──────────────────────────────────────────────────────────────┘

Rules:

  • Only adjacent layers may communicate. The UI layer must never access a Service directly.
  • The Logic layer is added only when business logic is too complex for the business logic holder or is reused across multiple screens.
  • Data changes always happen in the Data layer (SSOT = Repository). No mutation in UI or Logic layers.
  • Follow unidirectional data flow: state flows down (Data → UI), events flow up (UI → Data).

2. Feature-First File Structure

Organize code by feature, not by type. Group all layers belonging to one feature together in a single directory.

Sample directory structure
lib/
├── app.dart
├── main.dart
├── core/                          # Shared utilities, theme, DI setup
│   ├── di/
│   │   └── service_locator.dart
│   ├── theme/
│   │   └── app_theme.dart
│   └── network/
│       └── api_client.dart
├── features/
│   ├── auth/
│   │   ├── data/
│   │   │   ├── auth_repository.dart
│   │   │   └── auth_api_service.dart
│   │   ├── domain/                # Optional — only for complex logic
│   │   │   └── login_usecase.dart
│   │   └── ui/
│   │       ├── auth_viewmodel.dart
│   │       ├── login_screen.dart
│   │       └── widgets/
│   │           └── login_form.dart
│   └── profile/
│       ├── data/
│       │   ├── profile_repository.dart
│       │   └── profile_api_service.dart
│       └── ui/
│           ├── profile_viewmodel.dart
│           └── profile_screen.dart
└── shared/                        # Shared widgets, models, extensions
    ├── models/
    │   └── user.dart
    └── widgets/
        └── loading_indicator.dart

Each feature directory contains the files needed for that feature, named according to the chosen state management approach:

ApproachBusiness logic holder file
MVVM / ChangeNotifier*_viewmodel.dart / *_controller.dart
BLoC*_cubit.dart / *_bloc.dart
Provider / Riverpod*_provider.dart / *_notifier.dart

3. Component Responsibilities

View
  • Describes how to present data to the user; keep logic minimal and only UI-related.
  • Passes events to the business logic holder in response to user interactions.
  • Extract reusable widgets into separate components within a widgets/ subdirectory.
  • Use StatelessWidget when possible; keep build methods simple.
Business Logic Holder (ViewModel / Cubit / Controller / Provider)
  • Contains logic to convert app data into UI state and maintains current state needed by the view.
  • Exposes callbacks (commands) to the View and retrieves/transforms data from repositories.
dart
class AuthViewModel extends ChangeNotifier {
  final AuthRepository _authRepo;
  AuthViewModel(this._authRepo);

  bool _isLoading = false;
  bool get isLoading => _isLoading;

  String? _error;
  String? get error => _error;

  Future<bool> login(String email, String password) async {
    _isLoading = true;
    _error = null;
    notifyListeners();
    try {
      await _authRepo.login(email, password);
      return true;
    } catch (e) {
      _error = e.toString();
      return false;
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }
}
Show full SKILL.md (256 more words)Show less
Repository
  • Single Source of Truth (SSOT) for a given type of model data.
  • The only class allowed to mutate its data; all other classes read from it.
  • Handles caching, error handling, and data refresh logic.
  • Transforms raw data from services into domain models.
Service
  • Wraps API endpoints and exposes asynchronous response objects.
  • Isolates data-loading and holds no state.

4. Domain Layer (Use Cases)

Introduce use cases/interactors only when:

  • Logic is complex or does not fit cleanly in the UI or Data layers.
  • Logic is reused across multiple business logic holders or merges data from multiple repositories.

Do not add a domain layer for simple CRUD apps.

5. Dependency Injection

Use dependency injection to provide components with their dependencies, enabling testability and flexibility.

  • Supply repositories to business logic holders via constructors.
  • Supply services to repositories via constructors.
  • Define abstract interfaces so implementations can be swapped without changing consumers.
dart
// In service_locator.dart — register dependencies at startup
void setupDependencies() {
  final apiClient = ApiClient();

  // Services
  final authService = AuthApiService(apiClient);
  final profileService = ProfileApiService(apiClient);

  // Repositories
  final authRepo = AuthRepository(authService);
  final profileRepo = ProfileRepository(profileService);

  // Register with your DI framework (get_it, provider, riverpod, etc.)
  getIt.registerSingleton<AuthRepository>(authRepo);
  getIt.registerSingleton<ProfileRepository>(profileRepo);
}

6. Workflow: Add a New Feature

  1. Create the features/<name>/ directory with data/, ui/, and optionally domain/ subdirectories.
  2. Implement the Service — wrap the API endpoints in data/<name>_api_service.dart.
  3. Implement the Repository — inject the Service, add caching/error handling in data/<name>_repository.dart.
  4. Implement the ViewModel — inject the Repository, expose UI state and commands in ui/<name>_viewmodel.dart.
  5. Implement the View — bind to the ViewModel, render state, dispatch events in ui/<name>_screen.dart.
  6. Register in DI — add the new Service, Repository, and ViewModel to the service locator.
  7. Verify — confirm the View never accesses the Service directly and data flows unidirectionally.

References

© evanca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/architecture-feature-first of evanca/flutter-ai-rules.

Open the folder on GitHubat commit 7b9cce2

Compare with similar skills

Architecture Feature First next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Architecture Feature First compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Architecture Feature First this skillevanca/flutter-ai-rules650—~1.9kAutomated safety check: PassMIT
React Composition Structurefluid-design-io/payload-better-auth-starter121—~899Automated safety check: PassCustom licence
Flutter Initbear2u/my-skills933—~2.5kAutomated safety check: PassNone
InitVB10/vexana154—~734Automated safety check: PassNone
Flutter Appccplugins/awesome-claude-code-plugins970—~1.1kAutomated safety check: NotesApache-2.0
Folder Structure Blueprint Generatorgithub/awesome-copilot40k1 repos~3.5kAutomated safety check: PassMIT

Similar skills

  • React Composition Structure

    fluid-design-io/payload-better-auth-starter

    React and React Native file-system architecture patterns that scale.

    121 GitHub stars~899 tokensUpdated yesterday
    MobileAuto-check passed

  • Flutter Init

    bear2u/my-skills

    A skill your agent uses when user wants to create a new Flutter project (Todo/Habit/Note/Expense/Custom domain) with Clean Architecture, Riverpod 3.0, Drift, and modern Flutter stack

    933 GitHub stars~2.5k tokensUpdated 3 mo ago
    MobileAuto-check passed

  • Init

    VB10/vexana

    Set up vexana (the dio-based Flutter networking layer) in a Flutter project — adds the dependency, builds one NetworkManager, an optional error model and the test fixture helper, placed in the…

    154 GitHub stars~734 tokensUpdated 10 days ago
    MobileAuto-check passed

  • Flutter App

    ccplugins/awesome-claude-code-plugins

    Bootstrap a new Flutter mobile app with clean architecture, Riverpod, FVM-pinned SDK, current packages, and no deprecated APIs.

    970 GitHub stars~1.1k tokensUpdated 1 mo ago
    MobileAuto-check: notes

  • Folder Structure Blueprint Generator

    github/awesome-copilot

    Official

    Comprehensive technology-agnostic prompt for analyzing and documenting project folder structures.

    40k GitHub starsUsed in 1 repo~3.5k tokens
    Productivity & AutomationAuto-check passed

  • Flutter Dependency Injection

    HoangNguyen0403/agent-skills-standard

    Configure service locator setup using injectable and getit in Flutter.

    571 GitHub stars~589 tokensUpdated today
    MobileAuto-check passed

More from evanca/flutter-ai-rules

All 37 skills in this repo

  • Code Review

    evanca/flutter-ai-rules

    A skill your agent uses when asked to review a PR, MR, branch, or diff, audit changed files, or check code quality.

    650 GitHub stars~2.4k tokensUpdated 25 days ago
    Auto-check passed

  • Developing Genkit Dart

    evanca/flutter-ai-rules

    A skill your agent uses when building AI agents in Dart, implementing Genkit flows or tools, integrating LLMs into Dart or Flutter applications, or using Genkit Dart plugins.

    650 GitHub stars~961 tokensUpdated 25 days ago
    Auto-check passed

  • Generate Images With Firebase AI

    evanca/flutter-ai-rules

    A skill your agent uses when generating or editing images from Flutter/Dart with Firebase AI Logic and a Gemini image model (Nano Banana), making the first call work, choosing Gemini Developer API…

    650 GitHub stars~2.3k tokensUpdated 25 days ago
    Auto-check passed

  • Flutter Use Column Row First

    evanca/flutter-ai-rules

    A skill your agent uses when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.

    650 GitHub stars~1.3k tokensUpdated 25 days ago
    Auto-check passed

  • Bloc

    evanca/flutter-ai-rules

    A skill your agent uses when creating a Cubit or Bloc, modeling state with sealed classes or status enums, wiring BlocBuilder/BlocListener/BlocProvider, writing bloc tests, or choosing between Cubit…

    650 GitHub stars~2.8k tokensUpdated 25 days ago
    Auto-check passed

  • Dart 3 Updates

    evanca/flutter-ai-rules

    A skill your agent uses when writing switch statements, refactoring if-else chains, creating data classes, choosing records vs classes, destructuring values, or modernizing pre-Dart-3 code.

    650 GitHub stars~2k tokensUpdated 25 days ago
    Auto-check passed

Works with

Categories

Questions about Architecture Feature First

What does Architecture Feature First do?

A skill your agent uses when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic. Architecture Feature First is an agent skill from evanca/flutter-ai-rules. Use when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.

When should I use Architecture Feature First?

Architecture Feature First fits situations like: creating a feature; designing folder structure; adding repositories/services/view models; wiring dependency injection.

How do I install Architecture Feature First in Claude Code?

Run `npx skills add evanca/flutter-ai-rules --skill architecture-feature-first -a claude-code`. Or copy the skill folder (skills/architecture-feature-first in evanca/flutter-ai-rules) into .claude/skills/architecture-feature-first in your project. Claude Code loads it when a task matches its description.

How do I install Architecture Feature First in Codex?

Run `npx skills add evanca/flutter-ai-rules --skill architecture-feature-first -a codex`. Or copy the skill folder (skills/architecture-feature-first in evanca/flutter-ai-rules) into .agents/skills/architecture-feature-first in your project. Codex loads it when a task matches its description.

Can I use Architecture Feature First in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add evanca/flutter-ai-rules --skill architecture-feature-first -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/architecture-feature-first, .gemini/skills/architecture-feature-first, .github/skills/architecture-feature-first and .opencode/skills/architecture-feature-first in your project.

What does Architecture Feature First need to run?

SKILL.md names no scripts, command-line tools or credentials: Architecture Feature First is instructions for the agent only.

Does Architecture Feature First access the network?

SKILL.md names 1 domain. As links in the text: docs.flutter.dev. This is read from the text; nothing was executed.

Is Architecture Feature First safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Architecture Feature First use?

Architecture Feature First is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Architecture Feature First use?

About 1.9k tokens (SKILL.md is roughly 7.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Architecture Feature First?

Skills that share tags, products or a category with Architecture Feature First: React Composition Structure (fluid-design-io/payload-better-auth-starter, 121 stars), Flutter Init (bear2u/my-skills, 933 stars), Init (VB10/vexana, 154 stars) and Flutter App (ccplugins/awesome-claude-code-plugins, 970 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Architecture Feature First?

evanca (a GitHub user) maintains it in evanca/flutter-ai-rules, which has 650 GitHub stars. The repository holds 37 skills in this directory. The repository was last updated on September 14, 2026.

Source: evanca/flutter-ai-rules on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.