83.3K+Baixar
Ir para o guia de uso
shadcn-uipor Google Labs

shadcn UI Skill.

Uma skill de Claude Code e Codex para design de UI: integração e customização de componentes shadcn/ui: descoberta, instalação, melhores práticas.

  • Web & UI
  • Código de UI
Baixar OpenDesignVer guia de uso
google-labs-code/stitch-skills · plugins/stitch-build/skills/shadcn-ui/SKILL.mdSKILL.md
--- name: shadcn-ui description: Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices. --- ## Core Principles ## Component Discovery and Installation ## Project Setup ## Component Architecture ## Customization Best Practices ## Blocks and Complex Components
Front matter e títulos de seção lidos do arquivo original em 2026-09-14 · 9.117 caracteres no total

01 O que faz

O que o Skill shadcn-ui 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

Este skill fornece a um agente orientação especializada para construir aplicações com shadcn/ui, a coleção de componentes acessíveis e personalizáveis construídos com Radix UI ou Base UI e Tailwind CSS. Abrange a descoberta de componentes por meio das ferramentas MCP do shadcn, instalação via CLI ou integração manual, configuração de projeto pelos comandos create e init, e as opções do components.json como style, baseColor, cssVariables, rsc e rtl.

Ele explica a estrutura de arquivos em components/ui/ e o helper cn(), e depois a personalização por meio de variáveis CSS em app/globals.css, variantes de class-variance-authority e componentes wrapper. Os blocos são organizados por categoria, seguidos de regras de acessibilidade, padrões comuns de formulário, diálogo e tabela, solução de problemas e uma lista de validação em cinco etapas.

O que ele produz

  • Arquivos-fonte de componentes gravados em components/ui/ e conectados às suas importações.
  • Um components.json atualizado refletindo a configuração e os componentes adicionados.
  • Código-fonte de blocos obtido para interfaces com vários arquivos, como dashboards ou fluxos de login.
  • Seus próprios arquivos de componentes wrapper, por exemplo components/custom-button.tsx.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Navegue Primeiro pelo Catálogo

    Explore os componentes disponíveis usando as ferramentas shadcn MCP em vez de adivinhar nomes, com list_components, get_component_metadata e get_component_demo.

  2. 02
    Adicione o Componente com a CLI

    O caminho recomendado é o comando add, que baixa o código-fonte adaptado à sua configuração, instala as dependências e coloca os arquivos em components/ui/.

  3. 03
    Ou Integre o Código Manualmente

    Para a integração manual, obtenha o código com get_component, crie o arquivo você mesmo, instale as dependências peer e ajuste os imports.

  4. 04
    Inicialize a Configuração do Projeto

    Projetos novos usam create para escolher estilo, fontes e biblioteca de componentes; projetos existentes executam init, que gera o components.json.

  5. 05
    Aplique o Tema com Variáveis CSS

    As cores ficam na configuração do Tailwind e em variáveis CSS, com um bloco .dark fornecendo os ajustes do modo escuro.

  6. 06
    Valide Antes de Fazer o Commit

    Verifique tipos, execute o lint, teste a acessibilidade, confira os modos claro e escuro e valide os breakpoints.

02 Encontre o ideal para você

Quando Usar o Skill shadcn-ui

Use o skill shadcn-ui no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são retirados do próprio arquivo do skill.

Boa Combinação

  • Iniciando um novo projeto em que estilo, fontes e biblioteca de componentes devem ser escolhidos desde o início.
  • Adaptando o shadcn/ui a uma base de código existente que precisa de uma configuração components.json.
  • Trabalhando com um registro privado ou de equipe declarado em components.json, ou navegando pelo Registry Directory público.
  • Montando telas maiores, como fluxos de autenticação ou dashboards, a partir de blocos pré-construídos.
  • Projetos em que a navegação por teclado, os atributos ARIA e o gerenciamento de foco são inegociáveis.

Conheça os Limites

  • As versões de componentes e primitivos variam, então atualizações podem falhar e exigir a verificação das notas de versão.

O Que Fornecer

  • Biblioteca de primitivosEscolha Radix UI ou Base UI; o código-fonte baixado é adaptado a essa escolha.
  • Nomes de registrosQuando mais de um registro além do padrão estiver configurado, liste o que está disponível antes de obter itens dele.
  • Categoria de blocosUm filtro de categoria opcional restringe quais blocos são listados antes de buscar seu código-fonte.

