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 358 stars 17 forks Updated 3 weeks ago MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
85
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
6 months ago
Last Updated
3 weeks ago
Language
JavaScript
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Featured

token-audit

Audit how design tokens are defined: tiers, naming, alias chains, raw values, orphans, DTCG readiness. Triggers: audit my tokens, token architecture review, token health check. Not for code consuming tokens (token-compliance), theme parity (theme-audit) or Figma variables (figma-variable-audit).

196 Updated 2 days ago
murphytrueman
Data & Documents Listed

tokens

Audits whether the colors on a Figma frame or page are bound to design system tokens, and maps and binds hardcoded colors to the right token. Derives token-to-hex from bindings already in the file so every mapping has evidence, grades the results, and auto-proposes only the safe ones. Lint mode (check only) and bind mode are separate. Which library and which token groups come from the design_system section of figma-conventions.yaml; on auto it detects the library the file is connected to. Triggers - "/fig:tokens", "check the token bindings", "find unbound colors", "토큰 바인딩 검수", "하드코딩 색상 검사", "디자인시스템 연동 점검".

5 Updated 3 days ago
byjunyoung
Web & Frontend Listed

design-tokens

Produce a design token spec — color (light + dark), spacing, type, layout, motion, breakpoints — derived from a named aesthetic philosophy. Fills `### Tokens` under `## Experience` in the feature's `.design/YYYY-MM-DD-<slug>.md` — names, values, roles, never a CSS or Tailwind file. Use when establishing a visual system, setting up tokens, or the user mentions "tokens" or "design system".

0 Updated 1 weeks ago
muzalee