Shadcn Theming

Use this skill to modify the look and feel of the application (globals.css / index.css), add new colors, and manage design tokens.

Documentation

• Shadcn Theming

Workflow

1. File Identification & Validation

• Locate CSS: app/globals.css (Next.js) or src/index.css (Vite).
  • If missing: Ask user for the main global stylesheet location.
• Check Version: Look for tailwind.config.js (v3) or @import "tailwindcss"; / @theme { ... } (v4).
  • If both missing: The project might not be set up correctly. Use shadcn-setup or verify Tailwind installation.

2. Token Management & Evolution