Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
npx skills add Nghi-NV/create-agent-skills --skill "flutter-clean-arch"
Install specific skill from multi-skill repository
# Description
Flutter Clean Architecture skill for building scalable mobile apps. Use when creating new Flutter projects, implementing BLoC pattern, setting up Dio networking, or following clean architecture patterns with model_view/views structure.
# SKILL.md
name: flutter-clean-arch
description: Flutter Clean Architecture skill for building scalable mobile apps. Use when creating new Flutter projects, implementing BLoC pattern, setting up Dio networking, or following clean architecture patterns with model_view/views structure.
Flutter Clean Architecture
A comprehensive skill for building Flutter applications following Clean Architecture principles, based on real-world production patterns.
When to Use This Skill
- Creating a new Flutter project with clean architecture
- Setting up Dio networking with interceptors (auth, logging)
- Implementing BLoC/Cubit state management pattern
- Configuring dependency injection with GetIt
- Setting up GoRouter navigation
- Managing environment variables with flutter_dotenv
- Implementing secure storage for tokens
- Setting up Android/iOS permissions and security
- Working with code generation (freezed, json_serializable)
Decision Tree - What Are You Implementing?
Use this decision tree to find the right guide for your task:
What are you implementing?
β
βββ π New Flutter Project
β βββ Project structure β See [Project Structure](examples/project-structure.md)
β βββ Dependencies β See [pubspec Template](resources/pubspec-template.yaml)
β βββ Environment setup β See [Environment Setup](resources/environment-setup.md)
β βββ Native splash β See [Native Splash Setup](examples/native-splash-setup.md)
β
βββ π‘ API / Networking
β βββ Dio client setup β See [Dio Setup](examples/dio-setup.md)
β βββ Remote data source β See [Remote DataSource Pattern](examples/remote-datasource-pattern.md)
β βββ Repository layer β See [Repository Pattern](examples/repository-pattern.md)
β
βββ π¦ Models / Data
β βββ Model with freezed β See [Freezed & JSON Serializable](examples/freezed-json-serializable.md)
β βββ Request/Response models β See [Repository Pattern](examples/repository-pattern.md)
β βββ Build runner commands β See [Build Runner Guide](examples/build-runner-guide.md)
β
βββ π State Management
β βββ Cubit pattern β See [BLoC/Cubit Example](examples/bloc-cubit-example.md)
β βββ BLoC pattern β See [BLoC/Cubit Example](examples/bloc-cubit-example.md)
β βββ State with freezed β See [Freezed & JSON Serializable](examples/freezed-json-serializable.md)
β
βββ π Dependency Injection
β βββ GetIt setup β See [Dependency Injection](examples/dependency-injection.md)
β
βββ π§ Navigation
β βββ GoRouter setup β See [Navigation Setup](examples/navigation-setup.md)
β
βββ π± Platform Config
β βββ Android permissions β See [Android Permissions](resources/android-permissions.md)
β βββ iOS permissions β See [iOS Permissions](resources/ios-permissions.md)
β βββ Security checklist β See [Security Checklist](resources/security-checklist.md)
β
βββ π οΈ Code Generation
βββ Freezed models β See [Freezed & JSON Serializable](examples/freezed-json-serializable.md)
βββ JSON serializable β See [Freezed & JSON Serializable](examples/freezed-json-serializable.md)
βββ Build runner β See [Build Runner Guide](examples/build-runner-guide.md)
Project Structure Overview
lib/
βββ main.dart # Entry point
βββ app_root.dart # App root with MaterialApp
βββ app_providers.dart # Global BLoC providers
βββ core/ # Core utilities (environment, theme, widgets)
βββ utils/ # Helpers, extensions, validators
βββ data/
β βββ data_sources/
β β βββ api/ # Dio, interceptors, api_path
β β βββ local/ # SharedPreferences, SecureStorage
β β βββ remote/ # Feature data sources
β βββ models/ # Data models
β βββ repositories/ # Repository implementations
βββ model_view/ # BLoC/Cubit state management
βββ views/ # UI pages
βββ di/ # Dependency injection
βββ route/ # Navigation
For full structure details β See Project Structure
Quick Reference
Adding a New Feature
-
Create model in
data/models/[feature]/
β See Freezed & JSON Serializable -
Create remote data source in
data/data_sources/remote/
β See Remote DataSource Pattern -
Create repository in
data/repositories/[feature]/
β See Repository Pattern -
Create cubit in
model_view/[feature]/
β See BLoC/Cubit Example -
Create page in
views/[feature]/ -
Register in DI in
di/[feature]_inject.dart
β See Dependency Injection -
Add route in
route/app_route.dart
β See Navigation Setup
Common Commands
# Code generation
flutter pub run build_runner build --delete-conflicting-outputs
# Watch mode (development)
flutter pub run build_runner watch --delete-conflicting-outputs
# Generate native splash
flutter pub run flutter_native_splash:create
For more commands β See Build Runner Guide
Examples & Resources
Examples
- Project Structure - Complete project structure details
- Dio Setup - DioClient with interceptors
- BLoC/Cubit Example - State management pattern
- Repository Pattern - Repository implementation
- Remote DataSource Pattern - Remote data source layer
- Dependency Injection - GetIt DI setup
- Navigation Setup - GoRouter configuration
- Native Splash Setup - flutter_native_splash configuration
- Freezed & JSON Serializable - Code generation for models
- Build Runner Guide - Build runner commands and tips
Resources
- pubspec Template - Complete pubspec.yaml
- Android Permissions - AndroidManifest setup
- iOS Permissions - Info.plist setup
- Environment Setup - Multi-environment config
- Security Checklist - Security best practices
Best Practices
Naming Conventions
- Files:
snake_case.dart - Classes:
PascalCase - Variables/Functions:
camelCase
Layer Dependencies
views β model_view β data/repositories β data/data_sources
β core (utilities)
State Management
- Use
Cubitfor simple state - Use
BLoCfor complex event-driven state - Always use
freezedfor state classes
Error Handling
- Use
Either<Failure, Success>from dartz - Define specific
Failuretypes - Handle network errors gracefully
Troubleshooting
| Issue | Solution | Reference |
|---|---|---|
| Token refresh loop | Check DioAuthInterceptor logic | Dio Setup |
| State not updating | Ensure Equatable props are correct | BLoC/Cubit Example |
| DI not found | Verify registration order | Dependency Injection |
| Build runner errors | Run flutter clean && flutter pub get |
Build Runner Guide |
| Part file not found | Check part directive matches filename | Freezed Guide |
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.