# shadcn

Guides AI agents through shadcn/ui and Radix UI best practices. Prevents broken themes and keeps component accessibility intact.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 369 installs · ★ 643
- Author: pedronauck
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/pedronauck/skills/tree/HEAD/skills/curated/shadcn/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/pedronauck-shadcn

## What it does

This skill guides your AI coding agent when generating or refactoring shadcn/ui components. It enforces semantic design tokens such as `bg-background` and `text-foreground`. Hardcoded color classes like `bg-white` or `text-black` are explicitly banned because they break light and dark theme switching.

Component exports must stay separate rather than namespaced via `Object.assign`. The skill keeps Radix UI accessibility attributes untouched, ensuring screen readers and keyboard navigation continue to work. Before completing edits, the agent runs a checklist covering tokens, keyboard navigation, `pnpm run typecheck`, and project tests.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill shadcn -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/shadcn/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/shadcn/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill shadcn -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/shadcn/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill shadcn -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/shadcn/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pedronauck/skills shadcn
```

2. **Manually: put the files in place**
- File: `.github/skills/shadcn/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill shadcn -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pedronauck/skills --path skills/curated/shadcn
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/shadcn/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill shadcn -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pedronauck/skills/tree/HEAD/skills/curated/shadcn/SKILL.md

## When to use it
- apply design tokens for dark and light theme switching
- extend existing components with new props and variants
- preserve Radix UI accessibility attributes and screen reader labels
- structure compound components using individual exports

## Example prompts
- Add a loading variant to the Button component following shadcn rules
- Build an accessible Dialog using design tokens instead of hardcoded colors
- Refactor this card into separate exported subcomponents

## Similar
- [shadcn-ui](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-shadcn-ui.md) — skill · 22400 installs
- [shadcn-component-review](https://affpapa.org/en/nevibecode/skills/shadcn-component-review.md) — skill · 635 installs
- [shadcn-layouts](https://affpapa.org/en/nevibecode/skills/shadcn-layouts.md) — skill · 457 installs
- [avoid-ai-design](https://affpapa.org/en/nevibecode/skills/avoid-ai-design.md) — skill · 641 installs
- [shadcn-svelte](https://affpapa.org/en/nevibecode/skills/shadcn-svelte.md) — skill · 6700 installs
- [ui-design-system](https://affpapa.org/en/nevibecode/skills/samhvw8-ui-design-system.md) — skill · 3200 installs

## Other versions with the same name
- [shadcn · shadcn-ui](https://affpapa.org/en/nevibecode/skills/shadcn-ui-shadcn.md) — 123300 installs
- [shadcn · bergside](https://affpapa.org/en/nevibecode/skills/typeuish-shadcn.md) — 2500 installs
- [shadcn · openai](https://affpapa.org/en/nevibecode/skills/vercel-labs-shadcn.md) — 72 installs
- [shadcn · pproenca](https://affpapa.org/en/nevibecode/skills/pproenca-shadcn.md) — 724 installs
- [shadcn · pymodel](https://affpapa.org/en/nevibecode/skills/pymodel-shadcn.md) — 458 installs

From the same set: [pedronauck/skills](https://affpapa.org/en/nevibecode/by/pedronauck/skills.md) — 6 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md