---
name: "shadcn-ui-cli-component-generator"
description: "Integrate copy-paste React components built on Radix UI, Tailwind CSS, and Lucide icons."
metadata:
  author: "shadcn"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "initialize shadcn ui"
  - "add shadcn component cli"
  - "customize button variants cva"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# shadcn/ui CLI Architecture & Component Customization

Configures shadcn/ui: initializing components.json, adding components via npx shadcn@latest add, customizing CSS variables in globals.css, authoring reusable variant props with cva (class-variance-authority).

## When to Invoke
Invoke this skill whenever you need to:
- initialize shadcn ui
- add shadcn component cli
- customize button variants cva

## Execution SOP & Rules
1. Run initialization: npx shadcn@latest init to generate components.json and configure path aliases (@/*).
2. Install components directly into project source: npx shadcn@latest add button dialog form.
3. Use cva() to declare variant combinations, default variants, and compound variant overrides.
4. Use cn() utility helper (clsx + tailwind-merge) to safely combine custom caller classNames.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.