Skill

shadcn-theming

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.

From fuse-shadcn-ui

Install

Run in your terminal

npx claudepluginhub fusengine/agents --plugin fuse-shadcn-ui

Tool Access

This skill is limited to using the following tools:

ReadWriteEditGlobGrep

Supporting Assets

View in Repository

references/templates/theme-setup.md

references/theming-guide.md

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

evaluation-methodology

1 file

Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.

plugin-eval

32.9k

Stats

Parent Repo Stars4

Parent Repo Forks0

Last CommitFeb 21, 2026

Actions

View Source View Plugin View on GitHub View README

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

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

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

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