Flutter UI Components
Develops and migrates individual Flutter UI components to be fully compliant with Material Design 3 standards.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Specializes in migrating existing components and creating new ones to be fully Material Design 3 (M3) compliant.
- Enforces a mandatory 4-phase, MCP-first workflow for M3 validation and implementation.
- Implements WCAG 2.1 AA accessibility standards, including 48x48px touch targets and 4.5:1 contrast ratios.
- Provides clear anti-patterns to prevent code duplication and ensure M3 native components are preferred over custom implementations.
- Utilizes a strict design token strategy, prioritizing M3 theme tokens for colors/typography and custom tokens for spacing.
Use cases
- Creating a new, reusable date picker form input that adheres to M3 guidelines.
- Migrating an existing Flutter button component to Material Design 3.
- Building a small, custom card component that uses a native M3 Card as its base.
FAQ
What does this skill NOT handle?
This skill is a UI component specialist. It does not handle complete screen layouts, business logic, state management, or backend API integration. For those more complex tasks, you should use a broader skill like `flutter-developer`.
What does the Flutter UI Components skill specialize in?
This skill specializes in creating new and migrating existing individual Flutter UI components to be fully compliant with Material Design 3 (M3). It excels at enforcing M3-native component usage, implementing WCAG 2.1 AA accessibility, and using a strict design token strategy.
When is the right time to use this skill?
Use it for atomic UI tasks like building a new M3-compliant button, migrating an old card component to M3, or ensuring a form input meets accessibility standards. It is designed for single components under 300 lines, not for building entire screens.
How does this skill improve my workflow?
It automates M3 validation using a mandatory 4-phase, MCP-first workflow, drastically reducing development time from over 30 minutes to under 10. This process guarantees M3 and accessibility compliance while eliminating code duplication and manual checks.
Related skills
Git & GitHub Workflow
Manages the complete Git and GitHub workflow for React Native (Expo) projects, enforcing best practices for branching, commits, and pull requests.
Mobile Development12 ptsReact Native Feature Generator
Generates new feature modules for React Native applications based on a clean, three-layer (Presentation, Domain, Data) architecture.
Mobile Development12 ptsFlutter Widget Assistant
Guides you through Flutter widget implementation decisions with a structured, interactive interview.
Mobile Development212 pts