Use when implementing design token systems, CSS variable architectures, or Style Dictionary pipelines. Covers token schemas, naming conventions, token transformations, and multi-platform token delivery for design systems.
View on GitHubmelodic-software/claude-code-plugins
content-management-system
plugins/content-management-system/skills/design-token-management/SKILL.md
January 21, 2026
Select agents to install to:
npx add-skill https://github.com/melodic-software/claude-code-plugins/blob/main/plugins/content-management-system/skills/design-token-management/SKILL.md -a claude-code --skill design-token-managementInstallation paths:
.claude/skills/design-token-management/# Design Token Management
Guidance for implementing design token systems, token schemas, and multi-platform token delivery for design systems.
## When to Use This Skill
- Defining design token schemas and structures
- Implementing CSS variable architectures
- Building token transformation pipelines
- Managing token naming conventions
- Integrating with design tools (Figma, Style Dictionary)
## Token Architecture
### Token Hierarchy
```text
┌─────────────────────────────────────────────────────────────────┐
│ TOKEN HIERARCHY │
├─────────────────────────────────────────────────────────────────┤
│ │
│ PRIMITIVE TOKENS (Raw Values) │
│ ├── colors.blue.500: #3B82F6 │
│ ├── spacing.4: 1rem │
│ └── font-size.base: 16px │
│ │
│ ▼ │
│ │
│ SEMANTIC TOKENS (Meaning/Purpose) │
│ ├── color.action.primary: {colors.blue.500} │
│ ├── spacing.component.padding: {spacing.4} │
│ └── typography.body.size: {font-size.base} │
│ │
│ ▼ │
│ │
│ COMPONENT TOKENS (Component-Specific) │
│ ├── button.primary.background: {color.action.primary} │
│ ├── card.padding: {spacing.component.padding} │
│ └── paragraph.font-size: {typography.body.size} │
│