Does it support custom project directory structures?

Yes, the skill handles custom path aliases for components, hooks, and utility functions, ensuring it adapts to your specific project architecture.

Does this skill support Tailwind CSS v4?

Yes, it includes specific configuration instructions and patterns optimized for Tailwind CSS v4, including the required empty config field behavior.

Can I install multiple shadcn components at once?

Yes, the skill provides the correct bunx/npx syntax for both individual and batch component installation to speed up your workflow.

How does this help with web accessibility?

It leverages Radix UI primitives and follows shadcn's default accessible patterns to ensure all generated components meet ARIA standards.

Can I use this for complex form validation?

Absolutely. It provides specialized patterns for integrating shadcn/ui components with TanStack Form and Zod for robust, type-safe validation.

React Shadcn UI Expert

Name: React Shadcn UI Expert
Author: fusengine

byfusengine

デザインツール

Accelerates React UI development by implementing and managing shadcn/ui components with Radix UI and Tailwind CSS.

概要

The react-shadcn skill streamlines the integration of the popular shadcn/ui library into React projects, offering standardized patterns for building accessible, high-performance components. It provides Claude with domain-specific knowledge to handle installation, configure Tailwind CSS v4, manage custom path aliases, and implement complex UI structures like forms with TanStack integration and data tables. This skill ensures that generated UI code adheres to shadcn's design philosophy while maintaining full accessibility and developer customizability through Radix UI primitives.

主な機能

Tailwind CSS v4 compatibility and optimized CSS variable setup
Built-in accessibility best practices using Radix UI primitives
Deep integration with TanStack Form for type-safe validation
0 GitHub stars
Automated shadcn/ui component installation and configuration
Standardized implementation patterns for forms, dialogs, and data tables

ユースケース

Implementing complex, accessible forms with Zod and TanStack Form validation
Scaffolding professional design systems in new React applications
Standardizing UI components and path aliases across enterprise React codebases

概要

主な機能

Tailwind CSS v4 compatibility and optimized CSS variable setup
Built-in accessibility best practices using Radix UI primitives
Deep integration with TanStack Form for type-safe validation
0 GitHub stars
Automated shadcn/ui component installation and configuration
Standardized implementation patterns for forms, dialogs, and data tables

ユースケース

Implementing complex, accessible forms with Zod and TanStack Form validation
Scaffolding professional design systems in new React applications
Standardizing UI components and path aliases across enterprise React codebases