design-md-to-shadcn

Installation
SKILL.md

DESIGN.md → shadcn/ui

Take an external DESIGN.md (the Google Labs design-token format, version alpha, Apache-2.0) and apply it to the project's shadcn/ui theme.

What this skill is for

The DESIGN.md format pairs machine-readable YAML front matter (design tokens) with markdown prose (rationale + guidance). It uses a Material-3-style token namespace (primary, secondary, tertiary, neutral, surface, on-surface, surface-container-*, on-primary, …) that does not map 1:1 to shadcn's fixed semantic tokens.

The official design.md export --format css-tailwind emits --color-primary etc. — single-mode, no foreground pairs — which is not usable by shadcn. This skill provides the missing mapping layer: DESIGN.md tokens → shadcn :root / .dark CSS variables, plus prose → component guidance.

  • Direction: inbound only (external DESIGN.md → the project). Do not generate a DESIGN.md from the project.
  • Dependencies: none. No @google/design.md CLI, no package installs. Pure parsing + the mapping table in rules/token-mapping.md.

Project target (locate, then verify before editing)

First find the project's shadcn theme CSS file and config — don't assume a path:

Installs
4
GitHub Stars
1
First Seen
Jun 18, 2026