Flutter Development Ecosystem - Complete Agent Architecture

This repository contains a comprehensive Flutter development ecosystem powered by 19 specialized Claude Code agents and skills, available as modular plugins.

Overview

This system provides 19 specialized agents and 1 comprehensive skill organized into 6 categories that enable seamless Flutter development from design to production deployment on iOS and Android.

Installation

This repository is structured as a Claude Code plugin marketplace. You can install everything at once or choose specific categories:

Install Everything (Recommended)

/plugin marketplace add https://github.com/cleydson/flutter-claude-code
/plugin install flutter-all@flutter-claude-code

Install Specific Categories

/plugin install flutter-ui@flutter-claude-code                    # UI & Design agents
/plugin install flutter-testing-performance@flutter-claude-code   # Testing & Performance
/plugin install flutter-architecture@flutter-claude-code          # Architecture & State Management
/plugin install flutter-platform@flutter-claude-code              # Platform Integration
/plugin install flutter-backend@flutter-claude-code               # Backend Integration
/plugin install flutter-deployment@flutter-claude-code            # iOS & Android Deployment
/plugin install flutter-patterns@flutter-claude-code              # Patterns & Best Practices Skill

See PLUGIN_INSTALLATION.md for detailed installation instructions and plugin documentation.

Quick Links

• PLUGIN_INSTALLATION.md - Installation guide
• AGENT_USAGE_SCENARIOS.md - Practical usage examples
• CONTRIBUTING.md - Contributing guidelines and architecture reference
• WORKFLOW_DIAGRAMS.md - Visual workflow diagrams

System Architecture

Category 1: Design-to-Implementation Pipeline

The core workflow for converting designs into pixel-perfect Flutter implementations.

• flutter-ui-designer: Flutter UI Designer (Design Analysis & Widget Selection)
• flutter-ui-implementer: Flutter UI Implementer (Code Generation & Styling)
• flutter-device-orchestrator: Flutter Device Orchestrator (Simulator/Emulator Management)
• flutter-ui-comparison: UI Comparison & Validation Specialist
• flutter-design-iteration-coordinator: Design Iteration Coordinator (Workflow Orchestrator)

Category 2: Flutter Architecture & Code Organization

Ensures clean, maintainable, and scalable applications.

• flutter-architect: Flutter Architect (Project Structure & Patterns)
• flutter-state-management: Flutter State Management Specialist

Category 3: Platform-Specific Development

Handles iOS and Android native integrations.

• flutter-ios-integration: iOS Integration Specialist
• flutter-android-integration: Android Integration Specialist
• flutter-platform-channel-architect: Platform Channel Architect

Category 4: Performance Optimization

Ensures smooth, efficient applications.

• flutter-performance-analyzer: Flutter Performance Analyzer
• flutter-performance-optimizer: Flutter Performance Optimizer

Category 5: API Integration & Backend Connectivity

Connects to various backend services.

• flutter-rest-api: Flutter REST API Specialist
• flutter-firebase: Flutter Firebase Integration Expert
• flutter-aws: Flutter AWS Integration Expert
• flutter-graphql: Flutter GraphQL Integration Expert

Category 6: Quality Assurance & Deployment

Ensures code quality and smooth deployments.

• flutter-testing: Flutter Testing Expert
• flutter-ios-deployment: Flutter Deployment Specialist (iOS)
• flutter-android-deployment: Flutter Deployment Specialist (Android)

Primary Workflows

1. Design-to-Implementation (Core Workflow)

Design Input → UI Designer → UI Implementer → Device Orchestrator →
UI Comparison → Design Iteration Coordinator → Pixel-Perfect Implementation

Capabilities:

• Analyze Figma designs or screenshots
• Generate Flutter widget hierarchies
• Implement with exact styling
• Launch on iOS simulators and Android emulators
• Compare implementation with original design
• Iterate until pixel-perfect (>95% fidelity)

2. Complete Development Lifecycle

Design → Architecture → Implementation → Backend Integration →
Performance Optimization → Testing → Deployment

Capabilities:

• Set up Clean Architecture project structure
• Implement state management (Provider, BLoC, Riverpod)
• Integrate iOS/Android native features
• Connect to REST APIs, Firebase, AWS, GraphQL
• Profile and optimize performance
• Write comprehensive tests
• Deploy to App Store and Play Store

Documentation Foundation

All agents are grounded in the official Flutter documentation at https://docs.flutter.dev, covering:

