Framer Motion skill

O que ela faz

A skill é um guia de boas práticas que o Claude segue ao animar com o Motion, o novo nome do Framer Motion. Ela manda importar do pacote certo (motion/react) e animar só posição, escala, rotação e opacidade, que a placa de vídeo acelera, em vez de largura, altura ou margem.

Traz os padrões prontos: lista que aparece item por item, transição entre páginas, elemento que viaja de um lugar pro outro, botão que cresce no hover e encolhe no clique, parallax na rolagem e animação de saída de modal.

Também cuida do desempenho no React (guardar as variantes, não criar estilo novo a cada render) e da acessibilidade: com o useReducedMotion, quem pediu menos movimento no sistema vê a página sem o movimento. A meta é 60 quadros por segundo, testando em celular de verdade.

Nas palavras de quem fez

Quando usar

• Dar movimento de entrada às seções de uma landing page em Next.js
• Animar o abrir e fechar de modal, menu ou aba
• Fazer parallax ou animação ligada à rolagem
• Consertar animação que engasga no celular

Depois de instalar, é só pedir assim

• Anima as seções da minha landing pra entrarem suaves quando a pessoa rola, com Motion
• Faz os cards de preço aparecerem um depois do outro e o botão crescer no hover
• Essa animação do menu tá travando no celular. Arruma seguindo as boas práticas do Motion

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