flutter-ui-components

weppa-cloud's avatarfrom weppa-cloud

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>

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 31, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill is a specialized Flutter UI development assistant focused on creating and migrating components to Material Design 3 (M3) standards. It streamlines the production of high-quality, accessible UI elements by leveraging MCP tools for real-time validation and source code reference. By enforcing strict M3 compliance and WCAG 2.1 AA accessibility guidelines, it ensures that your Flutter design system remains consistent, modular, and professional.

Use Cases

  • Migrating legacy Flutter UI components (like buttons, cards, and inputs) to Material Design 3 to modernize application aesthetics.
  • Generating reusable, M3-compliant form fields and interactive elements with built-in WCAG 2.1 AA accessibility support.
  • Building a standardized Flutter design system by creating modular components under 300 lines of code to ensure maintainability.
  • Validating UI implementations against official Material Design 3 specifications using MCP-first workflows to prevent design debt.
  • Discovering and implementing Material Symbols and design tokens to replace hardcoded colors and spacing in Flutter projects.
nameflutter-ui-components
description|
USE WHENcreating components <300 lines, M3 migrations, Design System work.
NOT FORcomplete screens, features with business logic (use flutter-developer).
ContextCreate 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."

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:

  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/