Generate CSS variables and Tailwind theme from JSON design tokens.
npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill ui-theme-higashi-kota
Please help me install this Agent Skill. Skill: ui-theme Source: https://github.com/Higashi-Kota/llm-mermaid-chat/tree/main/.claude/skills/ui-theme Command: npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill ui-theme-higashi-kota
This Skill centralizes UI theming by designing and distributing tokens via a Style Dictionary workflow, ensuring consistent visuals across components.
Use the ui-theme skill to generate the Tailwind-ready theme by running the build script in design-tokens. Then import the generated CSS in your project, e.g. @import "design-tokens/tailwind-theme.css"; and reference CSS variables in styles.
High-intent search queries and answers about installing and using this skill.
You can generate CSS variables and Tailwind themes from JSON design tokens by using Style Dictionary with a TypeScript build script to compile token definitions into distributable stylesheet outputs.
The best way to centralize UI theming is to maintain a JSON-based token repository as a single source of truth and distribute the generated CSS variables to ensure consistent visuals across all components.
Yes, Style Dictionary works with Tailwind v4 by running a build script that processes JSON tokens and outputs a ready-to-import Tailwind theme file containing your design system variables.
To apply generated design tokens to a React app, import the output stylesheet using the syntax @import "design-tokens/tailwind-theme.css" and reference the CSS variables directly within your component styles.
Building design tokens with Style Dictionary outputs two primary files: dist/tokens.css containing standard CSS variables and dist/tailwind-theme.css for Tailwind framework integration.
Yes, you need TypeScript to run the Style Dictionary build script that automates the compilation of JSON token definitions into the final CSS variables and Tailwind theme output files.
svssdevaExtract design primitives from a public website into JSON and CSS token files.
hakushunCreates scalable design systems with Tailwind CSS v4 and semantic tokens.
bytetalentGuides Tailwind CSS v4 styling with class composition, variants, CSS variables, utilities, and dark mode.
kimen-devValidate design token structures and generate CSS custom properties via Style Dictionary.
