design-system

Solid

Use when starting any design task, before choosing or auditing a color/type/spacing token or writing design-system.md — routing step 1.

Web & Frontend 25 stars 4 forks Updated 6 days ago MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
47
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

<objective> The token-strategy core: OKLCH-only color rules for new tokens, neutral tinting (chroma 0.005-0.015, never pure gray), the accent-commitment levels (restrained/committed/full palette/drenched), the typography scale (ratio, line-height, measure), the 8pt spacing grid, and platform touch-target minimums. Also defines the canonical output format of `design-system.md` — the file the harness gates on — including its 4 hard requirements (the `## Design Reference` heading, a real inspiration URL, at least one chroma-positive OKLCH token, and the hard-forbidden font exclusions). This is routing step 1 of `design-method/SKILL.md`: read it before `design-web`, `design-webapp`, `design-ios`, or `design-android`, and before picking or auditing a single color/type/spacing value. </objective> <!-- Grounding: grounding-corpus.md §B (thresholds), §H (kept anchors); harness-contract.md invariant #2 (design-system.md format) + #3 (this file's read-path triggers harness phase 1). --> # Design System — Token Core Single source for token **strategy** — not values, values live in `references/*.md` and are read from there, never re-derived here. `design-method/SKILL.md` reads this file **unconditionally as routing step 1**, once per task, before dispatching to any move or target skill — that read is also what advances the harness past phase 0. If a design question is purely about a token (a color, a type pair, a spacing value) this file plus its reference index already answers it; ...

Details

Author
fusengine
Repository
fusengine/agents
Created
8 months ago
Last Updated
6 days ago
Language
CSS
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

design-system

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.

2 Updated 4 days ago
tmj-90
Web & Frontend Listed

design-system

Use when defining or extending design tokens and the shared component library — by product-designer when writing docs/13-design-tokens.md and docs/14-components.md, and by any IC about to add a component. Triggers the moment a value would be hardcoded instead of named, or a one-off component would be created instead of composed.

4 Updated yesterday
vmobifystudio
Web & Frontend Listed

design-system

Establish a design system where there is none, and enforce the one that exists so violations fail a check instead of surviving code review. Covers token layers, the traps that make tokens quietly wrong (alpha over variables, contrast by threshold, a token that cannot express a state), and the four gates that keep drift out. Use for: design system, design tokens, tokens, theme, dark mode, light mode, colores del sistema, hardcoded colors, /design-system, esto no respeta el design system, unificar estilos.

1 Updated 1 months ago
MR-Axel