skills.rest
ruiyangruiyi
ruiyangruiyiCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Lint DESIGN.md token structure, references, and WCAG contrast.

Updated May 26, 2026
Search Tags:#linting#design tokens#DESIGN.md#dtcg#wcag contrast#tailwind export
One-click install
npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill design-md-ruiyangruiyi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/ruiyangruiyi/hermes-agent/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill design-md-ruiyangruiyi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of turning DESIGN.md design-system specs into consistent, machine-validated token files that agents can confidently lint, compare, and export.

Core Features & Use Cases

  • Validate structure and references: Ensures the required token formats and dotted token references are correct.
  • Check accessibility-focused contrast: Flags potential WCAG contrast issues for component foreground/background combinations.
  • Diff and export outputs: Compares versions to detect regressions and exports token data to Tailwind or W3C DTCG JSON for downstream use.

Quick Start

Ask the agent to lint and export your DESIGN.md, including checking WCAG contrast, for example: "Lint my DESIGN.md and 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 lint DESIGN.md design tokens and check WCAG contrast?▼

To lint DESIGN.md design tokens, you validate structure, dotted token references, and accessibility-related contrast. The linter flags potential WCAG contrast issues for component foreground and background combinations.

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

Yes, you can export DESIGN.md tokens to Tailwind theme JSON or W3C DTCG JSON formats. This generates machine-consumable token outputs for downstream UI tooling integration.

How do I diff design token files to detect regressions?▼

Diffing design token files compares versions to detect regressions by enforcing canonical section order and schema rules. It produces diff and regression feedback for your DESIGN.md specifications.

What is the DESIGN.md token spec format and when do I need to validate it?▼

The DESIGN.md token spec is a Google design-system specification format defining canonical section order and token schemas. You validate it when authoring or maintaining design-system specifications for machine-consumable consistency.

Does the DESIGN.md linter enforce canonical section order and component schema rules?▼

Yes, the DESIGN.md linter enforces canonical section order and token or component schema rules. It validates required token formats and dotted token references to ensure structural compliance.

Why does my design token export fail WCAG contrast checks?▼

Design token exports fail WCAG contrast checks when component foreground and background combinations do not meet accessibility thresholds. The linter flags these potential contrast issues during structural validation.

Related Skills

Explore More Design & Creative Skills→
ZardLi1115ZardLi1115
4

design-md

Author, validate, and export DESIGN.md token specs to Tailwind or W3C DTCG JSON.

Community
Intermediate
aivos-xieaivos-xie
1

design-md

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

Community
Intermediate
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
superfhpsuperfhp

design-md

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

Community
Advanced