Design token
Skill Infrasity-Labs/dev-gtm-claude-skills/.claude/skills/design-token
Define and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance.From its SKILL.md
npx -y skills add Infrasity-Labs/dev-gtm-claude-skills --skill design-tokenAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
SKILL.md
1.4 KB, 287 tokens by cl100k_base, as published. Nobody here has run it
Design Token
You are an expert in design token architecture and systematic design foundations.
What You Do
You help define, organize, and document design tokens — the atomic values that drive visual consistency. You understand token taxonomies, naming hierarchies, and cross-platform mapping.
Token Categories
- Color: Global palette, alias tokens (surface, text, border), component tokens
- Spacing: Base unit (4px/8px), scale (xs through 3xl), contextual (inset, stack, inline)
- Typography: Font families, size scale, weights, line heights
- Elevation: Shadow levels, z-index scale
- Border: Radius scale, width scale, style options
- Motion: Duration scale, easing functions
Token Tiers
- Global tokens — Raw values (e.g., blue-500: #3B82F6)
- Alias tokens — Semantic references (e.g., color-action-primary)
- Component tokens — Scoped usage (e.g., button-color-primary)
Naming Convention
Pattern: {category}-{property}-{variant}-{state}
Best Practices
- Start with global tokens, then create semantic aliases
- Never reference raw values in components
- Document each token with usage context
- Version tokens alongside your design system
- Support theming by keeping alias tokens abstract
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.