About flutter-ui-patterns
A skill for Flutter developers implementing maintainable, testable interfaces, focused on widget composition, state boundaries, and lifecycle management. It addresses implementation patterns rather than visual hierarchy or style decisions.
Key features
- 01Split and reuse widgets by UI responsibility
- 02Prefer immutable configuration and const constructors
- 03Keep side effects out of build
- 04Manage controllers and state by lifecycle
- 05Test rendered states, interactions, and screen conditions
Use cases
- 01Implement forms with validation and error handling
- 02Plan widget state ownership and controller disposal
- 03Verify themes, text scaling, and device sizes
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/flutter-ui-patternsin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
evals/cases.jsonreferences/forms-and-input.mdwidget-previews.mdDetails
From the project READMEFlutter UI Patterns
Build declarative interfaces whose widget tree reflects state clearly and remains easy to test.
Visual hierarchy, token selection, typography, color, surfaces, and aesthetic direction belong to flutter-ui-design. This skill owns implementing those decisions with maintainable widgets.
Composition
- Extract widgets around cohesive UI concepts, reuse, isolated state, or test value—not arbitrary file length.
- Prefer immutable widget configuration and
constconstructors where valid. - Keep side effects out of
build; trigger them from lifecycle-safe controllers, state objects, or explicit callbacks. - Use the project theme and semantic design tokens instead of scattered literal styles.
- Preserve platform conventions where Material and Cupertino behavior should differ.
- Give forms explicit validation, focus, submission, and error behavior.
- Keep keys stable and purposeful; do not use random or changing keys to force rebuilds.
State boundaries
Own controllers, focus nodes, and animation controllers in the lifecycle that creates them, and dispose them there. Hoist state only when another component must coordinate it.
Load references conditionally
- Read forms and input when implementing validation, focus traversal, autofill, asynchronous submission, or field-error behavior.
- Read widget previews when adding or repairing Flutter Widget Previewer annotations and fixtures.
Verification
Test meaningful rendered states and interactions. Check text scaling, keyboard input where supported, light/dark themes, and at least the smallest and largest intended form factors.