design-token
Define and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance.
How do I install this agent skill?
npx skills add https://github.com/owl-listener/designer-skills --skill design-tokenIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill is a purely instructional guide for defining and organizing design tokens. It contains no executable code, external dependencies, or network operations, and poses no security risk.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerpass
1 file scanned · No issues
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
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
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/owl-listener/designer-skills/design-token">View design-token on skillZs</a>