shadcn-core-theming

What problem does it solve?

This Skill prevents shadcn ui theming errors caused by mixing Tailwind v3 (HSL variables) and Tailwind v4 (oklch variables), incorrect token wiring, and missing dark-mode hydration controls that lead to wrong colors or flashes.

Core Features & Use Cases

• Tailwind v3 vs v4 wiring guardrails: determines the project’s Tailwind generation and applies the correct theming model without mixing conventions.
• Token contract + catalog: explains and validates the shadcn CSS custom property token set (core, sidebar, chart, radius scale) and how they map to utilities like bg-background, text-foreground, border-border, and ring-ring.
• Dark-mode setup for Next.js and Vite: provides deterministic patterns for Next.js with next-themes (including suppressHydrationWarning) and a Vite-specific ThemeProvider, plus a mode-toggle strategy.
• Theme builder copy workflow: instructs how to paste theme output from ui.shadcn.com into globals.css while preserving the mapping layer (tailwind.config.js for v3, @theme inline for v4).
• Production anti-pattern avoidance: enumerates common failure modes (HSL comma formatting, missing v3 hsl() mapping wrapper, v3/v4 mixing, incorrect Next.js hydration behavior) and their fixes.

Quick Start

Tell Claude Code to configure your globals.css and theme provider by asking it to set up shadcn theming for your project’s Tailwind version using the correct token wiring and dark-mode setup.