Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Building Components skill
Guia a criação de componentes de interface modernos, acessíveis e componíveis
- instalações
- 14,7 mil
- estrelas no GitHub
- 800
- No skills.sh desde
- fevereiro de 2026
- Licença
- Própria
Atualizada no GitHub em 20 de agosto de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
Nas palavras de quem fez
Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs,…
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 Building Components 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 Building Components, 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.
Levar essa skill
1x building-componentsR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/vercel/components.build
Aprenda a usar
- Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.
Na mesma prateleira
Ver as 1.731 skills do corredorVercel
ai-
O Claude monta a tela do seu chatbot ou assistente de IA com peças prontas de conversa, mensagem, campo de pergunta e raciocínio, e você ajusta o visual.Oficial20,4 mil instalações, grátiselements Nuxt
nuxt-
O Claude escolhe o componente certo do Nuxt UI, segue as cores da sua marca e monta landing page, painel, login ou chat sem reinventar peça.OficialAuditada19,8 mil instalações, grátisui callstack
agent-
O Claude abre o seu app, toca nos botões, preenche campos e confere se a tela mostra o que devia, como um testador faria.Auditada18,7 mil instalações, grátisdevice astrolicious
astro
O Claude monta páginas e componentes .astro, configura o projeto e publica o site na hospedagem que você usa, conferindo os erros antes do build.Auditada18,2 mil instalações, grátisbenjitaylor
agentation
Você clica no elemento da página, escreve o que quer mudar, e o Claude recebe a anotação apontando o trecho certo do código.Auditada13,7 mil instalações, grátisShopify
shopify-
A antiga skill de Liquid pros temas da Shopify hoje só avisa que saiu e manda trocar pela skill shopify, que cobre o Liquid e o resto da plataforma.Oficial12,9 mil instalações, grátisliquid tanstack-skills
tanstack-
O Claude monta a busca e o cache de dados do seu app React com TanStack Query v5, com recarga, paginação e atualização otimista no lugar certo.Auditada9.900 instalações, grátisquery onmax
reka-
O Claude monta modais, menus, selects e formulários acessíveis em Vue com Reka UI, prontos pra receber o visual que você quiser.Auditada7.400 instalações, grátisui
Mais da loja Vercel
Ver a loja Vercelturborepo
O Claude mexe no turbo.json, no cache e no CI do seu monorepo seguindo a documentação exata da versão que você tem instalada.OficialAuditada84,7 mil instalações, grátisnext-
A cada mudança, o Claude abre o site no navegador e confere se compila, se roda sem erro e se faz o que você pediu, em vez de só confiar no código.OficialAuditada22,1 mil instalações, grátisdev- loop next-
Ativa o Cache Components num app Next.js e resolve as rotas bloqueantes que aparecemOficial21,3 mil instalações, grátiscache- components- adoption next-
Otimiza o que aparece na hora numa rota do Next.js, no carregamento inicial ou na navegação no clienteOficialAuditada18,8 mil instalações, grátiscache- components- optimizer next-
Ativa o Partial Prefetching em um app Next.js e trata os problemas que ele revelaOficialAuditada9.200 instalações, grátispartial- prefetching- adoption eve
Constrói agentes de IA duráveis de back-end com o framework eve: instruções, skills, ferramentas e conexõesOficialAuditada7.400 instalações, grátisvercel-
O Claude publica, configura e conserta seus projetos na Vercel pelo terminal, conferindo antes em qual projeto e equipe está mexendo.Oficial6.800 instalações, grátiscli migrate-
Migra apps do AI SDK 6.x da Vercel pro 7.0 e corrige os erros da atualizaçãoOficialAuditada5.500 instalações, grátisai- sdk- v6- to- v7 chat-
Cria bots de chat multiplataforma com o Chat SDK pra Slack, Teams e outros canaisOficialAuditada5.400 instalações, grátissdk workflow
Cria workflows duráveis com o Workflow SDK da Vercel, que sobrevivem a reinícios e esperam eventos externosOficialAuditada5.300 instalações, grátisworkflow-
Instala e configura o Vercel Workflow SDK antes de ele existir no node_modulesOficialAuditada3.800 instalações, grátisinit flags-
Implementa feature flags em Next.js ou SvelteKit com o Flags SDK: instalação, configuração e declaraçãoOficialAuditada2.600 instalações, grátissdk