flutter-design-system
Installation
SKILL.md
Flutter Design System
Build a semantic system that serves the product; do not impose a generic component library.
Process
- Inventory existing
ThemeData, extensions, constants, text styles, colors, radii, spacing, shared widgets, and package dependencies. - Identify visual language and product constraints. Read
references/visual-direction.md,references/typography-and-color.md, andreferences/layout-and-density.md. - Define semantic roles before values:
- surfaces, content, borders, accents, status, and interaction states;
- display, title, body, label, and numeric typography roles;
- spacing, radius, elevation, icon size, control height, and motion roles.
For products spanning multiple domains, read
references/connected-product-workflows.md; give domains semantic accents without fragmenting the shared system.
- Map roles into
ColorScheme,TextTheme, component themes, and narrowly scopedThemeExtensions. - Support light/dark contrast and platform behavior without duplicating raw values throughout widgets.
- Define component contracts for behavior and states, not only appearance.
- Migrate incrementally. Avoid replacing mature project primitives unless the new system resolves a documented issue.