03 Dentro da skill

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

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

  1. Assuma a Responsabilidade pelo Código do Componente

    Trate os componentes como código-fonte que você copiou e pode reescrever, não como uma dependência a ser atualizada por completo; você pode alterar estilo, comportamento e estrutura livremente.

  2. Mantenha Wrappers Fora de Components/ui/

    Componentes compostos ou estendidos ficam em components/, nunca em components/ui/, que contém os próprios componentes shadcn.

  3. Combine Classes com Cn()

    Todo componente shadcn usa o helper cn(), uma combinação de clsx e tailwind-merge, para que as sobrescritas não entrem em conflito.

  4. Expresse Variantes com Cva

    A lógica de variante e tamanho pertence ao class-variance-authority, com defaultVariants declarando qual variante e tamanho se aplicam quando nenhum é passado.

  5. Preserve a Acessibilidade ao Personalizar

    Mantenha os atributos ARIA, preserve os manipuladores de teclado, teste com leitores de tela e mantenha indicadores de foco visíveis.

  6. Respeite os Requisitos de Runtime

    O shadcn/ui v4 requer React 18+ e, em projetos Next.js, Next.js 13+; alguns componentes também fixam versões específicas do Radix UI.

  7. Instale as Dependências de Pares Você Mesmo ao Optar pela Instalação Manual

    A integração manual significa que você resolve as dependências de pares e corrige os imports manualmente, em vez de deixar a CLI fazer isso.

04 Coloque em prática

Instalar shadcn-ui 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-ui 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/google-labs-code/stitch-skills --skill shadcn-ui

Forma genérica da CLI skills para plugins/stitch-build/skills/shadcn-ui/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
Set up shadcn/ui in my existing [Next.js app] with the new-york style and zinc base color, then add Button, Card and Dialog. Use the login block for the sign-in page, and wrap Button in a LoadingButton in components/ that shows a spinner while [the form submission] is pending. Keep the ARIA attributes and keyboard handling intact.

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 o linter do projeto para detectar problemas de estilo no código copiado.
  • Verifique a acessibilidade com ferramentas como o axe DevTools.
  • Faça uma revisão visual nos modos claro e escuro.
  • Verifique o comportamento em diferentes breakpoints.

No OpenDesign o shadcn-ui já vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer 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
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Arquivo da skill
plugins/stitch-build/skills/shadcn-ui/SKILL.md Checksum do conteúdo registrado na verificação; commit 0337446
License
Apache-2.0 De LICENSE.
Estrelas do repositório
8.304 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório google-labs-code/stitch-skills, que contém 12 skills neste catálogo. Não é uma classificação ou contagem de uso para shadcn-ui.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. Princípios FundamentaisPor que código copiado que você possui supera uma dependência.
  2. Descoberta e Instalação de ComponentesFerramentas MCP, CLI versus instalação manual, registros personalizados.
  3. Configuração do Projetocreate versus init, opções do components.json, dependências necessárias.
  4. Arquitetura de ComponentesLayout de diretórios e o utilitário de combinação de classes cn().
  5. Boas Práticas de PersonalizaçãoTemas com variáveis CSS, variantes cva, componentes wrapper fora de components/ui/.
  6. Blocks e Componentes ComplexosListagem, obtenção e instalação de blocks multiarquivo por categoria.
  7. AcessibilidadeComportamento de teclado, ARIA, foco e desabilitado com base em Radix a ser preservado.
  8. Padrões ComunsReceitas de importação para formulários, diálogos e tabelas de dados.
  9. Solução de ProblemasCorreções para problemas de importação, conflito de estilo, dependência e versão.
  10. Validação e QualidadeCinco verificações pré-commit, da checagem de tipos ao QA responsivo.
  11. RecursosArquivos de referência de configuração, catálogo, personalização e migração.
  12. ExemplosImplementações de exemplo, além de padrões de formulário, dashboard, autenticação e tabela de dados.
A Descrição da Própria Skill
"Orientação especializada para integração e desenvolvimento de aplicações com componentes shadcn/ui, incluindo descoberta, instalação, personalização e boas práticas."

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

06 Antes de instalar

Perguntas Sobre a Skill shadcn-ui

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Radix UI ou Base UI?

Qualquer um dos dois. Você escolhe a primitiva na sua configuração e a CLI adapta o código-fonte baixado de acordo. As garantias de acessibilidade descritas estão ligadas a componentes construídos sobre primitivas do Radix UI.

shadcn UI

Execute shadcn-ui em uma Tarefa Real de Design de UI.

O skill shadcn-ui vem incluído no OpenDesign. Baixe o app, selecione o skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui