shadcn-ui

This skill provides specialized assistance for building user interfaces using the shadcn/ui library, an open-code collection of accessible, high-quality React components. It is designed for frontend developers and engineers working within modern stacks, particularly those using Vite, TanStack Router, Next.js, or Remix. By leveraging the shadcn/ui registry system, this skill automates component installation, configuration, and integration, ensuring that UI components are seamlessly added to your codebase while maintaining consistency with your design tokens.

• Streamlines CLI operations including initializing projects, adding specific components, and managing dependencies like Tailwind CSS, Radix UI primitives, and lucide-react icons.

• Provides deep integration support for components.json configurations, enabling automated updates to aliases, path mappings (e.g., @/*), and tailwind.config.js styles.

• Facilitates rapid scaffolding for TanStack Router and Vite environments, including automated setup of folder structures, tsconfig path aliases, and global CSS imports.

• Supports advanced composition patterns for building complex UIs, allowing developers to extend simple building blocks into fully functional application modules.

• Offers guidance on best practices for styling, theming, and maintaining the open-code library structure within your project repository.

• Use this skill when initiating a new project with shadcn/ui, adding complex components like Dialogs, Cards, or Buttons, or debugging component path aliases and styling conflicts.

• Ensure your environment meets the requirements for Tailwind CSS integration and TypeScript module resolution before triggering installations.

• Input typically involves component names or configuration changes, while output generates CLI commands, configuration code snippets, and implementation steps.

• Best suited for teams prioritizing accessibility and clean, maintainable, and editable component codebases instead of heavy dependency-managed UI libraries.

• Keep in mind that since shadcn/ui components are copied into your source code, you are responsible for managing the versioning and lifecycle of these components using the provided CLI tools.