Does this skill support Tailwind CSS v4?

Yes, it is specifically optimized for Tailwind CSS 4.x, utilizing the @theme directive for native CSS configuration instead of legacy JavaScript config files.

Can I use this for existing projects?

Absolutely. The skill can explore your codebase to identify existing tokens and refactor them to use standardized shadcn/ui semantic patterns.

What is OKLCH and why does this skill use it?

OKLCH is a modern color space that provides better perceptual uniformity and access to wide-gamut P3 colors, ensuring consistent lightness across different hues compared to Hex or RGB.

Does it handle dark mode automatically?

Yes, the skill enforces strict rules to always define dark mode overrides for every design token created, typically using the .dark class selector.

What UI primitives are supported?

The skill supports both Radix UI and Base UI primitives, which are the foundational building blocks for the shadcn/ui ecosystem.

Shadcn UI Theming Expert

Name: Shadcn UI Theming Expert
Author: fusengine

byfusengine

•

设计工具

Configures advanced design tokens and OKLCH-based color systems for shadcn/ui and Tailwind CSS v4.

This skill empowers Claude to architect professional-grade design systems using the shadcn/ui component architecture. It specializes in modern CSS workflows, specifically focusing on the wide-gamut OKLCH color space and Tailwind CSS v4's native @theme configuration. By automating the setup of semantic tokens, CSS variables, and dark mode overrides, it ensures a robust, accessible, and scalable UI foundation. It is particularly useful for developers looking to implement high-fidelity design systems that leverage modern browser capabilities like P3 color gamuts and streamlined Tailwind configurations.

主要功能

01Comprehensive dark mode configuration with mandatory CSS variable overrides

02Pre-configured variable setups for specialized components like charts and sidebars

03Automated semantic token mapping for consistent component-level styling

04Seamless Tailwind CSS v4 integration using the @theme directive

05Advanced OKLCH color space implementation for wide-gamut P3 display support

064 GitHub stars

使用场景

01Auditing and refactoring existing CSS variables to ensure dark mode consistency

02Initializing a new shadcn/ui project with Tailwind CSS v4 architectural patterns

03Migrating a legacy hex-based theme to modern OKLCH tokens for better accessibility

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents shadcn-theming

For use in Claude.ai and ChatGPT

Download Skill