design-systemlisted

Use when a ticket needs a *systematic* token + component foundation for a frontend — the three-layer token architecture (primitive → semantic → component), component specs with full state coverage, or a recommendation for which design system a product should have. Invoke for "set up design tokens", "define the component system", "we keep hardcoding colours — fix it", "what design system should this product use", or as the structural backbone that `frontend-design` and `brand` build distinctive UI on top of.
tmj-90/gaffer · ★ 0 · Web & Frontend · score 69

Install: claude install-skill tmj-90/gaffer

# Build a systematic design system `frontend-design` decides *how the product should look*; this pack decides *how that look is structured so it scales*. A design system is the disciplined layer underneath the aesthetic: a **three-tier token architecture**, **component specs that cover every interactive state**, and a deliberate match between the product's needs and the system it gets. Get this right and every later surface reuses tokens instead of re-inventing styling per component. Keep `SKILL.md` lean — the depth lives in the references; load the one you need on demand: | Topic | Reference | |-------|-----------| | Three-layer token architecture (primitive → semantic → component), dark mode, naming | `references/token-architecture.md` | | Component specs — variants, sizes, full state matrices for button/input/card/etc. | `references/component-specs.md` | | Interactive states + variant patterns — state priority, focus rings, error/loading, a11y | `references/states-and-variants.md` | ## The token architecture in one breath Three layers, each referencing the one below — never skip a layer: ```css /* PRIMITIVE — raw values, no meaning. Change rarely. */ --blue-600: oklch(55% 0.20 264); /* SEMANTIC — purpose aliases. This is the theme-switch seam. */ --color-primary: var(--blue-600); /* COMPONENT — per-component knobs. Change freely. */ --button-bg: var(--color-primary); ``` Why it matters: **theming happens at the semantic layer** (override `--color-primary`, every com