Animate skill

O que ela faz

Antes do código, a skill olha quantas vezes aquilo aparece por dia. Atalho de teclado e ação repetida mais de cem vezes por dia não animam; modal, gaveta e aviso ganham animação padrão; comemoração e primeira visita ficam com o capricho. Se não dá pra dizer pra que serve o movimento, ela não faz.

Depois escolhe a ferramenta mais simples que resolve: transição de CSS, @starting-style, animação CSS, a API de animação do navegador ou a biblioteca Motion, sem instalar biblioteca pra um simples fade. Anima só transform e opacity, usa curvas de ease-out prontas e tempos de tabela, como 150 a 250 ms pra um menu.

Cada animação já sai com a versão pra quem pede menos movimento no sistema e com hover só pra mouse, porque o toque no celular dispara hover falso. Há receitas prontas de botão, menu, tooltip, modal, gaveta, toast, acordeão, indicador de aba, revelar ao rolar e arrastar pra fechar.

Nas palavras de quem fez

Quando usar

• O menu ou o modal do site abre seco e parece amador
• Um aviso de sucesso que precisa aparecer e sumir sem travar
• Entrada em sequência de uma lista ou de cards na página de vendas
• Gaveta no celular que fecha arrastando
• Saber se uma animação pedida pelo cliente ajuda ou atrapalha

Depois de instalar, é só pedir assim

• Anima a abertura do menu do topo do site, do jeito certo pra quem usa celular
• Faz o aviso de compra aprovada entrar por baixo e sair por baixo
• Quero animar a paleta de comandos que abre no Ctrl+K. Vale a pena?

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