Bruno Sarlo
4de266de61
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
This reverts commit 72cb7319f5.
159 lines
3.3 KiB
Markdown
159 lines
3.3 KiB
Markdown
---
|
|
name: Token Extraction
|
|
description: Extract design tokens from CSS, SCSS, Tailwind, and JSON sources
|
|
globs:
|
|
- "**/*.css"
|
|
- "**/*.scss"
|
|
- "**/*.sass"
|
|
- "**/tailwind.config.*"
|
|
- "**/tokens.json"
|
|
- "**/theme.json"
|
|
- "**/*.tokens.json"
|
|
alwaysApply: 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
|
|
|
|
```json
|
|
{
|
|
"color": {
|
|
"primary": {
|
|
"value": "#0066cc",
|
|
"type": "color",
|
|
"description": "Primary brand color"
|
|
}
|
|
},
|
|
"spacing": {
|
|
"sm": {
|
|
"value": "8px",
|
|
"type": "dimension"
|
|
}
|
|
}
|
|
}
|
|
```
|