Shadcn skill

O que ela faz

Quando o projeto tem o arquivo components.json, a skill entra sozinha. Antes de tudo ela roda o CLI do shadcn pra ler a configuração: framework, versão do Tailwind, biblioteca de ícones, caminhos de importação e componentes já instalados. Com isso o Claude não importa o que não existe nem reinstala o que já está lá.

Pra montar uma tela, ela procura primeiro nos registros, o oficial e os da comunidade, antes de escrever componente do zero, e combina o que já existe: página de configurações vira Tabs, Card e campos; painel vira Sidebar, Card, Chart e Table. E segue regras fixas, como cor semântica em vez de azul cru e formulário com FieldGroup e Field.

Também cria projeto novo com preset, troca de preset perguntando antes se é pra sobrescrever, aplicar só uma parte ou mesclar, atualiza componente mostrando a diferença antes de mexer e transforma um DESIGN.md ou guia de marca num design system com página de demonstração. Nunca usa --overwrite sem você aprovar.

Nas palavras de quem fez

Quando usar

• Montar a tela de login, o painel ou a página de configurações de um app em Next.js ou Vite
• Começar um projeto novo já com um preset de visual do shadcn
• Corrigir um componente que quebrou ou ficou com a cara diferente do resto
• Atualizar componentes do shadcn sem perder o que você já mudou neles
• Transformar o guia de marca ou um DESIGN.md num design system

Depois de instalar, é só pedir assim

• Monta uma página de configurações com abas pra perfil, cobrança e notificações usando os componentes do shadcn
• Cria um app novo em Next com o preset nova e já adiciona botão, card e dialog
• Pega o DESIGN.md da pasta e aplica nas cores, fontes e bordas do shadcn

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
• SocketAlerta
• SnykPassou

Perguntas