Read and write DTCG-format tokens.json to emit CSS, Tailwind, and Mantine outputs.
npx skills add https://github.com/kinncj/MAPLE --skill design-tokens-kinncj
Please help me install this Agent Skill. Skill: design-tokens Source: https://github.com/kinncj/MAPLE/tree/main/template/.opencode/skills/design-tokens Command: npx skills add https://github.com/kinncj/MAPLE --skill design-tokens-kinncj
Read and write design tokens in W3C Design Token Community Group (DTCG) format (tokens.json). Emit framework-specific outputs: CSS custom properties, Tailwind config, and Mantine theme object. The tokens.json in docs/design/identity/ is the canonical source of truth; all framework outputs are derived and regenerated — never manually edited.
tokens.json using the DTCG format.Run the design-token workflow to generate CSS, Tailwind, and Mantine outputs from docs/design/identity/tokens.json
High-intent search queries and answers about installing and using this skill.
You can synchronize design tokens by maintaining a single tokens.json file in W3C DTCG format and automatically generating CSS custom properties, Tailwind config, and Mantine theme objects from that source.
The DTCG tokens.json format is a W3C Design Token Community Group standard that centralizes design tokens like colors and typography into a single source of truth for cross-framework synchronization.
Yes, you can emit framework-specific outputs like Tailwind config and Mantine theme objects by reading and validating a canonical tokens.json file written in the standard DTCG format.
No, framework outputs like CSS custom properties are derived assets that should never be manually edited; you update the canonical tokens.json file and regenerate all framework-specific outputs.
The best way to prevent design token drift across web apps is to centralize tokens in a DTCG tokens.json file and derive all CSS, Tailwind, and Mantine outputs from that single source of truth.
Yes, the workflow validates the tokens.json file in DTCG format before emitting framework-ready assets such as CSS custom properties, Tailwind configuration, and Mantine theme objects.
mkatoguiSync Figma tokens with design-tokens.json and validate DTCG structure.
hakushunCreates scalable design systems with Tailwind CSS v4 and semantic tokens.
SatanaCSharpCreate scalable design systems with Tailwind CSS v4 design tokens and CVA variants.
Higashi-KotaGenerate CSS variables and Tailwind theme from JSON design tokens.