Shadcn

What it does

When your agent uses it

• Working with ShadCN/UI projects including
• Initial setup and configuration
• Adding and customizing components
• Theming and styling patterns

Example prompts

• “/shadcn”

Requirements

• Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Use Variants - Never hardcode styles; always create/use component variants
2. 2CSS Variables - Theme with CSS variables in globals.css, not hardcoded colors
3. 3Composition - Build complex UIs by composing simple components
4. 4cn() Utility - Always use cn() from lib/utils.ts for conditional classes
5. 5Own Your Code - Components live in your repo; modify them as needed

What it can do on your machine

Read from SKILL.md and the folder at commit cc5591e. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • npx

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • ui.shadcn.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Shadcn loads about 1.2k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 108 tokens; SKILL.md has 333 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~108

When it runs · the whole SKILL.md, loaded when a task matches

~1.2k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~18k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mikeOnBreeze/cc-crossbeam at commit cc5591e, republished under its MIT licence (© mikeOnBreeze). 333 words, ~1,179 tokens.

name

shadcn

description

Expert guide for ShadCN UI component library with Next.js. Use when working with ShadCN/UI projects including (1) Initial setup and configuration, (2) Adding and customizing components, (3) Theming and styling patterns, (4) Avoiding common mistakes like hardcoding styles instead of using variants/design tokens. Critical for maintaining consistent, reusable component patterns instead of one-off hardcoded implementations.

/* ❌ WRONG - Colors won't work */
@theme inline {
  --color-primary: var(--primary);
}

/* ✅ CORRECT - Wrap with hsl() */
@theme inline {
  --color-primary: hsl(var(--primary));
}

npx shadcn@latest init        # Interactive setup
npx shadcn@latest init -d     # Use defaults (recommended)

npx shadcn@latest add button card dialog

import { Button } from "@/components/ui/button"

<Button variant="default" size="lg">Click me</Button>

// Hardcoded styling
<Button className="bg-blue-600 text-white px-8">Submit</Button>

// Arbitrary overrides
<Button className="!bg-red-500 !text-lg">Click</Button>

// Duplicated code
<button className="rounded-lg bg-primary px-4 py-2">Save</button>

// Use variants
<Button variant="primary" size="lg">Submit</Button>

// Create new variant in components/ui/button.tsx
variants: {
  variant: {
    danger: "bg-destructive text-destructive-foreground"
  }
}

// Use component system
<Button>Save</Button>

project/
├── components/
│   ├── ui/              # ShadCN components (YOU OWN)
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── ...
│   └── custom/          # Your extensions
├── lib/
│   └── utils.ts         # cn() utility
├── app/
│   └── globals.css      # Theme CSS variables
└── components.json      # ShadCN config

© mikeOnBreeze, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in .claude/skills/shadcn of mikeOnBreeze/cc-crossbeam.

• SKILL.md
• references/common-mistakes.md
• references/component-patterns.md
• references/setup-guide.md
• references/theming-guide.md
• references/variant-creation.md

Open the folder on GitHubat commit cc5591e