add-design-tokenlisted

Add or change a design-system token — GeistTheme colour, GeistTextStyles text style, GeistRadius, GeistDuration, spacing constant or shadow stack. Covers the six edit points a new colour needs, light+dark pairing, WCAG contrast, and consuming tokens from lib/. Use whenever a colour, text style, radius, duration or shadow is needed and no token exists.
NarekManukyan/flutter-mobx-kit · ★ 0 · Web & Frontend · score 70

Install: claude install-skill NarekManukyan/flutter-mobx-kit

# Add a design token Governed by [ADR-0013](../../../docs/adr/0013-design-system-tokens-only.md). Visual spec: [`DESIGN.md`](../../../DESIGN.md). **`lib/` contains no raw visual values.** No `Color(0x…)`, no `TextStyle(…)` composite, no `BorderRadius.circular(12)`, no `Duration(milliseconds: 200)`, no hand-assembled `BoxShadow` list. If the token does not exist, add it here — do not inline it "just this once". The only bare colours allowed in `lib/` are `Colors.transparent` and a `Color.lerp` between two tokens. ## Where each kind of token lives | Token | File | Consumed as | |---|---|---| | Colour / shadow layer | `GeistTheme` in `packages/design_system/lib/src/theme/src/geist_theme.dart` | `context.geist.tokenName` | | Text style | `GeistTextStyles` (same file) | `GeistTextStyles.role` | | Radius | `GeistRadius` (same file) | `GeistRadius.comfortable` | | Duration | `GeistDuration` (same file) | `GeistDuration.base` | | Spacing | `packages/design_system/lib/src/core/src/constants/constants.dart` | `kSpacing16px` | | Legacy Tailor theme | `theme_tailor/custom_theme.dart` | `context.tokenName` | New work uses the Geist tokens. Only touch the Tailor `CustomTheme` when editing code that already reads from it. ## Adding a colour — six edit points, all required `GeistTheme` is a hand-written `ThemeExtension`. Missing one of these compiles but breaks at runtime or during a theme animation. 1. **Field** — `final Color myToken; // what it is for` 2. **Constructor** — `requi