Shadcn Svelte skill

O Claude monta formulários, painéis e janelas no Svelte com os componentes do shadcn-svelte, do jeito que a documentação manda.

por huntabyte

instalações: 6.700
estrelas no GitHub: 9.209
No skills.sh desde: abril de 2026
Licença: MIT

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

huntabyte
shadcn-svelte
O Claude monta formulários, painéis e janelas no Svelte com os componentes do shadcn-svelte, do jeito que a documentação manda.Auditada6.700 instalações, grátis

O que ela faz

Guia o Claude em projetos Svelte com shadcn-svelte, em que os componentes entram como código-fonte pela CLI. Ele lê o components.json pra saber caminhos, estilo e biblioteca de ícones, confere o que já está instalado e só então roda init, add ou update com o gerenciador de pacotes do projeto.

Traz regras fixas com exemplos de certo e errado: componente pronto antes de div estilizada, cor semântica em vez de bg-blue-500, gap no lugar de space-y, formulário com Field, aviso com Alert, toast pelo svelte-sonner e título obrigatório em Dialog, Sheet e Drawer por acessibilidade.

Tem uma tabela de qual componente usar pra cada necessidade (botão, tabela, menu, painel lateral, gráfico, paleta de comandos) e manda ler a página oficial do componente antes de criar ou consertar. Pra atualizar, pede pra salvar o trabalho antes e revisar a diferença depois.

Nas palavras de quem fez

Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and…

huntabyte, no SKILL.md

Quando usar

Começar um projeto Svelte com um tema do construtor de presets
Montar uma tela de configurações com abas, cartões e formulário
Adicionar um componente de outro registro por URL e acertar os imports
Atualizar os componentes instalados pra versão mais nova
Arrumar um formulário com validação e mensagens de erro acessíveis

Depois de instalar, é só pedir assim

Monta uma página de configurações com abas de Perfil e Notificações usando os componentes do shadcn-svelte
Adiciona dialog, select e sonner no projeto e cria um modal de confirmar exclusão
Atualiza todos os componentes do shadcn-svelte e me mostra o que mudou

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 Svelte 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 Svelte, 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 pra funcionar?

Um projeto Svelte com Tailwind e o Node com npx, pnpm ou bun. Se o shadcn-svelte ainda não estiver no projeto, o Claude roda o init, que cria o components.json. A CLI roda com npx shadcn-svelte@latest, sem conta nem chave.

Serve pra React?

Não. É a versão pra Svelte do shadcn. Os imports, a forma de compor os componentes e os ícones, como o @lucide/svelte, são do Svelte.

Roda no Codex e no Antigravity?

Sim. A skill é texto, usa a CLI do shadcn-svelte no terminal e lê a documentação no site oficial, coisas que funcionam em qualquer um dos três.

Levar essa skill

1x shadcn-svelteR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/huntabyte/shadcn-svelte

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.