Is it compatible with Tailwind CSS v4?

Yes, it is specifically designed to align with Tailwind v4 by utilizing CSS variables for theme definitions rather than hardcoded palettes.

Does this skill support existing projects?

Yes, the brownfield scan identifies hardcoded hex values and Tailwind arbitrary classes across 10+ file types to help consolidate them into tokens.

Which platforms are supported beyond web UI?

It generates tokens compatible with HTML emails (MJML), PDF styling (WeasyPrint), CLI colors (chalk), and data viz libraries like d3 or Chart.js.

How does it handle accessibility?

It uses colorjs.io to calculate contrast and automatically nudges OKLCH lightness values until they meet WCAG 2.1 standards.

Design Token Architect

Name: Design Token Architect
Author: marcusgoll

bymarcusgoll

•

디자인 도구

Automates the generation, maintenance, and multi-surface synchronization of accessibility-first design system tokens.

This skill empowers developers to establish and manage a single source of truth for design variables across diverse platforms, including web UIs, HTML emails, PDFs, and CLI tools. By scanning existing codebases (brownfield) or generating new OKLCH-based palettes (greenfield), it identifies color debt, enforces WCAG 2.1 contrast compliance automatically, and aligns with modern frameworks like Tailwind CSS v4. It ensures visual consistency and accessibility through features like color-blind-safe palettes and perceptually accurate color conversions, making it indispensable for teams scaling complex design systems.

주요 기능

0118 GitHub stars

02Native Tailwind CSS v4 alignment with CSS variable-based theme exports

03Color-blind-safe categorical palettes validated for accessibility

04Comprehensive brownfield scanning across 10+ file types to consolidate design debt

05Multi-surface token generation for UI, emails, PDFs, CLI, and charts

06Automatic WCAG 2.1 contrast adjustment using perceptually accurate OKLCH nudging

사용 사례

01Ensuring brand consistency across disparate surfaces like React components, MJML emails, and CLI tools

02Migrating a legacy codebase with hardcoded hex values into a unified, semantic design system

03Building accessibility-first dashboards with color-blind-safe palettes for data visualization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add marcusgoll/spec-flow design-tokens

For use in Claude.ai and ChatGPT

Download Skill