How does it help with component variants?

It provides Claude with the logic for class-variance-authority (CVA), allowing it to generate complex multi-dimensional variants and compound styling automatically.

Does this skill handle Radix UI primitives?

Yes, it includes detailed patterns for integrating Radix UI primitives with Tailwind CSS using the asChild pattern and compound components.

Does this support dark mode and accessibility?

Absolutely. It includes specific patterns for semantic tokens, dark mode adaptation, and accessibility states like focus-visible and aria-invalid.

What is the shadcn/ui Claude Code skill?

It is a specialized set of instructions that helps Claude understand and implement the specific architecture, patterns, and best practices of the shadcn/ui design system.

Can it help with the latest shadcn CLI updates?

Yes, it includes the most recent CLI command patterns, including the 2024 transition from the shadcn-ui package to the current shadcn package.

shadcn/ui Component Development

Name: shadcn/ui Component Development
Author: existential-birds

byexistential-birds

•

デザインツール

Implements accessible, themeable UI components using Radix UI primitives and Tailwind CSS styling patterns.

概要

This skill equips Claude with deep expertise in the shadcn/ui ecosystem, enabling it to generate, refactor, and maintain production-grade React components. It covers core utilities like cn(), complex class-variance-authority (CVA) logic, the asChild pattern for polymorphic components, and modern CSS techniques such as data-slot attributes and :has() selectors. It serves as a comprehensive guide for developers building consistent design systems that leverage Radix UI's power with Tailwind's flexibility.

主な機能

Modern CSS targeting with data-slot and :has() selectors
14 GitHub stars
Accessible component patterns using Radix UI primitives
Compound component architecture and state management
CVA-driven variant management for complex UI states
Polymorphic rendering implementation with the asChild pattern

ユースケース

Refactoring legacy styles into modern CVA-powered design systems
Building custom, reusable UI libraries from scratch
Implementing accessible dialogs, forms, and navigation components

概要

主な機能

Modern CSS targeting with data-slot and :has() selectors
14 GitHub stars
Accessible component patterns using Radix UI primitives
Compound component architecture and state management
CVA-driven variant management for complex UI states
Polymorphic rendering implementation with the asChild pattern

ユースケース

Refactoring legacy styles into modern CVA-powered design systems
Building custom, reusable UI libraries from scratch
Implementing accessible dialogs, forms, and navigation components