Map DESIGN.md design tokens to shadcn CSS variables in theme files.
npx skills add https://github.com/douinc/agent-skills --skill design-md-to-shadcn
Please help me install this Agent Skill. Skill: design-md-to-shadcn Source: https://github.com/douinc/agent-skills/tree/main/skills/design-md-to-shadcn Command: npx skills add https://github.com/douinc/agent-skills --skill design-md-to-shadcn
Translates an external DESIGN.md (Google Labs design-token format) into shadcn/ui theme tokens, enabling teams to apply a design system consistently without editing code manually.
Provide a DESIGN.md file path to apply its tokens to your shadcn theme.
High-intent search queries and answers about installing and using this skill.
To map design tokens to shadcn UI, you provide a DESIGN.md file path. The Skill parses its front matter and prose, then translates the tokens into shadcn CSS variables within your project's theme file using official token-mapping guidance.
The DESIGN.md token format is a Google Labs design-token structure used for inbound design-system adoption. It contains front matter and prose that can be parsed and mapped directly to shadcn UI theme tokens without manual code editing.
No external tooling is required to convert DESIGN.md tokens into a shadcn theme. The transformation relies entirely on the file's front matter and built-in mapping guide rules to locate the theme CSS file and apply the token translations.
No, you cannot extract a DESIGN.md file from an existing shadcn project. This workflow is intended for inbound-only design-system adoption, meaning it applies an external DESIGN.md to your theme rather than generating one from your current codebase.
Token mapping handles light and dark mode by translating DESIGN.md tokens into distinct :root and .dark blocks within the shadcn theme CSS file. This ensures the design system is applied consistently across both theme variants.
kevinnftAuthor, validate, and export DESIGN.md token specs to Tailwind and DTCG JSON.
jtgironConfigure Tailwind v4 and shadcn/ui in React projects with Vite.
pythoninthegrassesDesign Tailwind design systems with semantic tokens, CVA variants, and dark mode.
gouravsingh311Configure Tailwind v4 design tokens using CSS-first @theme directives.
