skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

token-build

Generate platform theme artifacts from DTCG design tokens using Style Dictionary.

Updated Jul 20, 2026
Search Tags:#theming#design tokens#tailwind#css variables#ci#style dictionary#dtcg
One-click install
npx skills add https://github.com/idy-00/paytrack --skill token-build-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: token-build
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/token-build
Command: npx skills add https://github.com/idy-00/paytrack --skill token-build-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design tokens authored once in DTCG JSON files must be manually converted into CSS variables, Tailwind themes, TypeScript constants, and native iOS/Android resources, which is error-prone and quickly drifts out of sync across platforms. ## Core Features & Use Cases - Multi-platform token generation: Transform DTCG tokens/*.json into CSS :root variables, Tailwind v4 @theme, typed JS/TS, iOS Asset Catalog, and Android colors.xml/Compose themes using Style Dictionary, Tokens Studio, or W3C DTCG export. - Alias resolution and theming rules: Resolve aliases to final values per platform, expose semantic and component tokens while keeping primitives internal, and emit dark/brand/density overrides as deltas only. - CI integration: Validate tokens on every change, regenerate artifacts, fail builds when committed outputs are stale, and gate colors with contrast checks. - Use Case: A design system team updates tokens/theming.json with a new dark mode palette and needs all platform outputs regenerated, validated, and verified as deltas before merging. ## Quick Start Generate CSS variables, Tailwind theme, and iOS assets from the tokens directory and wire the validation script into CI.

Frequently Asked Questions about token-build

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate CSS variables from design tokens?▼

Use Style Dictionary to transform DTCG tokens/*.json into CSS :root variables. The pipeline resolves aliases to final values, formats output by token $type, and emits base plus dark/brand/density overrides as deltas only.

Style Dictionary vs Tokens Studio for token builds?▼

Style Dictionary is the default for multi-platform output covering CSS, Tailwind, JS/TS, iOS, and Android. Tokens Studio fits when tokens are owned in Figma and pairs with a Figma integration workflow.

Can design tokens generate iOS and Android theme files?▼

Yes, the pipeline generates iOS Asset Catalog entries with Color.DS and Spacing, plus Android colors.xml and Compose theme files. All platform outputs derive from the same DTCG token source of truth.

How do I keep generated token artifacts in sync in CI?▼

Run the token validation script on every tokens/*.json change, regenerate all outputs, and fail the build if committed artifacts differ from regenerated ones. Gate color tokens with a contrast check script.

Why should dark mode token outputs contain only deltas?▼

Dark, brand, and density overrides should emit only the tokens that change, not full duplicates of the base set. This keeps theme files small and prevents divergence between base and override values.

Related Skills

Explore More Design & Creative Skills→
jleechanorgjleechanorg

design-md

Define and validate design tokens in a DESIGN.md file.

Official
Intermediate
tc9011tc9011

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo applications.

Community
Intermediate
marcustamarcusta

contrast-validator

Validate WCAG AA contrast ratios in React, Vue, or HTML/CSS code.

Community
Intermediate
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate