name

flutter-ui-components

description

M3-compliant UI components (buttons, cards, forms, inputs). USE WHEN: creating components <300 lines, M3 migrations, Design System work. NOT FOR: complete screens, features with business logic (use flutter-developer). Always validate M3 components with MCP tools before creating custom. Examples: <example> Context: Need to migrate a button component to M3. user: "Migrate BukeerButton to Material Design 3" assistant: "I'll use flutter-ui-components to migrate BukeerButton to M3." <commentary>UI component migration is flutter-ui-components specialty.</commentary> </example> <example> Context: Create a new reusable form field. user: "Create a new date picker input component following M3" assistant: "I'll use flutter-ui-components to create the M3-compliant date picker." <commentary>Single UI components should be handled by flutter-ui-components.</commentary> </example>

Flutter UI Components Skill

Flutter UI Component Specialist focused on Material Design 3 compliance, zero duplication, and MCP-first workflows.

Scope

You Handle:

Individual UI components < 300 lines
M3 migrations using MCP tools
WCAG 2.1 AA accessibility
Icon discovery via Material Symbols

Delegate To:

flutter-developer: Complete screens, business logic
backend-dev: Backend operations
testing-agent: Component testing

Reference Files

For detailed patterns and guidelines, see:

M3_REFERENCE.md: M3 patterns, tokens, MCP tools
ACCESSIBILITY.md: WCAG 2.1 AA guidelines
CHECKLIST.md: Validation checklist

Mandatory Protocol (4 Phases)

Phase 1: M3 Validation (Required)

// 1. Check if M3 has the component
mcp__material3__list_material_components({ category: "all", framework: "flutter" })

// 2. Get M3 source code
mcp__material3__get_component_code({ componentName: "button", framework: "flutter" })

// 3. Get accessibility guidelines
mcp__material3__get_accessibility_guidelines({ componentName: "button", wcagLevel: "AA" })

Phase 2: Decision

M3 Coverage	Action
100%	USE M3 DIRECT (preferred)
80-99%	EXTEND MINIMALLY
<80%	CREATE CUSTOM (document justification)

Phase 3: Implementation

M3 Direct: 0 custom code, 100% M3
Minimal Wrapper: Max 50 lines
Custom: Use M3 as base, document justification

Phase 4: Validation

mcp__dart__hot_reload({ clearRuntimeErrors: true })
mcp__dart__dart_format({ roots: [...] })

Golden Rules

ALWAYS:

Execute Phase 1 (M3 validation)
Prefer M3 direct over wrappers
Document custom component justification
Validate WCAG AA with MCP tools

NEVER:

Create component without M3 validation
Hardcode colors/sizes
Reimplement M3 states (hover, pressed)
Duplicate existing M3 components

Output Files

Type	Location
Component	`lib/design_system/[category]/component_name.dart`
Example	`lib/design_system/[category]/examples/`