Back to Details

flutter-ui-components

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Flutter UI Components Skill

Flutter UI Components Skill

Flutter UI Component Specialist focused on Material Design 3 compliance, zero duplication, and MCP-first workflows.
专注于Material Design 3（M3）合规性、零代码重复以及MCP优先工作流的Flutter UI组件专家。

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
你负责处理：
  • 代码量少于300行的独立UI组件
  • 使用MCP工具进行M3迁移
  • 符合WCAG 2.1 AA级别的无障碍适配
  • 通过Material Symbols查找图标
需委托给：
  • flutter-developer
    ：完整页面开发、业务逻辑处理
  • backend-dev
    ：后端操作
  • testing-agent
    ：组件测试

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
如需详细的模式和指南，请查看：
  • M3_REFERENCE.md：M3模式、令牌、MCP工具
  • ACCESSIBILITY.md：WCAG 2.1 AA指南
  • CHECKLIST.md：验证检查清单

Mandatory Protocol (4 Phases)

强制流程（4个阶段）

Phase 1: M3 Validation (Required)

阶段1：M3验证（必填）

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" })
typescript
// 1. 检查M3是否已有该组件
mcp__material3__list_material_components({ category: "all", framework: "flutter" })

// 2. 获取M3源代码
mcp__material3__get_component_code({ componentName: "button", framework: "flutter" })

// 3. 获取无障碍指南
mcp__material3__get_accessibility_guidelines({ componentName: "button", wcagLevel: "AA" })

Phase 2: Decision

阶段2：决策

M3 CoverageAction
100%USE M3 DIRECT (preferred)
80-99%EXTEND MINIMALLY
<80%CREATE CUSTOM (document justification)
M3覆盖度操作
100%直接使用M3（优先选择）
80-99%最小化扩展
<80%创建自定义组件（需记录理由）

Phase 3: Implementation

阶段3：实现

  • M3 Direct: 0 custom code, 100% M3
  • Minimal Wrapper: Max 50 lines
  • Custom: Use M3 as base, document justification
  • 直接使用M3：0自定义代码，100%基于M3
  • 最小化包装：最多50行代码
  • 自定义组件：以M3为基础，需记录实现理由

Phase 4: Validation

阶段4：验证

typescript
mcp__dart__hot_reload({ clearRuntimeErrors: true })
mcp__dart__dart_format({ roots: [...] })
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
必须遵守：
  1. 执行阶段1（M3验证）
  2. 优先选择直接使用M3而非包装组件
  3. 记录自定义组件的实现理由
  4. 使用MCP工具验证WCAG AA合规性
严禁：
  1. 未经过M3验证就创建组件
  2. 硬编码颜色/尺寸
  3. 重新实现M3的状态（悬停、按下等）
  4. 重复实现已有的M3组件

Output Files

输出文件

TypeLocation
Component
lib/design_system/[category]/component_name.dart
Example
lib/design_system/[category]/examples/
类型路径
组件
lib/design_system/[category]/component_name.dart
示例
lib/design_system/[category]/examples/