ui-theme

Name: ui-theme
Availability: InStock
Author: higashi-kota

Generate CSS variables and Tailwind theme from JSON design tokens.

Updated Jan 2, 2026

Search Tags:#theming #tailwind #ui-design #css-variables #design-tokens #style-dictionary

Ready to run

npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill ui-theme-higashi-kota

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill centralizes UI theming by designing and distributing tokens via a Style Dictionary workflow, ensuring consistent visuals across components.

Core Features & Use Cases

Token source of truth: JSON-based tokens with a central design-tokens repo.
Build and output: Generates CSS variables and a Tailwind v4 theme for rapid integration.
Use Case: Apply the generated tokens to a React app to ensure design consistency and predictable theming across pages.

Quick Start

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.

Frequently Asked Questions about ui-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate CSS variables and Tailwind themes from JSON design tokens?▼

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.

What's the best way to centralize UI theming across multiple web app components?▼

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.

Does Style Dictionary work with Tailwind v4 for generating theme configurations?▼

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.

How do I apply generated design tokens to a React application?▼

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.

What files are output when building design tokens with Style Dictionary?▼

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.

Do I need TypeScript to build and distribute design tokens for consistent UI theming?▼

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.