shadcn-ui
Build accessible, customizable UIs with shadcn/ui, Radix UI, and Tailwind CSS. Use when setting up shadcn/ui, installing components, building forms with React Hook Form + Zod, customizing themes, or implementing component patterns.
Why use this skill?
Master shadcn-ui with OpenClaw. Automate component installation, build type-safe forms, and manage custom Tailwind themes with ease.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/shadcnWhat This Skill Does
The shadcn-ui skill empowers OpenClaw to act as a frontend architect, allowing it to generate, configure, and maintain UI components built on the shadcn/ui ecosystem. By leveraging Radix UI primitives for accessibility and Tailwind CSS for styling, this skill ensures that all generated UI code adheres to industry standards. Unlike traditional component libraries that are installed via npm as static dependencies, shadcn/ui provides you with the raw source code. This skill manages the integration of these components directly into your project structure, enabling full customization of themes, variants, and behavior without being locked into a third-party's release cycle.
Installation
To integrate this skill into your environment, run the following command in your terminal: clawhub install openclaw/skills/skills/wpank/shadcn
Ensure your project is already set up as a Next.js application with Tailwind CSS, as the skill relies on the underlying shadcn init architecture to function correctly.
Use Cases
- Rapid prototyping of accessible interfaces by scaffolding components like Dialogs, Sheets, and Dropdowns.
- Constructing complex, validated forms using the React Hook Form and Zod stack integrated with shadcn Form components.
- Standardizing design system tokens and Tailwind configurations across a multi-component project.
- Implementing interactive elements like authenticated dashboards or user profile settings panels.
- Modifying existing shadcn/ui components to match unique branding requirements, such as adjusting border-radius or color palette scales.
Example Prompts
- "Create a login form with email and password fields using shadcn/ui, including Zod schema validation and a submit button with a loading state."
- "Add a persistent sidebar navigation using the shadcn sheet component that works well on mobile devices."
- "Refactor my current primary button variant to use a new 'luxury' style with specific spacing and border properties using CVA."
Tips & Limitations
When using this skill, always remember that you own the code. Since components are copied into your repository, updates to the library are not automatic; you must manually trigger updates if the source repository changes significantly. Prioritize using the cn utility function to handle Tailwind class merging to prevent style conflicts. Ensure you have the lucide-react package installed, as most shadcn/ui components rely on these icons for visual indicators.
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-wpank-shadcn": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.