skills.rest
gabrielnsmnto
gabrielnsmntoCOMMUNITY
Explore all skills by this author →
GitHub

export-design-tokens-dtcg

Export design tokens from YAML to W3C DTCG JSON with validation and platform bundles.

3|Updated Feb 7, 2026
Search Tags:#design system#design tokens#yaml#oklch#style dictionary#w3c#dtcg
One-click install
npx skills add https://github.com/gabrielnsmnto/kord-aios --skill export-design-tokens-dtcg-gabrielnsmnto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: export-design-tokens-dtcg
Source: https://github.com/gabrielnsmnto/kord-aios/tree/main/src/features/builtin-skills/kord-aios/design-system/export-design-tokens-dtcg
Command: npx skills add https://github.com/gabrielnsmnto/kord-aios --skill export-design-tokens-dtcg-gabrielnsmnto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @designtokens/cli.

What problem does it solve? Design teams maintaining tokens in a canonical YAML file need a reliable way to convert them into the W3C DTCG standard format and distribute them to web, iOS, Android, and Flutter platforms without schema errors or broken token references. ## Core Features & Use Cases - DTCG JSON Generation: Transforms a layered tokens.yaml (core, semantic, component) into W3C DTCG v2025.10 compliant JSON with $type, $value, and reference mapping. - Validation & Compliance: Runs DTCG schema validation, checks OKLCH color usage, and verifies that all token references resolve across layers. - Platform Bundles: Optionally produces platform-specific exports (CSS, Android XML, Swift, Dart) via Style Dictionary or custom scripts. - Use Case: A design system team updates their semantic color tokens in tokens.yaml, then runs this workflow to generate a validated tokens.dtcg.json, publish updated CSS and Swift bundles, and record the export status in .state.yaml. ## Quick Start Ask the agent to export the design tokens from tokens.yaml to W3C DTCG format and validate the output.

Frequently Asked Questions about export-design-tokens-dtcg

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

FAQPage Schema
How do I export design tokens to W3C DTCG format?▼

Start with a tokens.yaml file containing core, semantic, and component layers, then transform it into DTCG JSON where each token includes $type, $value, and optional $description. Validate the result with a DTCG schema validator before publishing.

What is the DTCG design tokens format?▼

DTCG is the W3C Design Tokens Community Group standard (v2025.10) for representing design tokens in JSON. It defines token structure with $type and $value fields and supports cross-token references using curly-brace path syntax.

Can I generate CSS, Android, and iOS tokens from one source?▼

Yes, after generating the DTCG JSON you can run Style Dictionary or custom scripts to produce platform bundles: CSS for web, XML for Android, Swift for iOS, and Dart for Flutter, stored under tokens/exports/{platform}/.

Why does DTCG validation fail on my tokens file?▼

Validation typically fails due to missing $type or $value fields, unresolved token references, or non-OKLCH color formats. Capture the validator output, fix the offending tokens in the YAML source, and rerun the export.

What are the prerequisites for exporting design tokens?▼

You need a tokens.yaml generated by a tokenize step with core, semantic, and component layers present, Node.js 18+ or Python 3.10+, and a DTCG CLI or schema validator such as @designtokens/cli installed.

Related Skills

Explore More Design & Creative Skills→
Ohh-889Ohh-889
792

frontend-testing

Generate Vitest and React Testing Library tests for frontend components, hooks, and utilities.

Community
Advanced
GDSDNGDSDN
3

export-design-tokens-dtcg

Exports YAML design tokens to W3C DTCG JSON with validation and platform bundles.

Community
Advanced
xbg-solutionsxbg-solutions

normalize

Audit and realign UI components to design system tokens and spacing standards.

Official
Advanced
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced