tokens
FeaturedAudit 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.
Install
Quality Score: 87/100
Skill Content
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
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).
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", "토큰 바인딩 검수", "하드코딩 색상 검사", "디자인시스템 연동 점검".
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".