Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Nas palavras de quem fez
Build a full-screen, interactive canvas to explore existing UI components and their variants with pan and zoom.
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 Component Canvas 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 Component Canvas, 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 component-canvasR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/ibelick/ui-skills
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.
Na mesma prateleira
Ver as 1.414 skills do corredorexistential-birds
tailwind-
O Claude monta o Tailwind 4 sem arquivo de configuração, com as cores, fontes, espaçamentos e animações da sua marca definidos direto no CSS.Auditada812 instalações, grátisv4 prisma-labs-dev
hig
O Claude responde com o que a Apple pede de fato, como área de toque de 44 pontos e Dynamic Type, antes de você mandar o app pra revisão.Auditada791 instalações, grátissickn33
antigravity-
O Claude monta landing pages e painéis com cards que flutuam, vidro fosco, profundidade e entrada animada conforme a pessoa rola a página.Auditada772 instalações, grátisdesign- expert mindrally
anime-
O Claude anima seu site com Anime.js do jeito certo: movimento que não engasga, sequências bem amarradas e respeito a quem prefere menos animação.Auditada736 instalações, grátisjs wearescientist
awesome-
O Claude escolhe o estilo de uma marca grande que combina com o seu produto e redesenha as telas com as cores, fontes e espaçamentos dela.Auditada658 instalações, grátisdesign- md prowler-cloud
tailwind-
O Claude estiliza seus componentes com as classes do Tailwind e do tema, sem cor solta no meio do código, e o visual fica fácil de manter.Auditada612 instalações, grátis4 dominikmartn
nothing-
O Claude desenha telas e painéis monocromáticos, guiados pela tipografia, com modo claro e escuro caprichados e nenhum enfeite sobrando.Auditada596 instalações, grátisdesign 199-biotechnologies
motion-
O Claude anima seu site com o Motion, sucessor do Framer Motion: entradas suaves, efeitos na rolagem e botões que respondem ao toque, sem travar.Auditada593 instalações, grátisdev- animations
Mais da loja ibelick
Ver a loja ibelickibelick
fixing-
Audita e corrige problemas de desempenho de animação: layout thrashing, scroll e efeitos de blurAuditada26,8 mil instalações, grátismotion- performance baseline-
As telas que o Claude faz saem limpas e consistentes, sem gradiente roxo, brilho e animação sobrando, e cada problema achado na revisão vem com a correção.Auditada24,2 mil instalações, grátisui fixing-
Audita e corrige acessibilidade em HTML: rótulos ARIA, teclado, foco, contraste e erros de formulárioAuditada21,9 mil instalações, grátisaccessibility fixing-
Audita e corrige metadados de HTML: títulos, descriptions, canonical, Open Graph, Twitter cards e JSON-LDAuditada18,2 mil instalações, grátismetadata improve-
Audita uma interface existente pelo próprio design e escreve planos de correção prontos para outro agenteAuditada7.900 instalações, grátisui ui-
Escolhe o menor contexto útil de UI Skills pelo CLI ui-skills antes de qualquer trabalho de interface7.100 instalações, grátisskills- root create-
O Claude lê o código ou o site e registra num DESIGN.md as cores, fontes e regras visuais, pra toda tela nova sair no mesmo padrão.Auditada4.400 instalações, grátisdesign- md