• UI Development: /ui/widgets, /ui/layout, /ui/animations, /ui/design/material
• Platform Integration: /platform-integration/ios, /platform-integration/android, /platform-integration/platform-channels
• State & Data: /data-and-backend/state-mgmt, /data-and-backend/networking, /data-and-backend/firebase
• Performance: /perf, /perf/rendering-performance, /tools/devtools
• Testing: /testing/overview, /testing/debugging
• Deployment: /deployment/android, /deployment/ios
• Architecture: /resources/architectural-overview, /get-started/fundamentals

Key Features

Design Fidelity

• Pixel-perfect accuracy (>95% fidelity)
• Automated comparison between design and implementation
• Iterative refinement process
• Support for Figma, screenshots, and mockups

Platform Parity

• Consistent features across iOS and Android
• Platform-specific native integrations when needed
• Proper Material Design (Android) and Cupertino (iOS) implementations
• Platform channel support for native code

Backend Flexibility

• REST API integration (http, dio)
• Firebase (FlutterFire) support
• AWS Amplify integration
• GraphQL client setup
• Custom backend solutions

Production Ready

• Comprehensive testing (unit, widget, integration)
• Performance optimization
• App Store deployment automation
• Play Store deployment automation
• CI/CD pipeline setup

Getting Started

Quick Start Example: Design to Implementation

1. Export your design from Figma as PNG
2. Save to /designs/screen_name.png
3. Ask flutter-design-iteration-coordinator:
   "Create a pixel-perfect implementation of /designs/screen_name.png"
4. Agent orchestrates the complete workflow
5. Receive pixel-perfect Flutter code

Example: New Project Setup

1. Ask flutter-architect:
   "Create a new e-commerce app with Clean Architecture"
2. Receive complete project structure
3. Ask flutter-state-management:
   "Set up BLoC for state management"
4. Receive configured state management

Example: Firebase Integration

1. Ask flutter-firebase:
   "Set up Firebase Auth and Firestore for user profiles"
2. Receive complete Firebase integration
3. Get authentication service and Firestore service

Success Metrics

The system tracks effectiveness through:

• Design Fidelity: Percentage match between design and implementation
• Iteration Efficiency: Number of iterations to achieve pixel-perfect result
• Code Quality: Maintainability score, test coverage
• Performance: Frame rendering, memory usage, app size
• Deployment Success: App store approval rate, deployment time

Available Skills

The flutter-patterns skill provides on-demand reference for:

1. Widget Patterns: Common widget compositions and best practices
2. Animation Patterns: Reusable animation implementations
3. Testing Patterns: Test templates and strategies
4. Performance Patterns: Optimization techniques
5. Security Patterns: Security best practices

Agent Interaction Matrix

Agents are designed to work together:

• flutter-design-iteration-coordinator orchestrates flutter-ui-designer, flutter-ui-implementer, flutter-device-orchestrator, and flutter-ui-comparison
• flutter-architect works with flutter-state-management
• flutter-platform-channel-architect coordinates with flutter-ios-integration and flutter-android-integration
• flutter-performance-analyzer feeds findings to flutter-performance-optimizer
• flutter-ios-deployment and flutter-android-deployment work in parallel

Repository Structure

flutter-claude-code/
├── README.md                      # Overview and quick start
├── PLUGIN_INSTALLATION.md         # Installation instructions
├── AGENT_USAGE_SCENARIOS.md       # Practical usage examples
├── CONTRIBUTING.md                # Contributing guidelines
├── WORKFLOW_DIAGRAMS.md           # Visual workflow diagrams
├── ARCHITECTURE_NOTES.md          # Technical architecture notes
├── .claude/                       # Agent and skill definitions
│   ├── agents/                    # All agent definitions
│   └── skills/                    # All skill definitions
└── flutter-*/                     # Plugin directories

Getting Started

1. Install the plugins using the instructions in PLUGIN_INSTALLATION.md
2. Explore practical usage examples in AGENT_USAGE_SCENARIOS.md
3. Review workflow diagrams in WORKFLOW_DIAGRAMS.md
4. Start building with the agents that match your needs

Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines on:

• Adding new agents
• Improving existing agents
• Updating documentation
• Testing and quality standards

Documentation Coverage

This architecture covers:

• ✅ UI Development (Material, Cupertino, layouts, animations)
• ✅ Platform Integration (iOS, Android, platform channels)
• ✅ State Management (Provider, BLoC, Riverpod, etc.)
• ✅ Networking (REST, GraphQL, WebSockets)
• ✅ Backend Services (Firebase, AWS, custom APIs)
• ✅ Per