shadcnpor shadcn

shadcn Skill.

Uma skill de Claude Code e Codex para design de UI: adiciona, busca, corrige, estiliza e compõe componentes shadcn em um projeto.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de uso

shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md

--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields

Front matter e títulos de seção lidos do arquivo original em 2026-09-14 · 19.427 caracteres no total

01 O que faz

O que a Skill shadcn Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Esta skill gerencia projetos shadcn/ui adicionando, buscando, corrigindo e compondo componentes. Ela injeta o contexto ativo do projeto a partir de components.json, aplica regras específicas do framework para formulários, estilização, composição, ícones e interfaces de chat, e usa a shadcn CLI para todas as operações. Os componentes são instalados como código-fonte via npx shadcn@latest (ou o executor de pacotes do projeto).

A skill se aplica ao trabalhar com shadcn/ui, registries de componentes, códigos predefinidos ou qualquer projeto com um arquivo components.json. Ela cobre diretivas RSC, Tailwind v3/v4, primitivas Base UI vs Radix, detecção de biblioteca de ícones e layouts de monorepo. Cada comando referencia os aliases reais do projeto, o gerenciador de pacotes e os caminhos resolvidos.

O que ele produz

Arquivos de código-fonte dos componentes shadcn adicionados ao caminho de UI resolvido do projeto
Arquivos de componentes mesclados durante atualizações, preservando alterações locais ao aplicar atualizações upstream

Veja o exemplo de prompt ↗

Como funciona

01
Injetar Contexto do Projeto
Executa npx shadcn@latest info --json para obter a configuração do projeto, os componentes instalados, os aliases, a flag RSC, a versão do Tailwind, a biblioteca de ícones, a base (radix ou base) e os caminhos resolvidos.
02
Buscar em Registries Antes de Escrever UI Personalizada
Usa npx shadcn@latest search para verificar no registry do shadcn e em registries da comunidade se já existem componentes que atendam à necessidade.
03
Buscar Documentação e Exemplos de Componentes
Executa npx shadcn@latest docs <component> para obter documentação e URLs de exemplo, e então as consulta para verificar o uso correto da API antes de criar ou corrigir um componente.
04
Adicionar ou Atualizar Componentes com a CLI
Usa npx shadcn@latest add para instalar componentes.
05
Corrigir Importações em Componentes de Terceiros
Após adicionar componentes de registries da comunidade, verifica arquivos que não são de UI em busca de caminhos fixos como @/components/ui/...
06
Revisar e Verificar Componentes Adicionados
Lê todos os arquivos adicionados para verificar sub-componentes ausentes, composição incorreta, violações de regras críticas e importações de ícones incompatíveis.

02 Encontre o ideal para você

Quando Usar o Skill shadcn

Use a skill shadcn no Claude Code ou Codex quando o trabalho for design de UI desse tipo. Ajuste e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Construção de UI com componentes shadcn/ui em um projeto existente que tem um arquivo components.json
Inicialização de um novo projeto shadcn com um código de preset ou preset nomeado como nova ou vega
Construção de interfaces de chat ou conversação usando MessageScroller, Message, Bubble, Attachment e Marker

Conheça os Limites

Buscar manualmente arquivos de componentes do GitHub em vez de usar a CLI
Usar um registro padrão quando o usuário não especifica qual usar
Usar --overwrite para atualizar componentes sem a aprovação explícita do usuário
Inventar capacidades, integrações ou nomes de arquivos não presentes no contexto do projeto

O Que Fornecer

Nome do componente ou blocoO nome de um componente shadcn (button, dialog, select) ou de um item de registro (@magicui/shimmer-button, owner/repo/item) a adicionar ou buscar.
Código de preset ou preset nomeadoUma string base62 prefixada com versão (ex.: a2r6bw) de ui.shadcn.com, ou um preset nomeado (nova, vega, maia, lyra, mira, luma) para init ou apply.

03 Dentro da skill

