Skill · em Construir interface

shadcn

Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.

Procedência

Origem: davila7/claude-code-templates
Caminho: cli-tool/components/skills/web-development/shadcn
Versão fixada: 57f899e5394bb8ca166f38eacae8f0853cbfe033
Licença: MIT
Espelhado em 25/09/2026
9 downloads no Claude Code Templates (lido em 25/09/2026)

Antes de instalar

13 arquivos · 68,1 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/shadcn/.

d=".claude/skills/shadcn"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-development/shadcn"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yml" "$u/agents/openai.yml" \
  -o "$d/assets/shadcn-small.png" "$u/assets/shadcn-small.png" \
  -o "$d/assets/shadcn.png" "$u/assets/shadcn.png" \
  -o "$d/cli.md" "$u/cli.md" \
  -o "$d/customization.md" "$u/customization.md" \
  -o "$d/evals/evals.json" "$u/evals/evals.json" \
  -o "$d/mcp.md" "$u/mcp.md" \
  -o "$d/rules/base-vs-radix.md" "$u/rules/base-vs-radix.md" \
  -o "$d/rules/composition.md" "$u/rules/composition.md" \
  -o "$d/rules/forms.md" "$u/rules/forms.md" \
  -o "$d/rules/icons.md" "$u/rules/icons.md" \
  -o "$d/rules/styling.md" "$u/rules/styling.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/shadcn/.

d="$HOME/.claude/skills/shadcn"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-development/shadcn"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yml" "$u/agents/openai.yml" \
  -o "$d/assets/shadcn-small.png" "$u/assets/shadcn-small.png" \
  -o "$d/assets/shadcn.png" "$u/assets/shadcn.png" \
  -o "$d/cli.md" "$u/cli.md" \
  -o "$d/customization.md" "$u/customization.md" \
  -o "$d/evals/evals.json" "$u/evals/evals.json" \
  -o "$d/mcp.md" "$u/mcp.md" \
  -o "$d/rules/base-vs-radix.md" "$u/rules/base-vs-radix.md" \
  -o "$d/rules/composition.md" "$u/rules/composition.md" \
  -o "$d/rules/forms.md" "$u/rules/forms.md" \
  -o "$d/rules/icons.md" "$u/rules/icons.md" \
  -o "$d/rules/styling.md" "$u/rules/styling.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/shadcn/.

d=".agents/skills/shadcn"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-development/shadcn"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yml" "$u/agents/openai.yml" \
  -o "$d/assets/shadcn-small.png" "$u/assets/shadcn-small.png" \
  -o "$d/assets/shadcn.png" "$u/assets/shadcn.png" \
  -o "$d/cli.md" "$u/cli.md" \
  -o "$d/customization.md" "$u/customization.md" \
  -o "$d/evals/evals.json" "$u/evals/evals.json" \
  -o "$d/mcp.md" "$u/mcp.md" \
  -o "$d/rules/base-vs-radix.md" "$u/rules/base-vs-radix.md" \
  -o "$d/rules/composition.md" "$u/rules/composition.md" \
  -o "$d/rules/forms.md" "$u/rules/forms.md" \
  -o "$d/rules/icons.md" "$u/rules/icons.md" \
  -o "$d/rules/styling.md" "$u/rules/styling.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/shadcn/.

d="$HOME/.agents/skills/shadcn"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-development/shadcn"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yml" "$u/agents/openai.yml" \
  -o "$d/assets/shadcn-small.png" "$u/assets/shadcn-small.png" \
  -o "$d/assets/shadcn.png" "$u/assets/shadcn.png" \
  -o "$d/cli.md" "$u/cli.md" \
  -o "$d/customization.md" "$u/customization.md" \
  -o "$d/evals/evals.json" "$u/evals/evals.json" \
  -o "$d/mcp.md" "$u/mcp.md" \
  -o "$d/rules/base-vs-radix.md" "$u/rules/base-vs-radix.md" \
  -o "$d/rules/composition.md" "$u/rules/composition.md" \
  -o "$d/rules/forms.md" "$u/rules/forms.md" \
  -o "$d/rules/icons.md" "$u/rules/icons.md" \
  -o "$d/rules/styling.md" "$u/rules/styling.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/shadcn/.

d=".agents/skills/shadcn"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-development/shadcn"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yml" "$u/agents/openai.yml" \
  -o "$d/assets/shadcn-small.png" "$u/assets/shadcn-small.png" \
  -o "$d/assets/shadcn.png" "$u/assets/shadcn.png" \
  -o "$d/cli.md" "$u/cli.md" \
  -o "$d/customization.md" "$u/customization.md" \
  -o "$d/evals/evals.json" "$u/evals/evals.json" \
  -o "$d/mcp.md" "$u/mcp.md" \
  -o "$d/rules/base-vs-radix.md" "$u/rules/base-vs-radix.md" \
  -o "$d/rules/composition.md" "$u/rules/composition.md" \
  -o "$d/rules/forms.md" "$u/rules/forms.md" \
  -o "$d/rules/icons.md" "$u/rules/icons.md" \
  -o "$d/rules/styling.md" "$u/rules/styling.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.gemini/antigravity-cli/skills/shadcn/.

d="$HOME/.gemini/antigravity-cli/skills/shadcn"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-development/shadcn"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yml" "$u/agents/openai.yml" \
  -o "$d/assets/shadcn-small.png" "$u/assets/shadcn-small.png" \
  -o "$d/assets/shadcn.png" "$u/assets/shadcn.png" \
  -o "$d/cli.md" "$u/cli.md" \
  -o "$d/customization.md" "$u/customization.md" \
  -o "$d/evals/evals.json" "$u/evals/evals.json" \
  -o "$d/mcp.md" "$u/mcp.md" \
  -o "$d/rules/base-vs-radix.md" "$u/rules/base-vs-radix.md" \
  -o "$d/rules/composition.md" "$u/rules/composition.md" \
  -o "$d/rules/forms.md" "$u/rules/forms.md" \
  -o "$d/rules/icons.md" "$u/rules/icons.md" \
  -o "$d/rules/styling.md" "$u/rules/styling.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.shadcn

Prévia do SKILL.md

---
name: shadcn
description: Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
user-invocable: false
risk: safe
source: https://github.com/shadcn-ui/ui/tree/main/skills/shadcn
date_added: "2026-03-07"
---

# shadcn/ui

A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.

> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.

## When to Use
- Use when adding new components from shadcn/ui or community registries.
- Use when styling, composing, or debugging existing shadcn/ui components.
- Use when initializing a new project or switching design system presets.
- Use to retrieve component documentation, examples, and API references.

## Current Project Context

```json
!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'`
```

The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.

## Principles

1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.

## Critical Rules

These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
…

Ver todo o marketplace