design-token
Define and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance.
npx skills add Owl-Listener/designer-skills --skill design-token --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 1. **Global tokens** — Raw values (e.g., blue-500: #3B82F6) 2. **Alias tokens** — Semantic references (e.g., color-action-primary) 3. **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
- What You Do
- Token Categories
- Token Tiers
- Naming Convention
- Best Practices
What does the design-token skill do?
Define and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill design-token --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.