tokens

Automate DTCG design token creation, validation, and building with Style Dictionary v5.

1|Updated Jan 13, 2023

Search Tags:#automation #validation #tokens #design-system #css-variables #design-tokens #style-dictionary

Ready to run

npx skills add https://github.com/theodrosyimer/.dotfiles --skill tokens-theodrosyimer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tokens
Source: https://github.com/theodrosyimer/.dotfiles/tree/main/claude/skills/ds__tokens
Command: npx skills add https://github.com/theodrosyimer/.dotfiles --skill tokens-theodrosyimer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires style-dictionary, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Creating and maintaining design tokens across primitive and semantic layers to ensure consistent UI theming and rapid iteration.

Core Features & Use Cases

Create, modify, validate, and build tokens in DTCG format for colors, spacing, typography, and more.
Build and publish token outputs (CSS variables, TS constants, RN values) via Style Dictionary v5 to power design systems.
Use cases include updating token names, migrating between token architectures, and troubleshooting token-to-CSS-variable pipelines.

Quick Start

Install the design-tokens tooling and run the build to generate dist outputs from tokens/, ensuring the pipeline runs Style Dictionary v5 to produce CSS variables and TS constants.

Frequently Asked Questions about tokens

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

FAQPage Schema

How do I convert design tokens to CSS variables and TypeScript constants?▼

You can convert design tokens to CSS variables and TypeScript constants by running Style Dictionary v5 to build dist outputs from your tokens directory. This automates generating CSS variables, TS constants, and RN values from primitive and semantic layers.

What is the DTCG format for design tokens?▼

The DTCG format is a standardized structure for design tokens that ensures consistent naming and theming. This Skill automates converting your tokens to DTCG format, validating JSON against allowed types and enforcing kebab-case naming.

How do I validate design token JSON against allowed types?▼

Validating design token JSON involves checking your token files against allowed types and enforcing kebab-case naming conventions. This Skill automates that validation process to ensure your primitive and semantic tokens are correctly structured.

Does Style Dictionary v5 support primitive and semantic token architectures?▼

Yes, Style Dictionary v5 supports building outputs from both primitive and semantic token architectures. This Skill integrates with it to generate CSS variables, TypeScript constants, and RN values from your DTCG-formatted tokens.

What's the best way to migrate between design token architectures?▼

Migrating between design token architectures is best handled by automating token name updates and converting layers to the DTCG format. This Skill helps modify, validate, and rebuild tokens to ensure consistent UI theming during migration.

Why does my Style Dictionary build fail when generating CSS variables?▼

A Style Dictionary build might fail if token JSON contains invalid types or non-kebab-case names. This Skill validates your tokens against allowed types before building to prevent pipeline failures and ensure successful CSS variable generation.