skills.rest
hjemmesidekongen
hjemmesidekongenCOMMUNITY
Explore all skills by this author →
GitHub

design-tokens

Convert tokens.yml into Tailwind theme JSON, CSS custom properties, and DTCG JSON.

1|Updated Mar 1, 2026
Search Tags:#accessibility#design system#design tokens#wcag#tailwind#css variables
One-click install
npx skills add https://github.com/hjemmesidekongen/ai --skill design-tokens-hjemmesidekongen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/hjemmesidekongen/ai/tree/main/plugins/segl/skills/design-tokens
Command: npx skills add https://github.com/hjemmesidekongen/ai --skill design-tokens-hjemmesidekongen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the transformation of design tokens into various platform-consumable formats and ensures accessibility compliance, bridging the gap between design and development.

Core Features & Use Cases

  • Format Transformation: Converts tokens.yml into Tailwind CSS theme JSON, CSS custom properties, and DTCG JSON.
  • Accessibility Validation: Generates a WCAG contrast matrix, flagging accessibility issues for body text and providing colorblind safety notes.
  • Use Case: After defining your brand's visual identity in tokens.yml, use this Skill to generate the necessary code snippets for Tailwind CSS, CSS variables, and a detailed accessibility report for developers.

Quick Start

Generate platform-ready design tokens and an accessibility contrast matrix from the existing design tokens YAML file.

Frequently Asked Questions about design-tokens

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

FAQPage Schema
How do I convert design tokens to Tailwind CSS theme JSON?▼

To convert design tokens to Tailwind CSS theme JSON, provide a `tokens.yml` file defining your visual identity. The tool transforms this YAML input into platform-consumable Tailwind theme JSON, CSS custom properties, and DTCG JSON formats.

What is a WCAG contrast matrix and how is it generated from design tokens?▼

A WCAG contrast matrix evaluates color combinations for accessibility compliance. This tool generates the matrix directly from your `tokens.yml`, flagging body text contrast issues and providing colorblind safety notes for developers.

Can I generate CSS custom properties and DTCG JSON from a single tokens.yml file?▼

Yes, you can generate CSS custom properties and DTCG JSON from a single `tokens.yml` file. The tool processes your visual identity tokens and outputs multiple platform-consumable formats simultaneously, ensuring consistent design system implementation.

Do I need a specific file format to generate CSS variables and accessibility reports?▼

Yes, you need a `tokens.yml` file to generate CSS variables and accessibility reports. This YAML file serves as the required input containing your brand's visual identity tokens for the transformation process.

Does the design tokens transformation process include validation checks for generated outputs?▼

Yes, the design tokens transformation process includes validation checks for generated outputs. After converting your `tokens.yml` into Tailwind theme JSON, CSS custom properties, and DTCG JSON, the tool performs validation to ensure platform-ready accuracy.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

design

Generate logos, design tokens, and corporate identity programs.

Community
Advanced
hasnahasna

shadcn

Integrates reusable UI components into your Tailwind and React projects via the managed screen reader.

Official
Intermediate
programadorisgodprogramadorisgod
1

ui-design-system

Audit React UI design systems for accessibility and token consistency.

Community
Advanced
superfhpsuperfhp

design-md

Create, validate, and export Google DESIGN.md files to Tailwind CSS or W3C DTCG JSON.

Community
Advanced