Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Interaction Design skill
Cria microinterações, animações, transições e feedback visual pra dar acabamento à interface
- instalações
- 16,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
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading…
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 Interaction 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 Interaction 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 interaction-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
- 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 corredorGitHub
excalidraw-
O Claude transforma uma descrição em português num arquivo .excalidraw com caixas, setas e cores, pronto pra abrir e ajustar no Excalidraw.OficialAuditada31,7 mil instalações, grátisdiagram- generator Google Labs
stitch-
Você descreve a tela do seu jeito e o Claude pede ao Stitch uma versão caprichada, coerente com o resto do projeto, e baixa o HTML e a imagem.Oficial25,1 mil instalações, grátisdesign ibelick
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 taste-
Um DESIGN.md com regras exatas de cor, fonte e layout pro Google Stitch gerar telas que não parecem feitas por IA.OficialAuditada20,2 mil instalações, grátisdesign Expo
expo-
O Claude decide primeiro se vale animar e depois escreve a animação do jeito que não engasga, nem em Android de três anos atrás.OficialAuditada15,4 mil instalações, grátisanimation saadeghi
daisyui
O Claude monta páginas e telas com os componentes prontos do daisyUI, usando as classes e as cores de tema do jeito certo.Auditada12,1 mil instalações, grátisreferodesign
refero-
O Claude estuda produtos de verdade antes de desenhar e entrega uma tela com direção própria, longe da cara genérica de IA.11,9 mil instalações, grátisdesign superdesigndev
superdesign
O Claude desenha versões da tela, do slide ou do post num canvas online, no estilo do seu projeto, pra você comparar, escolher e ajustar.11,2 mil instalações, grátis
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