Tailwind Theme Builder
Generate Tailwind v4 and shadcn/ui-compatible light and dark theme tokens so a solo builder’s app matches the official shadcn pattern without hand-rolling CSS variables.
Overview
Tailwind Theme Builder is an agent skill for the Build phase that scaffolds shadcn/ui–compatible Tailwind v4 CSS theme variables and components.json for light and dark modes.
Install
npx skills add https://github.com/jezweb/claude-skills --skill tailwind-theme-builderWhat is this skill?
- Documents the shadcn Tailwind v4 dark-mode pattern: root variables, `.dark` overrides, `@theme inline`, and hsl()-wrappe
- Ships a ready components.json schema aligned with shadcn (RSC, TSX, cssVariables, path aliases)
- Provides a full default semantic palette (background, primary, destructive, success, muted, accent) for light mode at `:
- Keeps theme tokens out of `@layer base` mistakes called out in the official shadcn v4 guidance
- 4-step shadcn Tailwind v4 dark mode pattern documented in skill comments
Adoption & trust: 2.5k installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are on Tailwind v4 with shadcn/ui but your theme variables, dark mode, or components.json do not match the documented pattern and colors look wrong across components.
Who is it for?
Solo builders shipping React/TSX apps with shadcn/ui who need a correct v4 theme starter before building screens.
Skip if: Teams that already have a locked design system and token pipeline, or projects not using Tailwind v4 and shadcn-style CSS variables.
When should I use this skill?
Starting or refactoring a shadcn/ui app on Tailwind v4 and you need correct root variables and dark-mode structure.
What do I get? / Deliverables
You get root-level HSL semantic tokens, a documented four-step dark-mode structure, and a shadcn-aligned components.json so the agent can extend the design system consistently.
- components.json shadcn schema with aliases and Tailwind paths
- index.css with :root semantic tokens and v4 @theme inline mapping
Recommended Skills
Journey fit
How it compares
Use instead of ad-hoc CSS variable snippets that ignore shadcn’s v4 root/`.dark`/`@theme inline` rules.
Common Questions / FAQ
Who is tailwind-theme-builder for?
It is for solo and indie builders using Claude Code, Cursor, or similar agents to stand up shadcn-compatible Tailwind v4 themes in greenfield or migration UI work.
When should I use tailwind-theme-builder?
Use it in Build → frontend when starting a new shadcn app, upgrading to Tailwind v4, or fixing dark mode; it is not meant for distribution or SEO tasks in Launch.
Is tailwind-theme-builder safe to install?
Review the Security Audits panel on this Prism page and inspect the skill files in your repo before letting an agent write to your CSS and config paths.
SKILL.md
READMESKILL.md - Tailwind Theme Builder
{ "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": false, "tsx": true, "tailwind": { "config": "", "css": "src/index.css", "baseColor": "slate", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" } } @import "tailwindcss"; /* Tailwind v4 + shadcn/ui Dark Mode Pattern Based on: https://ui.shadcn.com/docs/tailwind-v4 Key Pattern: 1. Define CSS variables at root level (NOT in @layer base) 2. Use .dark for dark mode overrides (NOT in @theme) 3. Use @theme inline to map variables to Tailwind utilities 4. All color values must use hsl() wrapper */ /* Light mode colors - Define at root level */ :root { --background: hsl(0 0% 100%); --foreground: hsl(222.2 84% 4.9%); --card: hsl(0 0% 100%); --card-foreground: hsl(222.2 84% 4.9%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(222.2 84% 4.9%); --primary: hsl(221.2 83.2% 53.3%); --primary-foreground: hsl(210 40% 98%); --secondary: hsl(210 40% 96.1%); --secondary-foreground: hsl(222.2 47.4% 11.2%); --muted: hsl(210 40% 96.1%); --muted-foreground: hsl(215.4 16.3% 46.9%); --accent: hsl(210 40% 96.1%); --accent-foreground: hsl(222.2 47.4% 11.2%); --destructive: hsl(0 84.2% 60.2%); --destructive-foreground: hsl(210 40% 98%); --success: hsl(142.1 76.2% 36.3%); --success-foreground: hsl(210 40% 98%); --warning: hsl(38 92% 50%); --warning-foreground: hsl(222.2 47.4% 11.2%); --info: hsl(221.2 83.2% 53.3%); --info-foreground: hsl(210 40% 98%); --border: hsl(214.3 31.8% 91.4%); --input: hsl(214.3 31.8% 91.4%); --ring: hsl(221.2 83.2% 53.3%); --radius: 0.5rem; /* Chart colors */ --chart-1: hsl(12 76% 61%); --chart-2: hsl(173 58% 39%); --chart-3: hsl(197 37% 24%); --chart-4: hsl(43 74% 66%); --chart-5: hsl(27 87% 67%); } /* Dark mode colors - Plain CSS overrides (NOT in @theme) */ .dark { --background: hsl(222.2 84% 4.9%); --foreground: hsl(210 40% 98%); --card: hsl(222.2 84% 4.9%); --card-foreground: hsl(210 40% 98%); --popover: hsl(222.2 84% 4.9%); --popover-foreground: hsl(210 40% 98%); --primary: hsl(217.2 91.2% 59.8%); --primary-foreground: hsl(222.2 47.4% 11.2%); --secondary: hsl(217.2 32.6% 17.5%); --secondary-foreground: hsl(210 40% 98%); --muted: hsl(217.2 32.6% 17.5%); --muted-foreground: hsl(215 20.2% 65.1%); --accent: hsl(217.2 32.6% 17.5%); --accent-foreground: hsl(210 40% 98%); --destructive: hsl(0 62.8% 30.6%); --destructive-foreground: hsl(210 40% 98%); --success: hsl(142.1 70.6% 45.3%); --success-foreground: hsl(222.2 47.4% 11.2%); --warning: hsl(38 92% 55%); --warning-foreground: hsl(222.2 47.4% 11.2%); --info: hsl(217.2 91.2% 59.8%); --info-foreground: hsl(222.2 47.4% 11.2%); --border: hsl(217.2 32.6% 17.5%); --input: hsl(217.2 32.6% 17.5%); --ring: hsl(224.3 76.3% 48%); /* Chart colors for dark mode */ --chart-1: hsl(220 70% 50%); --chart-2: hsl(160 60% 45%); --chart-3: hsl(30 80% 55%); --chart-4: hsl(280 65% 60%); --chart-5: hsl(340 75% 55%); } /* Map CSS variables to Tailwind theme with @theme inline */ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground);