shadcn/ui

What This Skill Does

The shadcn/ui skill is a comprehensive documentation and integration library for the shadcn/ui design system. It acts as an expert assistant that provides instant access to the documentation for over 50+ accessible, customizable components built on top of Radix UI and Tailwind CSS. Beyond simple reference, it assists developers in scaffolding component structures, debugging complex layouts, and implementing advanced patterns like data tables with TanStack Table, complex forms with React Hook Form and Zod, and interactive data visualizations using Recharts. Whether you are setting up a new Next.js project or migrating a legacy application, this skill provides the necessary CLI commands, configuration steps, and best practices to ensure your UI remains consistent, accessible, and performant.

Installation

To integrate this skill into your OpenClaw agent, execute the following command in your terminal:

clawhub install openclaw/skills/skills/leonaaardob/lb-shadcn-ui-skill

Once installed, ensure your project environment has Tailwind CSS and the necessary peer dependencies (like Radix UI primitives) configured according to the instructions provided by the agent.

Use Cases

• Rapid Prototyping: Quickly generate boilerplate code for complex components like Dialogs, Drawers, or Command palettes without leaving your IDE.
• Framework Migration: Use the skill to find specific setup instructions for integrating shadcn/ui into non-standard frameworks like Laravel, Astro, or Tanstack Router.
• Theming and Customization: Generate CSS variable definitions for light/dark mode and update your components.json configuration file.
• Form Handling: Utilize the skill to scaffold type-safe forms incorporating Zod validation and React Hook Form state management.

Example Prompts

1. "How do I set up the DatePicker component in my Next.js app, and what are the required dependencies?"
2. "Create a reusable Card component that follows the shadcn/ui design pattern and accepts custom Tailwind classes."
3. "Show me the configuration required to support dark mode with CSS variables in my shadcn/ui installation."

Tips & Limitations

• Tips: Always maintain your components.json at the root of your project; the agent uses this to provide context-aware suggestions. If you are struggling with component styling, ask the agent to explain the specific Tailwind utility classes used in the component's variant definitions.
• Limitations: While the skill contains exhaustive documentation, it does not execute code directly in your browser. You must manually copy and paste the generated snippets into your files. Ensure your local Tailwind configuration matches the expected patterns to avoid style overrides.