dss/dss-claude-plugin/skills/token-extraction/SKILL.md

name, description, globs, alwaysApply

name	description	globs	alwaysApply
Token Extraction	Extract design tokens from CSS, SCSS, Tailwind, and JSON sources	**/*.css **/*.scss **/*.sass **/tailwind.config.* **/tokens.json **/theme.json **/*.tokens.json	false

Token Extraction

Overview

This skill enables extraction of design tokens from multiple source formats and merging them into a unified token collection.

When to Use

Use this skill when the user asks to:

• Extract tokens from CSS/SCSS files
• Parse Tailwind configuration for tokens
• Import tokens from JSON files
• Merge tokens from multiple sources
• Convert existing styles to tokens

Supported Sources

CSS

• Custom properties (--variable-name)
• Color values in declarations
• Font and typography values
• Spacing values

SCSS

• Variables ($variable-name)
• Maps and nested structures
• Mixins with token values
• Function outputs

Tailwind

• Theme configuration
• Extended colors
• Custom spacing
• Typography settings

JSON

• Design token format (W3C Draft)
• Style Dictionary format
• Figma export format
• Custom JSON structures

Workflow

1. Identify Sources

   • Determine which file types contain tokens
   • Locate configuration files
   • Check for existing token files

2. Extract Tokens

   Use dss_extract_tokens with path and source types
   

3. Review Extraction

   • Check token count
   • Verify token categories
   • Review token values

4. Merge if Needed

   • Combine tokens from multiple sources
   • Resolve conflicts
   • Normalize naming

Token Categories

Category	Examples
color	primary, secondary, error, success
typography	font-family, font-size, line-height
spacing	margin, padding, gap values
sizing	width, height, border-radius
shadow	box-shadow, drop-shadow
border	border-width, border-color
opacity	transparency values
z-index	stacking order values

Example Interaction

User: "Extract all design tokens from my project's styles"

Assistant Response:

I'll extract design tokens from your project.

[Uses dss_extract_tokens tool with sources: css, scss, tailwind]

**Extraction Results:**

From CSS (23 tokens):
- 12 color tokens
- 5 spacing tokens
- 6 typography tokens

From SCSS (45 tokens):
- 20 color tokens (including variants)
- 15 spacing tokens
- 10 typography tokens

From Tailwind (32 tokens):
- Custom colors defined in theme
- Extended spacing scale
- Custom font families

**Merged Collection:** 78 unique tokens
- Duplicates resolved using latest value
- Naming normalized to kebab-case

Would you like me to generate theme files from these tokens?

Merge Strategies

Strategy	Description
PREFER_LATEST	Use most recently encountered value
PREFER_FIRST	Keep first encountered value
ERROR_ON_CONFLICT	Fail if conflicts exist
MERGE_ARRAYS	Combine array values

Related Tools

• dss_extract_tokens - Main extraction tool
• dss_generate_theme - Generate theme from tokens
• dss_transform_tokens - Convert between formats

Output Format

{
  "color": {
    "primary": {
      "value": "#0066cc",
      "type": "color",
      "description": "Primary brand color"
    }
  },
  "spacing": {
    "sm": {
      "value": "8px",
      "type": "dimension"
    }
  }
}