Pular pro conteúdo

Animation Vocabulary skill

Viu um efeito num site e não sabe como chama? Descreve do seu jeito e recebe o termo exato pra pedir certo à IA.

por emilkowalski

instalações
238,6 mil
estrelas no GitHub
49,7 mil
No skills.sh desde
junho de 2026
Licença
MIT

Atualizada no GitHub em 11 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

O que ela faz

A skill é um glossário ao contrário: você descreve o que vê ou sente, tipo 'aquela coisa que quica quando o menu abre', e o Claude devolve o nome técnico, como Pop in, Stagger ou Rubber-banding, com uma linha explicando. Ela vem do material de animação do designer Emil Kowalski.

São 91 termos em doze grupos: entrada e saída, sequência e tempo, movimento, transição entre estados, rolagem, resposta ao clique e ao toque, curvas de velocidade, molas, loops, acabamento, desempenho e princípios. Quando dois termos competem, ela mostra a diferença pra você escolher.

A resposta é curta de propósito: o nome primeiro, explicação só se você pedir. Se nada bate exatamente, ela diz o mais próximo e avisa que é aproximação, sem inventar termo. Ela só dá nome ao efeito; não desenha nem programa a animação.

Nas palavras de quem fez

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop…

emilkowalski, no SKILL.md

Quando usar

  • Viu um efeito bonito num site e quer pedir igual pra IA
  • Briefing pro designer ou pro programador sem saber o termo
  • Escrever o prompt de um site com o nome certo de cada movimento
  • Entender o que o designer quis dizer com stagger ou easing

Depois de instalar, é só pedir assim

  • Como chama aquele efeito em que os cards aparecem um depois do outro quando eu rolo a página?
  • Qual o nome da animação em que o botão afunda um pouquinho quando eu clico?
  • A foto pequena do produto cresce e vira a página inteira dele. Como eu peço isso pra IA?

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 Animation Vocabulary 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 Animation Vocabulary, 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.

Ela cria a animação?

Não. Ela serve pra dar nome ao efeito, não pra desenhar nem programar. Com o nome em mãos, você pede a animação ao Claude ou usa uma skill de construção.

Precisa de chave ou programa?

Não. É um glossário em texto, sem chave de API nem instalação extra. Os nomes e as definições estão em inglês, do jeito que a IA e os designers usam; o Claude explica em português se você pedir.

Roda no Codex e no Antigravity?

Sim. É texto puro, então qualquer agente que leia skills usa do mesmo jeito.

Levar essa skill

1x animation-vocabularyR$ 0,00

TotalR$ 0,00

A skill sai aqui mesmo, na hora. Seus dados eu uso pra falar com você sobre o MazyOS.

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/emilkowalski/skills

Aprenda a usar

Mais da loja emilkowalski

Ver a loja emilkowalski