tokens
Installation
SKILL.md
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) undertheme.extendortheme - CSS-in-JS theme objects (
theme.ts,*.styles.ts,styled.d.ts,ThemeProvider) design-tokens.jsonortokens.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.