Shadcn UI skill

O Claude escolhe, instala e ajusta os componentes do shadcn/ui no seu projeto, com as cores da sua marca, modo escuro e acessibilidade.

por Google LabsPublicada pela própria empresa

instalações: 53,4 mil
estrelas no GitHub: 8.594
No skills.sh desde: fevereiro de 2026
Licença: Apache-2.0

Atualizada no GitHub em 17 de agosto de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

Google Labs
shadcn-ui
O Claude escolhe, instala e ajusta os componentes do shadcn/ui no seu projeto, com as cores da sua marca, modo escuro e acessibilidade.OficialAuditada53,4 mil instalações, grátis

O que ela faz

A skill faz o Claude trabalhar como um dev de front que conhece o shadcn/ui, a coleção de componentes de React que você copia pro projeto em vez de instalar como biblioteca. O código fica na pasta components/ui e é seu pra mudar.

Ele procura o componente no catálogo (pelas ferramentas MCP do shadcn, quando estão ligadas), instala com npx shadcn add, começa projeto novo com create ou prepara um que já existe com init, e usa blocos prontos de login, dashboard, barra lateral e calendário.

Na personalização, mexe nas variáveis de cor do globals.css, cria variações de botão e monta versões próprias (um botão com estado de carregando, por exemplo) em outra pasta, sem tocar nos originais. Antes de fechar, roda checagem de tipos e lint e confere modo claro, escuro e tamanhos de tela.

Nas palavras de quem fez

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best…

Google Labs, no SKILL.md

Quando usar

Começar um app ou painel em Next.js já com botões, formulários e tabelas bem feitos
Pôr uma tela de login ou um dashboard pronto no projeto
Trocar as cores do app pelas da sua marca, com modo escuro
Montar um formulário com validação ou uma janela modal

Depois de instalar, é só pedir assim

Cria um projeto Next.js com shadcn/ui e monta uma tela de login com e-mail e senha
Adiciona uma tabela de clientes com shadcn no meu painel e muda a cor principal pro verde da minha marca
Põe um botão com estado de carregando no formulário de cadastro

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Shadcn UI no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Shadcn UI, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa ter no projeto?

React 18 ou mais novo e Tailwind CSS. O resto (Radix UI ou Base UI, class-variance-authority, clsx e tailwind-merge) o comando do shadcn instala junto. Não tem chave de API nem serviço pago.

Precisa do MCP do shadcn?

Ajuda a navegar pelo catálogo e pelos blocos, mas não é obrigatório: sem ele, o Claude instala os componentes pelo terminal com npx shadcn@latest add.

Roda no Codex e no Antigravity?

Roda: o trabalho é comando de terminal e edição de arquivo, que qualquer agente com skills faz. Só não serve pra projeto sem React, como um site em WordPress.

Levar essa skill

1x shadcn-uiR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/google-labs-code/stitch-skills

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.