How does it improve component composability?

It verifies the use of Class Variance Authority (CVA) for type-safe variants and the cn() utility for clean class merging and overrides.

Is it compatible with Radix UI standards?

Absolutely; it enforces Radix UI best practices and data-state animation patterns to ensure high accessibility and functional consistency.

Which shadcn themes are supported by this skill?

The skill supports all major 2025 shadcn styles including Vega, Nova, Maia, Lyra, and Mira, providing specific spacing and shape audits for each.

Does this skill help with Tailwind CSS v4?

Yes, it includes support for Tailwind v4 technical updates, including @theme directives and OKLCH color patterns.

Can it detect hardcoded colors in my components?

Yes, the review process specifically checks for hardcoded hex codes or neutral Tailwind classes and suggests semantic tokens like 'muted-foreground'.

Shadcn Component Review

Name: Shadcn Component Review
Author: mattbx

bymattbx

0•

设计工具

Audits and aligns custom React components with shadcn/ui design patterns, theme-specific spacing, and Radix UI best practices.

This skill provides a systematic review process to ensure your custom components and layouts strictly adhere to official shadcn/ui standards and the latest 2025 theme styles including Vega, Nova, Maia, Lyra, and Mira. It automates the verification of component structure using data-slot attributes, enforces the use of semantic design tokens over hardcoded colors, and audits spacing density to maintain visual consistency. Whether you are planning new features or refactoring legacy components, this tool ensures your code remains composable, responsive, and fully aligned with professional shadcn implementation patterns and React 19 compatibility.

主要功能

01Detection of hardcoded colors with enforcement of semantic design tokens

02Validation of component structure using data-slot attributes and CVA patterns

03Automated spacing audits based on official theme styles like Maia, Vega, and Lyra

040 GitHub stars

05Composability checks to ensure components remain reusable and customizable via props

06Responsive design verification using mobile-first Tailwind CSS patterns

使用场景

01Planning new component architectures that follow Radix UI and shadcn best practices

02Auditing a custom UI library to ensure it matches a specific shadcn theme style

03Reviewing pull requests to catch hardcoded utility classes or improper component nesting

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattbx/shadcn-skills shadcn-component-review

For use in Claude.ai and ChatGPT

Download Skill