shadcn

What problem does it solve?

This Skill provides best practices and patterns for using the shadcn/ui component library with Tailwind CSS and Radix UI. It simplifies UI development by offering guidance on component usage, customization, and theming, enabling you to build accessible and visually appealing interfaces quickly.

Core Features & Use Cases

• Component Usage: Learn to integrate and customize essential UI components like Buttons, Cards, Dialogs, Forms, and Tables.
• Form Integration: Build robust forms with react-hook-form and Zod validation, ensuring data integrity and user-friendly input.
• Theming & Customization: Understand how to modify components directly, add custom variants, and implement dark mode using OKLCH color format.
• Use Case: When you need to add a new form to your application, this skill guides you in using shadcn/ui's form components, integrating react-hook-form for state management, and applying Zod for validation, ensuring a polished and functional form.

Quick Start

Use the shadcn skill to add a new button component with a custom variant.