shadcn/ui Skill for OpenClaw

OpenClaw shadcn/ui Skill Overview

The shadcn/ui skill connects OpenClaw to the shadcn/ui component library, giving your agent the ability to add, configure, and compose accessible React components in your project. Once installed, you can scaffold complete UI features — forms, data tables, navigation, dialogs, and more — using plain English descriptions.

Unlike traditional component libraries that ship as npm packages, shadcn/ui copies component source code directly into your project. This means you own every line of code and can customize components without fighting library abstractions. The OpenClaw shadcn/ui skill makes this workflow even faster by handling component selection, installation, composition, and styling through conversation.

Typical workflow:

1. Ask OpenClaw to add a data table with sorting and pagination.
2. The agent runs npx shadcn@latest add table and related components, then generates the table implementation with your specified columns.
3. A fully functional, accessible data table appears in your project — ready to customize.

This skill is built for React and Next.js projects using Tailwind CSS. It pairs naturally with the Frontend Design skill for layout and UX guidance and works well alongside any design system workflow.

Prerequisites for shadcn/ui Skill

Before installing the shadcn/ui skill, make sure you have:

• OpenClaw installed and running (v1.0+)
• A React or Next.js project with Tailwind CSS configured
• Node.js v18+ and a package manager (npm, pnpm, or bun)
• clawhub CLI installed for skill management

Verify your setup:

# Check OpenClaw version
openclaw --version

# Check Node.js version
node --version

# Verify Tailwind CSS is configured
npx tailwindcss --help

If you are starting a new project, the agent can help you initialize a Next.js project with shadcn/ui pre-configured using npx shadcn@latest init.

How to Install the shadcn/ui Skill

Install the shadcn/ui skill with a single command:

npx clawhub@latest install shadcn-ui

To verify the installation:

clawhub list

You should see shadcn-ui in the list of installed skills.

shadcn/ui Skill Configuration

The shadcn/ui skill requires no API keys or external authentication. It works with your local project files and the shadcn CLI.

Project Initialization

If your project does not have shadcn/ui configured yet, the agent can initialize it:

# Initialize shadcn/ui in your project
npx shadcn@latest init

This creates a components.json configuration file in your project root with settings for:

| Setting | Description | |---------|-------------| | style | Component style variant (default or new-york) | | tailwind.baseColor | Base color for the theme (slate, gray, zinc, etc.) | | tailwind.cssVariables | Whether to use CSS variables for theming | | aliases.components | Import path alias for components | | aliases.utils | Import path alias for utility functions |

Theme Customization

Customize the default theme by editing your CSS variables or asking the agent to adjust colors:

/* Example: Custom theme variables in globals.css */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
  }
}

Important: shadcn/ui components are copied into your project's source code. You have full control over every component — there are no hidden dependencies or locked abstractions.

shadcn/ui Skill Usage Examples

1. Add a Complete Form

You: "Create a user registration form with fields for name, email, password, and a terms checkbox. Add validation using zod."

The agent installs the required components (form, input, checkbox, button, label) using npx shadcn@latest add, then generates a complete form component with zod schema validation, error messages, and accessible labels. The form follows React Hook Form patterns and is ready to connect to your API.

2. Build a Data Table

You: "Add a data table for displaying users with columns for name, email, role, and status. Include sorting, filtering, and pagination."

The agent adds the table component and builds a full-featured data table using @tanstack/react-table. It generates column definitions, filter controls, sort handlers, and pagination — all with proper TypeScript types and accessibility attributes.

3. Create a Dashboard Layout

You: "Set up a dashboard layout with a collapsible sidebar, top navigation bar, breadcrumbs, and a main content area."

The agent installs sidebar, navigation-menu, breadcrumb, and separator components, then assembles them into a responsive layout with mobile-friendly sidebar toggle and proper semantic HTML structure.

4. Add a Command Palette

You: "Add a command palette like VS Code with Ctrl+K shortcut that lets users search for pages and actions."

The agent installs the command and dialog components, sets up the keyboard shortcut listener, and creates a searchable command menu with grouped items, icons, and navigation handlers.

5. Compose a Settings Page

You: "Build a settings page with tabs for Profile, Account, Notifications, and Appearance. Use cards within each tab for grouping related options."

The agent installs tabs, card, switch, select, and separator components, then builds a complete settings interface with form fields, toggles, and dropdown selectors organized into logical tab groups.

Security & Best Practices

Follow these guidelines when using the shadcn/ui skill:

• Review generated code. The agent generates component code directly in your project. Always review new files and changes before committing, especially form handlers and API integrations.
• Validate user input. shadcn/ui provides UI components, not input validation. Always pair forms with server-side validation using libraries like zod or yup, and sanitize inputs before processing.
• Keep dependencies updated. shadcn/ui components depend on Radix UI primitives and other packages. Run npm audit periodically and update vulnerable dependencies.
• Use semantic HTML. The agent generates accessible markup by default, but verify that custom modifications preserve ARIA attributes and keyboard navigation.
• Follow the component pattern. Keep shadcn/ui components in your designated components directory (e.g., components/ui/). Avoid modifying them inline — extend them through composition instead. Review the Safety Checklist for general OpenClaw guidance.

Troubleshooting Common Errors

"components.json not found"

Your project has not been initialized with shadcn/ui yet.

# Initialize shadcn/ui in your project
npx shadcn@latest init

Follow the prompts to select your style, base color, and import aliases. The agent can also run this for you.

"Module not found: Can't resolve '@/components/ui/button'"

The import path alias does not match your project configuration.

1. Check your components.json for the configured alias path.
2. Verify your tsconfig.json has matching path aliases:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3. If using Next.js, restart the dev server after changing tsconfig.json.

"Tailwind CSS classes not applying"

Tailwind is not processing the component files directory.

1. Verify your tailwind.config.js includes the components path:

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
}

2. Ensure globals.css imports Tailwind directives (@tailwind base; @tailwind components; @tailwind utilities;).
3. Restart the development server.