skills.rest
marcusgoll
marcusgollCOMMUNITY
Explore all skills by this author →
Website𝕏@marcusgollGitHub

design-tokens

Generate and maintain design tokens across UI, email, PDF, CLI, chart, and doc surfaces.

91|10|Updated Oct 4, 2025
Search Tags:#contrast#tokens#OKLCH#design-system#design-tokens
One-click install
npx skills add https://github.com/marcusgoll/Spec-Flow --skill design-tokens-marcusgoll
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/marcusgoll/Spec-Flow/tree/main/.claude/skills/design-tokens
Command: npx skills add https://github.com/marcusgoll/Spec-Flow --skill design-tokens-marcusgoll

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?

Generates and maintains design tokens for UI, emails, PDFs, CLI, charts, and docs, enabling consistent theming.

Core Features & Use Cases

  • Token generation and maintenance in design/systems/tokens.json and tokens.css
  • Brownfield scan across multiple surfaces (UI, emails, PDFs, CLI, charts, docs)
  • WCAG-compliant contrast nudges and OKLCH-based palettes
  • Token consolidation and semantic mapping

Quick Start

Initialize tokens across surfaces, then validate against WCAG contrast rules.

Frequently Asked Questions about design-tokens

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

FAQPage Schema
How do I generate design tokens that work across UI, emails, PDFs, and CLI?▼

Design tokens generation maintains consistent theming by creating tokens.json and tokens.css artifacts that apply to React/Vue/Svelte components, MJML/HTML emails, WeasyPrint/Puppeteer PDFs, CLI color schemes, and charting libraries in a single workflow.

Can I automatically ensure my design tokens meet WCAG 2.1 contrast requirements?▼

Automatic contrast adjustments apply WCAG 2.1 pass criteria to token palettes, nudging colors to comply with accessibility standards without manual checking across all surfaces.

What's the best way to scan existing design colors and consolidate them into tokens?▼

Brownfield scanning detects colors and Tailwind arbitrary values across your codebase, then consolidates them into semantic tokens with OKLCH color space and fallbacks for consistency.

Do design tokens work with d3, Chart.js, and Recharts charting libraries?▼

Yes, tokens apply to charting libraries including d3, Chart.js, and Recharts, enabling unified color palettes and themes across all data visualization components.

How do I validate design tokens and track technical debt in my design system?▼

Validation reports and debt tracking identify token structure issues, color space mismatches, and contrast violations, providing actionable insights for maintaining design system health.

Can I use OKLCH color space with fallbacks for broader browser support?▼

OKLCH-based palettes generate with automatic fallbacks, ensuring modern color space support while maintaining compatibility with browsers that lack native OKLCH support.

Related Skills

Explore More Design & Creative Skills→
subiniumsubinium
50

unify-design

Audit design token drift and scaffold token files across codebases.

Community
Advanced
SjdjdiejdrirhdkjejSjdjdiejdrirhdkjej

design-tokens

Generate tokens.json and tokens.css design tokens for multi-surface systems.

Community
Advanced
petbrainspetbrains
13

frontend-color-system

Generate accessible color palettes and themes from brand colors with WCAG contrast validation.

Official
Intermediate
jg-chalk-iojg-chalk-io

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Community
Advanced