Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Web Component Design skill
Monta componentes de interface reutilizáveis em React, Vue e Svelte, com CSS-in-JS e composição
- instalações
- 13,2 mil
- estrelas no GitHub
- 41,7 mil
- No skills.sh desde
- janeiro de 2026
- Licença
- MIT
Atualizada no GitHub em 26 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
Nas palavras de quem fez
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI…
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 Web Component Design 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 Web Component Design, 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 web-component-designR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/wshobson/agents
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 corredorNuxt
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 sickn33
nextjs-
O Claude organiza seu site em Next.js com componente no servidor por padrão, cache certo e as telas de carregamento e erro que costumam faltar.Auditada7.400 instalações, grátisbest- practices
Mais da loja wshobson
Ver a loja wshobsonwshobson
typescript-
O Claude escreve tipos de TypeScript que acusam o erro antes do código rodar, em vez de encher o projeto de any.Auditada92,9 mil instalações, grátisadvanced- types tailwind-
As cores, os cantos e os componentes do seu site ficam definidos num lugar só, e o Claude faz as telas novas sempre no mesmo padrão.Auditada70,4 mil instalações, grátisdesign- system nodejs-
Constrói serviços back-end em Node.js com Express ou Fastify: middleware, erros, autenticação e bancoAuditada48,7 mil instalações, grátisbackend- patterns python-
Cria estratégias de teste em Python com pytest, fixtures, mocks e TDDAuditada37,1 mil instalações, grátistesting- patterns python-
Perfila e acelera código Python com cProfile e profilers de memória, achando os gargalosAuditada35,8 mil instalações, grátisperformance- optimization nextjs-
Ensina o agente a usar o App Router do Next.js 14+: Server Components, streaming e rotas paralelasAuditada32,6 mil instalações, grátisapp- router- patterns api-
Ensina a projetar APIs REST e GraphQL intuitivas, escaláveis e fáceis de manterAuditada30,4 mil instalações, grátisdesign- principles code-
Ensina a revisar código com feedback construtivo, pegando bugs cedo e mantendo o moral do timeAuditada30,3 mil instalações, grátisreview- excellence postgresql-
Ensina a projetar e revisar schemas PostgreSQL: tipos de dados, índices, constraints e desempenhoAuditada27,9 mil instalações, grátistable- design fastapi-
Cria projetos FastAPI prontos para produção, com código assíncrono, injeção de dependência e erros tratadosAuditada25,9 mil instalações, grátistemplates security-
Deriva requisitos de segurança a partir de modelos de ameaça e do contexto do negócioAuditada25,1 mil instalações, grátisrequirement- extraction mobile-
Ensina Material Design 3 e Jetpack Compose para criar apps Android nativosAuditada25 mil instalações, grátisandroid- design