Nos termos do próprio skill
Um skill de construção, não de auditoria: transforma um pedido de movimento em uma implementação que sobreviveria a uma revisão rigorosa, seguindo uma sequência fixa — se deve ou não animar, propósito, ferramenta, propriedades, curva e duração, interrupção, saída — e então escreve o código.
É para designers e desenvolvedores que querem a decisão tomada, e não um menu de opções. Os detalhes vêm de tabelas rígidas: níveis de frequência, apenas transform e opacity, curvas cubic-bezier nomeadas, faixas de duração por elemento, e gating de reduced-motion e hover entregue junto com a animação. Para auditar uma base de código ou criticar um diff, use os skills irmãos.
Como funciona
- 01Filtre pela frequência primeiro
A primeira etapa pode encerrar o trabalho antes de existir qualquer código: qualquer coisa aberta 100+ vezes por dia, ou acionada por atalho de teclado, não recebe animação alguma.
- 02Nomeie o propósito em uma palavra
Sem propósito, sem animação. Pedir animação só porque fica bonito, em um elemento que o usuário vê o tempo todo, é motivo para parar em vez de construir.
- 03Use a ferramenta mais barata que funciona
Percorra a tabela de ferramentas e pare na primeira que servir: CSS transition, @starting-style, CSS animation, WAAPI, Motion.
- 04Restrinja as propriedades
Transform e opacity fazem o trabalho porque ignoram layout e paint e rodam na GPU; clip-path é a quarta opção autorizada, e animar height só é tolerado em acordeões.
- 05Fixe curva e duração a partir das tabelas
Entrada e saída pedem ease-out; movimento em tela, ease-in-out; hover e mudanças de cor, ease; movimento constante, linear; padrão, ease-out.
- 06Planeje a interrupção e a saída
Elementos acionados repetidamente usam transitions, gestos usam springs, e a saída espelha a entrada para que o deslizar para dispensar seja óbvio.