Regras que a Skill shadcn Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Use gap-, Nunca space-x- ou space-y-*
Para espaçamento entre filhos flex, use gap-. Para pilhas verticais, use flex flex-col gap-. space-x- e space-y- nunca são permitidos.
Formulários Usam FieldGroup + Field
Layouts de formulário devem usar os componentes FieldGroup e Field. Nunca use div bruto com space-y- ou grid gap- para layout de formulário.
Ícones em Botões Usam data-icon
Ícones dentro de Button devem ter data-icon="inline-start" ou data-icon="inline-end". Nenhuma classe de dimensionamento como size-4 ou w-4 h-4 em ícones dentro de componentes.
Itens Sempre Dentro do Seu Grupo
SelectItem vai dentro de SelectGroup, DropdownMenuItem dentro de DropdownMenuGroup, CommandItem dentro de CommandGroup. Nunca renderize itens diretamente.
Use Tokens de Cor Semânticos, Não Valores Brutos
Use bg-primary, text-muted-foreground, etc. Nunca use cores brutas do Tailwind como bg-blue-500 ou text-emerald-600. Nenhuma sobrescrita manual de cor dark:.
Dialog, Sheet e Drawer Sempre Precisam de um Título
DialogTitle, SheetTitle e DrawerTitle são obrigatórios para acessibilidade. Use className="sr-only" se o título deve ser ocultado visualmente.
Nunca Decodifique Códigos de Preset Manualmente
Use npx shadcn@latest preset decode <code>, preset url <code>, ou preset open <code>. Para detecção de preset com reconhecimento do projeto, use preset resolve. Nunca construa URLs de preset manualmente.
Execute Todos os Comandos CLI com o Package Runner do Projeto
Use npx shadcn@latest, pnpm dlx shadcn@latest, ou bunx --bun shadcn@latest de acordo com o campo packageManager do projeto. Nunca fixe npx se o projeto usa pnpm ou bun.

04 Coloque em prática

Instalar shadcn no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar shadcn ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

Forma genérica do CLI skills para skills/shadcn/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Execute npx shadcn@latest info para verificar que o componente foi adicionado à lista de componentes instalados
Verifique se as importações de ícones correspondem ao campo iconLibrary do projeto (lucide-react, @tabler/icons-react, etc.)

No OpenDesign importe o shadcn a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: shadcn
Repository: github.com/shadcn-ui/ui Branch main
Arquivo da skill: skills/shadcn/SKILL.md Checksum do conteúdo registrado na verificação; commit 2b3e6d4
License: MIT De LICENSE.md.
Estrelas do repositório: 123.708 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório shadcn-ui/ui. Não é uma avaliação ou contagem de uso do shadcn.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Contexto Atual do ProjetoInjeta a configuração do projeto em tempo real e os componentes instalados a partir de npx shadcn@latest info --json
PrincípiosUse primeiro os componentes existentes, componha em vez de reinventar, use variantes integradas, use cores semânticas
Regras CríticasRegras sempre aplicadas para estilização, formulários, composição, ícones, chat e CLI, com links para arquivos detalhados
Padrões-ChaveOs padrões de código mais comuns: layout de formulário, validação, ícones em botões, espaçamento, dimensões iguais, cores de status
Seleção de ComponentesTabela que mapeia necessidades de UI para os componentes shadcn corretos (botões, formulários, overlays, feedback, navegação, chat)
Campos-ChaveExplica aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths, framework, packageManager, preset do contexto do projeto
Documentação, Exemplos e Uso de ComponentesExecute npx shadcn@latest docs para obter URLs, busque-as para padrões corretos de API e uso
Fluxo de trabalhoProcesso em nove etapas: obter contexto, verificar o que está instalado, pesquisar, obter a documentação, instalar, corrigir imports, revisar, tratar registries, trocar presets
Atualizando ComponentesUse --dry-run e --diff para mesclar mudanças upstream preservando modificações locais; nunca use --overwrite sem aprovação
Referência RápidaExemplos de comandos CLI para init, apply, add, search, docs, view, operações de preset com flags e sintaxe de registry
Referências DetalhadasLinks para arquivos de regras separados sobre formulários, composição, chat, ícones, estilização, base-vs-radix, CLI, registry, personalização

A Descrição da Própria Skill

"Gerencia componentes e projetos shadcn — adicionando, buscando, corrigindo, debugando, estilizando e compondo UI, incluindo interfaces de chat. Fornece contexto de projeto, documentação de componentes e exemplos de uso. Aplica-se ao trabalhar com shadcn/ui, registros de componentes, presets, códigos --preset ou qualquer projeto com arquivo components.json. Também é acionado para \"shadcn init\", \"criar um app com --preset\" ou \"mudar para --preset\"."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 19.427 caracteres. Leia o arquivo completo no GitHub.

shadcn

Execute shadcn em uma tarefa real de design de UI.

Baixe o OpenDesign, importe shadcn pelo link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

O que a Skill shadcn Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar o Skill shadcn

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que a Skill shadcn Dá ao Claude Code e ao Codex

Use gap-, Nunca space-x- ou space-y-*

Formulários Usam FieldGroup + Field

Ícones em Botões Usam data-icon

Itens Sempre Dentro do Seu Grupo

Use Tokens de Cor Semânticos, Não Valores Brutos

Dialog, Sheet e Drawer Sempre Precisam de um Título

Nunca Decodifique Códigos de Preset Manualmente

Execute Todos os Comandos CLI com o Package Runner do Projeto