Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Framer Motion skill
Orienta a otimizar o desempenho de animações React feitas com Framer Motion
- instalações
- 1.100
- estrelas no GitHub
- 218
- No skills.sh desde
- fevereiro de 2026
- Licença
- MIT
Atualizada no GitHub em 15 de agosto de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
Nas palavras de quem fez
Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to…
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 Framer Motion 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 Framer Motion, 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 framer-motionR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/pproenca/dot-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 corredorMastra
tailwind-
O Claude estiliza as telas do Playground do Mastra só com os componentes e tokens do design system, sem inventar cor, tamanho ou componente novo.OficialAuditada2.000 instalações, grátisbest- practices secondsky
aceternity-
O Claude monta topo com fundo animado, cards 3D, rolagem com parallax e texto que se digita na sua página em Next.js, sem tropeçar na instalação.Auditada1.500 instalações, grátisui magicuidesign
magic-
Sua página ganha movimento no topo, na prova social e no botão de compra sem perder leitura, acessibilidade nem o layout no celular.Auditada1.200 instalações, grátisui davila7
mui
As telas do seu app em Material UI saem com o tema da marca, espaçamento consistente e layout que se ajusta do celular ao monitor.Auditada1.100 instalações, grátisGitHub
anti-
O Claude parte do seu produto e dos seus componentes pra montar telas web e iOS com identidade própria, com todos os estados e uma conferência final.Oficial975 instalações, grátisui- slop heyman333
apple-
O Claude redesenha as telas do seu app pra parecerem feitas pela Apple: limpas, calmas, com fonte do sistema e componentes que quem usa iPhone já conhece.Auditada865 instalações, grátisui- designer draw-
O Claude desenha e arruma diagramas do draw.io, alinha caixas e setas pelo código e entrega o PNG pronto pra slide ou documento.Auditada842 instalações, grátisio existential-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
Mais da loja pproenca
Ver a loja pproencapproenca
zod
O Claude valida formulário, API e JSON com Zod do jeito certo, com tipos que batem e erros que o usuário entende.Auditada7.000 instalações, grátisvitest
Ensina o agente a testar com Vitest: setup, testes assíncronos, mocks com vi.*, snapshots e desempenhoAuditada6.100 instalações, grátisreact-
Formulário de cadastro, checkout ou orçamento em React que responde rápido, valida certo e mostra o erro do servidor sem gambiarra.Auditada3.000 instalações, grátishook- form emilkowal-
Aplica as boas práticas de animação de Emil Kowalski em React, CSS e Framer MotionAuditada2.800 instalações, grátisanimations nuqs
Aplica boas práticas do nuqs para guardar o estado da URL com tipos em Next.js e ReactAuditada2.300 instalações, grátisclean-
Aplica os princípios de Clean Architecture de Robert C. Martin ao projetar e revisar sistemasAuditada2.000 instalações, grátisarchitecture typescript
Otimiza o desempenho do TypeScript: tsconfig, erros de tipo, padrões assíncronos e compilação mais rápidaAuditada1.700 instalações, grátiscode-
Simplifica código pra ficar mais claro e fácil de manter, sem mudar o comportamentoAuditada1.600 instalações, grátissimplifier expo-
Aplica boas práticas de performance em apps Expo e React Native ao escrever e refatorar códigoAuditada1.500 instalações, grátisreact- native- performance nextjs
O Claude escreve e revisa seu site em Next.js 16 seguindo 45 regras, sem repetir o jeito do Next 15 que já não vale.Auditada1.200 instalações, grátisplaywright
Orienta testes end-to-end com Playwright em aplicações Next.jsAuditada1.100 instalações, grátiswxt-
Orienta a otimizar o desempenho de extensões de navegador feitas com WXTAuditada1.100 instalações, grátisbrowser- extensions