# design-system-structure

> Claude/Codex skill by [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars · Updated 2026-09-23

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.

Tags: agent-skills, ai-agents, best-practices, claude-code, codex, coding-agent, cursor, dart, dartlang, developer-tools, drift, flutter, flutter-architecture, github-copilot, go-router, llm, material-design, mvvm, riverpod, skills

## Install

```sh
git clone https://github.com/zakariaf/Flutter-Skills /tmp/Flutter-Skills && ln -s /tmp/Flutter-Skills/skills/design-system-structure ~/.claude/skills/design-system-structure
```

## From 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.

## Links

- HTML page: https://omgskills.com/skills/zakariaf/flutter-skills/skills/design-system-structure/
- GitHub: https://github.com/zakariaf/Flutter-Skills
- Author: [@zakariaf](https://omgskills.com/library/zakariaf/index.md)

## More from this repo

- [accessibility-as-code](https://omgskills.com/skills/zakariaf/flutter-skills/skills/accessibility-as-code/index.md) — Enforces accessibility as a correctness property authored into each widget — Semantics(button/label) or...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars
- [adaptive-layout](https://omgskills.com/skills/zakariaf/flutter-skills/skills/adaptive-layout/index.md) — Enforces adapting layout by available CONSTRAINTS/size, never device or platform checks — LayoutBuilder +...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars
- [ads-and-iap-monetization](https://omgskills.com/skills/zakariaf/flutter-skills/skills/ads-and-iap-monetization/index.md) — Enforces opt-in, rewarded-first monetization over the service seam — a rewarded view grants exactly one benefit and...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars