Generate DESIGN.md from globals.css and layout.tsx token values.
npx skills add https://github.com/marcogonzalo/studio-manager --skill veta-design-md
Please help me install this Agent Skill. Skill: veta-design-md Source: https://github.com/marcogonzalo/studio-manager/tree/main/.agents/skills/veta-design-md Command: npx skills add https://github.com/marcogonzalo/studio-manager --skill veta-design-md
This Skill prevents design drift by generating and maintaining Veta’s single source of truth, DESIGN.md, directly from the current CSS variables and typography configuration so the UI matches the intended brand identity.
src/styles/globals.css and src/app/layout.tsx to extract the latest tokens and font configuration before writing.Run the veta-design-md skill to generate DESIGN.md from the current values in globals.css and layout.tsx.
High-intent search queries and answers about installing and using this skill.
You generate a design system spec by reading `globals.css` and `layout.tsx` to extract tokens, converting oklch values to hex, and writing a structured DESIGN.md file with YAML tokens and rationale.
A DESIGN.md file is a single source of truth for brand identity that prevents design drift by documenting color palettes, typography, and spacing directly from current source files. It ensures UI matches the intended brand identity.
You convert oklch color values to hex for YAML design tokens by processing the extracted light and dark token values from `globals.css` during the DESIGN.md generation workflow.
Yes, you can update design documentation automatically after changing a color palette. The Skill regenerates the DESIGN.md file by re-reading the updated `globals.css` and `layout.tsx` source files to capture the latest token values.
Yes, this design system generator works without external dependencies. It operates entirely by reading local `src/styles/globals.css` and `src/app/layout.tsx` files to produce the design specification document.
You should regenerate a design system markdown file when typography or palette changes occur in the source files, or when you need to produce updated design documentation for other agents or developers referencing the brand identity.
cris-achiardiGenerate Figma variable collection JSON files from design tokens.
richardnguyen0715Create, validate, and export Google DESIGN.md files with YAML front matter.
silaslopes100Extract design tokens from CSS, Tailwind, and UI library configurations.
wachawoManage brand identity and validate marketing asset compliance with Node.js scripts.