How do I install the Shadcn Theming skill?

Run npx skillmds@latest add fusengine/shadcn-theming-3 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Shadcn Theming safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Shadcn Theming?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Shadcn Theming free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Shadcn Theming?

fusengine (@fusengine) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Shadcn Theming by fusengine — Agent Skill

Name: Shadcn Theming
Rating: 4.2 (5 reviews)
Author: fusengine

File contents

shadcn Theming

Agent Workflow (MANDATORY)

Before theming work, use TeamCreate:

fuse-ai-pilot:explore-codebase - Find existing theme tokens
fuse-ai-pilot:research-expert - Verify OKLCH patterns via Context7

After: Run fuse-ai-pilot:sniper for validation.

Overview

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

Critical Rules

ALWAYS use OKLCH color space for all tokens
ALWAYS define dark mode overrides for every token
NEVER hard-code hex or rgb in components
USE @theme directive for Tailwind v4 integration
MAP semantic tokens to primitive OKLCH values

Architecture

app/
├── globals.css         # :root + .dark token definitions
└── tailwind.config.ts  # Optional (v3) or @theme (v4)

-> See theme-setup.md for complete theme

Token Hierarchy

Component: --card, --card-foreground, --button-*
    ↑
Semantic: --primary, --secondary, --accent, --muted
    ↑
Primitive: oklch(55% 0.20 260), oklch(98% 0.01 260)

Validation Checklist

[ ] 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

Best Practices

DO

Use OKLCH for all colors
Define semantic tokens mapped to primitives
Provide dark mode overrides for all tokens
Use @theme for Tailwind v4 integration

DON'T

Hard-code hex or rgb values
Skip dark mode definitions
Mix color spaces (hex + oklch)
Define tokens only in Tailwind config

Reference Guide

Concepts

Topic	Reference	When to Consult
Theming Guide	theming-guide.md	CSS variables and OKLCH setup

Templates

Template	When to Use
theme-setup.md	Complete theme configuration

---name: shadcn-theming-3description: 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.---# shadcn Theming## Agent Workflow (MANDATORY)Before theming work, use `TeamCreate`:1. **fuse-ai-pilot:explore-codebase** - Find existing theme tokens2. **fuse-ai-pilot:research-expert** - Verify OKLCH patterns via Context7After: Run **fuse-ai-pilot:sniper** for validation.## Overview| 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 |## Critical Rules1. **ALWAYS use OKLCH** color space for all tokens2. **ALWAYS define dark mode** overrides for every token3. **NEVER hard-code** hex or rgb in components4. **USE @theme** directive for Tailwind v4 integration5. **MAP semantic tokens** to primitive OKLCH values## Architecture```app/├── globals.css # :root + .dark token definitions└── tailwind.config.ts # Optional (v3) or @theme (v4)```-> See [theme-setup.md](references/templates/theme-setup.md) for complete theme## Token Hierarchy```Component: --card, --card-foreground, --button-* ↑Semantic: --primary, --secondary, --accent, --muted ↑Primitive: oklch(55% 0.20 260), oklch(98% 0.01 260)```## Validation Checklist```[ ] 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```## Best Practices### DO- Use OKLCH for all colors- Define semantic tokens mapped to primitives- Provide dark mode overrides for all tokens- Use `@theme` for Tailwind v4 integration### DON'T- Hard-code hex or rgb values- Skip dark mode definitions- Mix color spaces (hex + oklch)- Define tokens only in Tailwind config## Reference Guide### Concepts| Topic | Reference | When to Consult ||-------|-----------|-----------------|| **Theming Guide** | [theming-guide.md](references/theming-guide.md) | CSS variables and OKLCH setup |### Templates| Template | When to Use ||----------|-------------|| [theme-setup.md](references/templates/theme-setup.md) | Complete theme configuration |

Frequently asked questions

Shadcn Theming