fusengine/shadcn-theming
plugins/shadcn-expert/skills/shadcn-theming/SKILL.md
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. Use when: defining or auditing shadcn/ui design tokens, OKLCH colors, or dark/light mode CSS variables.
$ install --global
skillsauthnpx skillsauth add fusengine/agents shadcn-themingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 16, 2026, 2:54 AM230.1s3 files scanned
SKILL.md
- name:
- shadcn-theming
- description:
- 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. Use when: defining or auditing shadcn/ui design tokens, OKLCH colors, or dark/light mode CSS variables.
- shadcn-ui:
- 2.x
- tailwindcss:
- 4.1
- user-invocable:
- true
- allowed-tools:
- Read, Write, Edit, Glob, Grep
- references:
- references/theming-guide.md, references/templates/theme-setup.md
- related-skills:
- shadcn-registries, shadcn-components
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
@themefor 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 |
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026