Validate design token structures and generate CSS custom properties via Style Dictionary.
npx skills add https://github.com/kimen-dev/kimen --skill design-tokens-kimen-dev
Please help me install this Agent Skill. Skill: design-tokens Source: https://github.com/kimen-dev/kimen/tree/main/.agents/skills/design-tokens Command: npx skills add https://github.com/kimen-dev/kimen --skill design-tokens-kimen-dev
This skill resolves the complexity of managing design tokens by providing expert guidance on the DTCG specification, ensuring consistent visual values across your design system while preventing hardcoded values in components.
Use the design-tokens skill to validate the structure of my primitive.tokens.json file and generate the corresponding CSS variables using the Style Dictionary build configuration.
High-intent search queries and answers about installing and using this skill.
To migrate raw CSS variables into a structured design token hierarchy, you validate primitive token JSON files and generate CSS custom properties using the Style Dictionary 5 build pipeline, ensuring safe component consumption without hardcoded values.
The DTCG specification provides a standardized format for design token structure, color spaces, and aliasing. This approach ensures consistent visual values across your design system while managing tokens effectively.
Yes, you can use Style Dictionary 5 to transform design tokens into CSS custom properties. This skill provides streamlined build configurations that facilitate the transformation following the DTCG specification and Kimen pipeline.
The best way to validate design token structure is to check primitive token JSON files against the DTCG specification. This ensures primitive-to-semantic token layering adheres to architectural constraints before running the build pipeline.
Yes, the token transformation process enforces accessibility standards. It ensures adherence to architectural constraints regarding token layering and accessibility standards throughout the validation and build process.
theodrosyimerAutomate DTCG design token creation, validation, and building with Style Dictionary v5.
cynthiateetersEnforce HSL color standards and CSS custom properties in :root.
The13thNodeEnforce standardized CSS design tokens as custom properties in component styles.
dylantarreTransform design tokens into CSS, SCSS, Swift, and Android XML outputs.
