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
- 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
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
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
design-tokens
Use only when autopilot-design dispatches design-token definition or revision. Not for top-level user requests or primary capability routing.