design-tokens

Generate and maintain design tokens across project surfaces with WCAG compliance.

Updated Jan 5, 2026

Search Tags:#accessibility #design tokens #Tailwind CSS #UI consistency #contrast enforcement

Ready to run

npx skills add https://github.com/Marcus-Mok-GH/Claude-code-conductor --skill design-tokens-marcus-mok-gh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/Marcus-Mok-GH/Claude-code-conductor/tree/main/.claude/skills/design-tokens
Command: npx skills add https://github.com/Marcus-Mok-GH/Claude-code-conductor --skill design-tokens-marcus-mok-gh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires colorjs.io, picocolors, fs-extra, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the process of generating and maintaining design tokens, ensuring consistency across UI, emails, PDFs, CLI, charts, and documentation, saving time and resources.

Core Features & Use Cases

Comprehensive Coverage: Initializes and maintains tokens for UI components, emails, PDFs, CLI, charts, and documentation.
Brownfield & Greenfield Modes: Supports scanning existing code for patterns and generating new palettes.
Contrast Enforcement: Automatically adjusts lightness of colors to meet WCAG 2.1 accessibility standards.
Tailwind v4 Integration: Validates and applies Tailwind CSS theme variables and ensures proper imports.
Style Debt Reporting: Identifies hardcoded colors and arbitrary Tailwind values, with migration guides.

Quick Start

Initialize design tokens for your project.

Frequently Asked Questions about design-tokens

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

FAQPage Schema

How do I maintain consistent design tokens across multiple project surfaces?▼

You can maintain consistent design tokens by scanning existing code for patterns and generating a unified palette for UI, emails, PDFs, CLI, and charts. This process ensures visual consistency across all project surfaces and reduces style debt.

Does this approach work with Tailwind CSS v4 theme variables?▼

Yes, it validates and applies Tailwind CSS v4 theme variables while ensuring proper import structures. It identifies hardcoded colors and arbitrary Tailwind values, providing migration guides to help standardize your styles.

Can I automatically enforce WCAG contrast and color blindness standards in my UI?▼

Yes, you can automatically enforce WCAG 2.1 accessibility standards by adjusting the lightness of colors to meet contrast requirements. This ensures compliance for contrast and color blindness across your generated design tokens.

How do I generate design tokens for an existing codebase with hardcoded colors?▼

You can generate tokens for an existing codebase using brownfield mode, which scans your project for style patterns and hardcoded values. It then produces a consolidated token system and provides a style debt report with migration guides.

What is the best way to initialize design tokens for a new project?▼

The best way to initialize tokens for a new project is using greenfield mode to generate a fresh, comprehensive color palette. This creates accessible tokens from the start, ensuring WCAG compliance and Tailwind CSS compatibility across all surfaces.

What are the limitations of using automated design token generation?▼

Automated generation requires scanning existing code to accurately map style patterns, meaning unstructured or highly arbitrary styling might complicate the initial migration. It relies on proper theme variable validation to ensure correct Tailwind CSS v4 imports.