design-tokens

design-tokens — single source, every platform

Goal: one DTCG-format JSON, four platform outputs. No drift.

What This Skill Can Do

• Generate and audit W3C DTCG token bundles for color, typography, spacing, radius, motion, shadow/elevation, and semantic state roles.
• Translate one source token JSON to Tailwind, CSS variables, Compose, SwiftUI, and WinUI using ../../scripts/token_export.py.
• Catch token drift, raw/semantic naming mistakes, unsupported platform values, circular references, and single-platform-only token systems.
• Advise when tokens are wrong for the job, such as bespoke campaign pages that need art direction more than a reusable system.

Step 1 — Source format: W3C DTCG

Every token bundle this skill produces or consumes is in W3C Design Tokens Community Group format. Keys:

• $value — the literal value
• $type — color | dimension | fontFamily | fontWeight | duration | shadow | typography
• $description — human-readable rationale (kept in the token; not a comment)

Example:

{
  "color": {
    "brand": {
      "primary": { "$value": "#3b1c0f", "$type": "color", "$description": "Hero accent — used like a weapon" },
      "primary-hover": { "$value": "{color.brand.primary}", "$type": "color" }
    }
  },
  "spacing": {
    "xs": { "$value": "4px", "$type": "dimension" },
    "sm": { "$value": "8px", "$type": "dimension" }
  },
  "type": {
    "display": {
      "$value": { "fontFamily": "PP Editorial New", "fontSize": "72px", "fontWeight": 400, "lineHeight": 1.05 },
      "$type": "typography"
    }
  }
}

Step 2 — Platform translation matrix

Platform	Output target
Web (Tailwind v4)	@theme { --color-brand-primary: ...; } block
Web (CSS)	:root { --color-brand-primary: ...; }
Apple (SwiftUI)	extension Color { static let brandPrimary = ... } + Color asset catalog JSON
Android (Compose)	ColorScheme(primary = Color(0xFF...), ...) + Typography
Windows (WinUI 3)	<ResourceDictionary> with <Color>, <SolidColorBrush>, <x:Double>