From fuse-shadcn-ui
Design tokens and theming for shadcn/ui. Covers CSS variables, OKLCH colors, dark/light mode, and theme configuration for both Radix and Base UI primitives.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-shadcn-ui:shadcn-themingThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Before theming work, use `TeamCreate`:
Before theming work, use TeamCreate:
After: Run fuse-ai-pilot:sniper for validation.
| Feature | Description |
|---|---|
| CSS Variables | --background, --foreground, --primary |
| OKLCH Colors | Wide-gamut P3 color space |
| Dark Mode | .dark class or prefers-color-scheme |
| Tailwind v4 | @theme directive integration |
app/
├── globals.css # :root + .dark token definitions
└── tailwind.config.ts # Optional (v3) or @theme (v4)
-> See theme-setup.md for complete theme
Component: --card, --card-foreground, --button-*
↑
Semantic: --primary, --secondary, --accent, --muted
↑
Primitive: oklch(55% 0.20 260), oklch(98% 0.01 260)
[ ] CSS variables defined in :root
[ ] Dark mode overrides in .dark
[ ] OKLCH color space used
[ ] Chart variables (--chart-1 to --chart-5)
[ ] Sidebar variables if applicable
[ ] No hard-coded hex in components
@theme for Tailwind v4 integration| Topic | Reference | When to Consult |
|---|---|---|
| Theming Guide | theming-guide.md | CSS variables and OKLCH setup |
| Template | When to Use |
|---|---|
| theme-setup.md | Complete theme configuration |
npx claudepluginhub fusengine/agents --plugin fuse-shadcn-uiCreates and manages Tailwind CSS + shadcn/ui Design Systems: defines design tokens as CSS variables, configures light/dark/multi-theme theming, wraps shadcn/ui into consistent UI primitives.
Sets up Tailwind v4 + shadcn/ui theming in React/Vite projects: installs deps, configures CSS variables with @theme inline, adds dark mode support, verifies. Fixes v4 colors, animations, @apply, migration issues.
Configures Tailwind CSS @theme for advanced design systems with semantic colors, brand scales, typography scales, line heights, and spacing tokens.