skills.rest
JamesFincher
JamesFincherCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Validate and export DESIGN.md token specs to Tailwind or W3C DTCG JSON.

Updated May 4, 2026
Search Tags:#accessibility#wcag#tailwind#design-tokens#design-md#token-linting#export-dtcg
One-click install
npx skills add https://github.com/JamesFincher/gengar --skill design-md-jamesfincher
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/JamesFincher/gengar/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/JamesFincher/gengar --skill design-md-jamesfincher

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

DESIGN.md needs to stay structurally valid and token-accurate so design systems remain consistent and accessible, but manual editing makes regressions and WCAG issues easy to miss.

Core Features & Use Cases

  • Validate DESIGN.md: checks token formats, section ordering, and broken token references while surfacing accessibility contrast concerns.
  • Diff versions safely: highlights regressions between two DESIGN.md files so changes can be reviewed before they ship.
  • Export for tooling: converts DESIGN.md into Tailwind theme JSON or W3C DTCG JSON for downstream implementation.
  • Use cases include creating a new agent-consumable brand spec, porting an existing style guide, updating tokens without breaking references, and validating color contrast for UI components.

Quick Start

Ask the agent to lint your file and then export it to Tailwind theme JSON.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I validate design tokens and check WCAG contrast in a DESIGN.md file?▼

Validating design tokens in a DESIGN.md file involves linting token formats, enforcing canonical section order, and surfacing WCAG contrast results for component color pairs to prevent accessibility regressions in your UI design system.

What is a DESIGN.md spec and when do I need it for my design system?▼

A DESIGN.md spec is an agent-consumable brand specification that defines design tokens for UI components. You need it when creating or porting a style guide to maintain brand consistency and accessibility across multiple projects.

Can I export DESIGN.md tokens to Tailwind theme JSON or W3C DTCG formats?▼

Yes, you can export DESIGN.md tokens to Tailwind theme JSON or W3C DTCG JSON formats. This converts your validated token specifications into downstream tooling formats for direct implementation in your development environment.

How do I diff two DESIGN.md files to catch token regressions?▼

Diffing two DESIGN.md files highlights structural mistakes, broken token references, and accessibility regressions between versions. This allows you to safely review token changes and color contrast issues before they ship to your design system.

What is the best way to update design tokens without breaking references in a style guide?▼

The best way to update tokens without breaking references is to lint the DESIGN.md file during editing. This validates token and reference syntax, ensuring structural integrity and preventing broken links across your design system components.

Related Skills

Explore More Design & Creative Skills→
ashiqcodeleafashiqcodeleaf

design-md

Validate Google DESIGN.md design tokens and convert to Tailwind CSS or W3C DTCG JSON.

Community
Advanced
aivos-xieaivos-xie
1

design-md

Generate and validate Google DESIGN.md design tokens with WCAG accessibility checks.

Community
Intermediate
lxh755818-botlxh755818-bot

design-md

Create, validate, and export Google DESIGN.md design system specs.

Community
Advanced
ldzhhxxldzhhxx
1

design-md

Validate and convert DESIGN.md design specifications with WCAG contrast support.

Community
Intermediate