shadcn-ui
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Why use this skill?
Master shadcn/ui development with OpenClaw. Generate accessible, production-ready React components, forms, and Tailwind layouts using this expert AI skill.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/jgarrison929/shadcn-uiWhat This Skill Does
The shadcn-ui skill empowers your OpenClaw AI agent to become an expert frontend architect. It understands the nuances of the shadcn/ui ecosystem—a collection of re-usable components built using Radix UI primitives and Tailwind CSS. Unlike traditional component libraries that are installed as dependencies, this skill manages the "copy-paste" workflow required for shadcn/ui. The agent can generate code for complex layouts, interactive forms with robust validation via react-hook-form and zod, and accessible navigation patterns. It understands the semantic relationship between components like Command and Popover to create advanced UI elements like comboboxes or date pickers.
Installation
To integrate this skill, run the following command in your terminal:
clawhub install openclaw/skills/skills/jgarrison929/shadcn-ui
Ensure you have an existing Next.js project initialized with npx shadcn@latest init to utilize the component generation capabilities effectively.
Use Cases
This skill is perfect for:
- Rapidly prototyping admin dashboards with complex sidebar navigation and resizable layouts.
- Building accessible, validated forms using Zod schemas and React Hook Form.
- Creating responsive, mobile-first design systems using Tailwind CSS utility classes.
- Implementing dark mode and theme-aware UI components.
- Debugging accessibility issues in complex interactive components like Dialogs, Sheets, and Dropdown Menus.
Example Prompts
- "Create a login form using shadcn/ui components with react-hook-form validation for email and password fields, including Zod schema integration."
- "Generate a sidebar layout with a collapsible navigation menu, integrated with the shadcn/ui sheet component for mobile viewports."
- "Help me build a searchable datatable component using shadcn/ui Table, ensuring the search input uses a debounced state."
Tips & Limitations
- Component Ownership: Remember that you own the code. If you customize a component (e.g., changing the styles in
components/ui/button.tsx), the agent will respect those changes in future iterations. - Dependencies: Keep your
package.jsonupdated. While shadcn components are local, they often rely on updated versions ofradix-uiprimitives. - Limitations: This skill does not automatically install third-party dependencies outside the shadcn/ui ecosystem (like
date-fnsfor calendars). You may need to install those manually if the agent suggests them. - Complexity: For highly custom animation-heavy components, ensure you provide the agent with your
tailwind.config.jsto ensure theme consistency.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-jgarrison929-shadcn-ui": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read
Related Skills
nextjs-expert
Use when building Next.js 14/15 applications with the App Router. Invoke for routing, layouts, Server Components, Client Components, Server Actions, Route Handlers, authentication, middleware, data fetching, caching, revalidation, streaming, Suspense, loading states, error boundaries, dynamic routes, parallel routes, intercepting routes, or any Next.js architecture question.
dotnet-expert
Use when building .NET 8/9 applications, ASP.NET Core APIs, Entity Framework Core, MediatR CQRS, modular monolith architecture, FluentValidation, Result pattern, JWT authentication, or any C# backend development question.
database-operations
Use when designing database schemas, writing migrations, optimizing SQL queries, fixing N+1 problems, creating indexes, setting up PostgreSQL, configuring EF Core, implementing caching, partitioning tables, or any database performance question.
security-auditor
Use when reviewing code for security vulnerabilities, implementing authentication flows, auditing OWASP Top 10, configuring CORS/CSP headers, handling secrets, input validation, SQL injection prevention, XSS protection, or any security-related code review.