design-system-structure
Structures a Flutter design system as tokens→theme→modifiers→shapes with two-tier tokens (primitives named by measured value, semantic slots named by role) exposed through a ThemeExtension read via an asserting of(context); hand-authors both light and dark ColorScheme instead of ColorScheme.fromSeed, keeps every raw color/hex/Colors./Curves./Duration/BorderRadius/fontSize inside lib/theme/ behind a no-raw-values gate, collapses animation to zero under reduced motion, restores the persisted theme before first paint, bundles fonts (never google_fonts/dynamic_color), and derives each stateful meaning's supporting color last so color is never its sole signal. Use when creating or editing ThemeData/ThemeExtension/ColorScheme, adding or renaming a design token, wiring theme injection or theme-mode persistence, reaching for fromSeed/dynamic_color/google_fonts/FontVariation, structuring a theme/ or DesignSystem/ folder, or reviewing any widget that renders a color, radius, duration, or font.
Install
With your agent
Install OMGSkills skill "zakariaf/flutter-skills:skills/design-system-structure" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/zakariaf/Flutter-Skills /tmp/Flutter-Skills && ln -s /tmp/Flutter-Skills/skills/design-system-structure ~/.claude/skills/design-system-structureFrom README
design-system-structure A design system is code that is incapable of holding a stray opinion: every aesthetic value lives in one directory, and every widget reads it back through a named slot. This skill owns how tokens, themes, components, and shapes are structured and consumed — not which colors or radii to pick (that belongs to your design source of truth). Getting the structure right makes a reskin a diff lib/theme/ and turns a stray Color(0xFF…) in feature code into a build failure instead of a style nit. Read the reference for the task at hand: references/token-tiers-and-themeextension.md — two-tier token naming, ThemeExtension mechanics, the asserting of(), hand-authored ColorScheme vs fromSeed, honest lerp. references/motion-and-reduced-motion.md — the three animations Material mounts by default, why NoSplash is not enough, reduced-motion-means-zero, pumpAndSettle bans in tests.
More from this repo
accessibility-as-code
Enforces accessibility as a correctness property authored into each widget — Semantics(button/label) or...
adaptive-layout
Enforces adapting layout by available CONSTRAINTS/size, never device or platform checks — LayoutBuilder +...
ads-and-iap-monetization
Enforces opt-in, rewarded-first monetization over the service seam — a rewarded view grants exactly one benefit and...