# Flutter UI Components

> 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>

- Skill: `majiayu000/flutter-ui-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/flutter-ui-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/flutter-ui-components/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/flutter-ui-components

---


# 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)

```typescript
// 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

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

## Golden Rules

**ALWAYS:**
1. Execute Phase 1 (M3 validation)
2. Prefer M3 direct over wrappers
3. Document custom component justification
4. Validate WCAG AA with MCP tools

**NEVER:**
1. Create component without M3 validation
2. Hardcode colors/sizes
3. Reimplement M3 states (hover, pressed)
4. Duplicate existing M3 components

## Output Files

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