A high-performance UI development skill for building accessible interfaces using Tailwind CSS v4 utility classes and shadcn/ui component patterns.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install shadcn-tailwind
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install shadcn-tailwind using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is shadcn-tailwind?
The shadcn-tailwind skill is a comprehensive resource within the Openclaw Skills ecosystem designed for building modern, accessible user interfaces. It strictly adheres to the Tailwind CSS v4 philosophy, which prioritizes a CSS-first configuration over legacy JavaScript-based setup. This skill provides developers with the patterns and rules necessary to implement sophisticated designs using OKLCH colors, semantic tokens, and component variants managed via Class Variance Authority (CVA).
By utilizing this skill, developers can leverage Radix UI or Base UI primitives to build high-quality components that are both performant and themeable. It integrates seamlessly into modern React 19 workflows, focusing on clean function-based components and data-slot attributes for better composition. This approach ensures that projects remain scalable and maintainable while taking full advantage of the latest web styling standards.
shadcn-tailwind Use Cases
- Rapidly prototyping and building production-ready UIs with Tailwind CSS v4 and shadcn/ui.
- Migrating legacy Tailwind projects to the new CSS-first configuration model using Openclaw Skills.
- Implementing complex, accessible design systems with multiple visual styles like Vega, Nova, or Mira.
- Developing responsive layouts that utilize advanced features like container queries and logical properties.
- Setting up robust dark mode systems that use semantic CSS variables to prevent hydration flashes.
How shadcn-tailwind Works
- The skill initializes the styling environment by defining global CSS variables using the OKLCH color space for maximum perceptual uniformity.
- It configures the Tailwind v4 compiler via the @theme directive in the main CSS file, eliminating the need for a tailwind.config.js file.
- Components are authored as plain React 19 functions, using data-slot and data-icon attributes to handle internal element identification and styling.
- Visual variants are defined using CVA, allowing for a clean separation between component logic and stylistic states like size, color, or shape.
- The cn() utility merges base styles with consumer-provided classes, ensuring that the tailwind-merge logic maintains the correct style override order.
- The workflow incorporates mobile-first responsive design and container queries to ensure the UI adapts to various screen sizes and parent container constraints.
shadcn-tailwind Setup
To get started with this skill in your project, use the following commands:
# Create a new project with a specific visual style
npx shadcn create
# Initialize shadcn/ui in an existing project
pnpm dlx shadcn@latest init
# Add specific UI components
pnpm dlx shadcn@latest add button card form
# Initialize the MCP server for AI-driven development
npx shadcn@latest mcp init
shadcn-tailwind Data Schema & Taxonomy
This skill organizes UI data and metadata through a structured CSS and component hierarchy:
| Level | Implementation | Purpose |
|---|---|---|
| Global Styles | globals.css | Defines root OKLCH variables and @theme mappings. |
| Components | @/components/ui | Houses reusable atomic components with data-slot attributes. |
| Variants | buttonVariants, etc. | Managed via CVA to handle semantic states (primary, outline, ghost). |
| Utils | @/lib/utils.ts | Contains the cn() helper for conditional class merging. |
| Configuration | CSS @source | Defines which files the Tailwind scanner should monitor for classes. |
shadcn-tailwind Advanced Features
- Support for Tailwind v4.2 logical block properties (pbs, pbe) for RTL and internationalization support.
- Deep integration with next-themes for automatic system/dark/light mode switching without layout shifts.
- Implementation of CSS-first custom utilities and variants using the @utility and @custom-variant directives.
- Built-in support for five distinct visual styles (Vega, Nova, Maia, Lyra, Mira) that adjust component density and geometry.
- Advanced animation patterns using the tw-animate-css plugin and motion-safe media query wrappers.
- First-class support for container queries (@container) to build components that respond to their parent's width.
SKILL.md
Loading
Related Openclaw Skills
Wufoo
A comprehensive integration that enables AI agents to programmatically manage Wufoo forms, entries, and reports via Openclaw Skills.
H&M Brand Intelligence
A comprehensive intelligence skill for analyzing H&M global fashion operations, supply chain, and sustainability initiatives.
UPayments
Integrate UPayments into your AI workflows to automate payment processing, invoice management, and customer billing.
UserLeap
A powerful integration for managing UserLeap surveys and user feedback data directly through your AI coding agent.
Power Automate
A powerful integration for AI agents to interact with Microsoft Power Automate flows, manage connections, and execute automated business workflows.
Unbounce
A comprehensive integration that enables AI agents to manage Unbounce landing pages, variants, and lead data through a secure CLI-driven workflow.
Featured*
