design-tokens-validator
2
总安装量
2
周安装量
#69943
全站排名
安装命令
npx skills add https://github.com/cantagestudio/cosmicatlaspacker --skill design-tokens-validator
Agent 安装分布
amp
2
github-copilot
2
codex
2
kimi-cli
2
gemini-cli
2
cursor
2
Skill 文档
Design Tokens Validator
Scan source files for hard-coded design values and suggest official token replacements.
Quick Start
python3 scripts/validate_tokens.py --tokens tokens.json --source src/
Supported Token Categories
| Category | Example Token | Detects |
|---|---|---|
| Colors | color.primary.500 |
Hex (#FF0000), rgba(), hsl(), named colors |
| Typography | font.size.md, font.weight.bold |
px/rem font sizes, numeric weights |
| Spacing | spacing.4, spacing.lg |
px/rem padding/margin/gap values |
| Radius | radius.md |
Border-radius values |
| Shadows | shadow.lg |
Box-shadow definitions |
Detection Examples
CSS/SCSS
/* Violation */
.card { color: #222222; padding: 17px; }
/* Correct */
.card { color: var(--color-text-primary); padding: var(--spacing-4); }
SwiftUI
// Violation
Text("Hello").foregroundColor(Color(hex: "#222222"))
// Correct
Text("Hello").foregroundColor(.textPrimary)