Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Applies and maintains the default shadcn/ui Neutral theme (black, white, gray) using OKLCH CSS variables. Covers light and dark mode variable definitions, Tailwind v4 @theme integration, and dark mode toggling via next-themes or manual class switching. Only modifies CSS and Tailwind configuration files.
Provides the complete variable set, Tailwind registration, and dark mode wiring in one place, removing the need to cross-reference shadcn/ui docs and Tailwind migration guides separately.
When to use it
- Setting up the Neutral theme in a new Next.js + shadcn/ui project
- Migrating a project from Tailwind v3 HSL variables to v4 OKLCH
- Adding a working dark mode toggle to an existing shadcn/ui app
- Auditing component files for hardcoded colors that should use theme tokens
- Wiring up sidebar-specific CSS tokens separately from global surface tokens
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Add the default shadcn/ui Neutral theme with dark mode to my Next.js app
- 1Check globals.css and tailwind config for existing variable definitions
- 2Write the full :root and .dark CSS variable blocks to globals.css using OKLCH values
- 3Add the @theme inline directive to register variables as Tailwind color utilities
- 4Install next-themes and create a ThemeProvider wrapper component
- 5Wrap the root layout with ThemeProvider and add a ThemeToggle button
globals.css contains complete light and dark variable sets, Tailwind classes like bg-primary and text-muted-foreground resolve correctly, and the app toggles between light and dark modes