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

0•

디자인 도구

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.

주요 기능

01Tailwind CSS v4 compatibility and optimized CSS variable setup

02Built-in accessibility best practices using Radix UI primitives

03Deep integration with TanStack Form for type-safe validation

040 GitHub stars

05Automated shadcn/ui component installation and configuration

06Standardized implementation patterns for forms, dialogs, and data tables

사용 사례

01Implementing complex, accessible forms with Zod and TanStack Form validation

02Scaffolding professional design systems in new React applications

03Standardizing UI components and path aliases across enterprise React codebases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents react-shadcn

For use in Claude.ai and ChatGPT

Download Skill