tokens

Featured

Audit or establish the project's 3-layer token spine. Invoke when the user asks for tokens on their UI, or mentions 'tokens' alongside design / UI / frontend work.

Web & Frontend 324 stars 18 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 87/100

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

Skill Content

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. --> **Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below. Read `references/tokens.md` before proceeding. The 3-layer contract (primitive → semantic → component) and the intentional-dark test are defined there. --- ## Step 1: Detect existing tokens Scan for token definitions in the project: - CSS variables in `:root`, `[data-theme]`, `[data-mode]`, or theme wrapper selectors - Tailwind config (`tailwind.config.js/ts`) under `theme.extend` or `theme` - CSS-in-JS theme objects (`theme.ts`, `*.styles.ts`, `styled.d.ts`, `ThemeProvider`) - `design-tokens.json` or `tokens.json` (Style Dictionary / Theo) - `globals.css`, `variables.css`, `tokens.css` Build an inventory: which of the 7 categories exist (color / spacing / type / radii / shadows / motion / z-index), which layers are present (primitive / semantic / component), and whether both light and dark are defined. --- ## Step 2: Route based on `$ARGUMENTS` and inventory - **"audit"** → run audit only (Step 3). No proposals. - **"establish"** → skip audit, go to Step 4. - **"color" / "spacing" / "type" / "radii" / "shadows" / "motion" / "z-index"** → focus the audit and any proposal on that one catego...

Details

Author
educlopez
Repository
educlopez/ui-craft
Created
5 months ago
Last Updated
1 weeks ago
Language
JavaScript
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category