animation-vocabularypor Emil Kowalski

Animation Vocabulary Skill.

Um skill para Claude Code e Codex voltado a motion e vídeo: glossário de busca reversa que converte uma descrição vaga de movimento em seu termo preciso.

Motion e Vídeo

Baixar OpenDesign Ver guia de uso

emilkowalski/skills · skills/animation-vocabulary/SKILL.mdSKILL.md

--- name: animation-vocabulary description: 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 in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building … --- ## Quick Start ## Instructions ## Examples ## Glossary

Metadados e cabeçalhos de seção lidos do arquivo original em 14/09/2026 · 12.884 caracteres no total

01 O que faz

O Que o Skill animation-vocabulary Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

animation-vocabulary é um glossário de busca inversa para nomear movimento web. Você descreve um efeito de forma vaga — "aquela coisa saltitante quando um popover abre", "o scroll elástico do iOS" — e ele retorna o termo exato mais a descrição do próprio glossário, no formato Stagger — Anime vários itens um após o outro.

É para designers e desenvolvedores que precisam da palavra certa para instruir uma IA ou um designer, não para projetar ou construir a animação. O glossário abrange Entradas & Saídas, Sequenciamento & Timing, Movimento & Transformações, Easing, Animações de Spring, Scroll, Feedback & Interação, Performance e Princípios a Conhecer, e contrasta pares próximos como Clip-path versus Mask.

O que ele produz

O termo correspondente mais a definição do próprio glossário, em uma linha formatada
Uma lista com marcadores de alternativas próximas, cada uma com uma condição
Uma aproximação explicitamente sinalizada quando nada corresponde

Veja o exemplo de prompt ↗

Como funciona

01
Corresponda à Sensação, Não às Palavras-chave
O usuário descreve como o movimento parece ou se sente, e essa sensação é mapeada no glossário em vez de ser comparada com strings técnicas.
02
Responda no Formato Fixo do Skill
Uma linha: o termo em negrito, um travessão, depois a descrição do próprio glossário sobre ele. Sem preâmbulo em torno da resposta.
03
Classifique a Correspondência e Depois Liste Alternativas
Quando vários termos se encaixam, a melhor correspondência vem primeiro e um ou dois concorrentes seguem com uma linha explicando como cada um difere.
04
Comece com o Termo e Pare
O termo vem primeiro e o raciocínio é reservado, a menos que o usuário peça mais.

02 Encontre o ideal para você

Quando Usar a Skill animation-vocabulary

Use a skill animation-vocabulary no Claude Code ou Codex quando o trabalho for motion e video desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Você consegue visualizar o efeito com precisão, mas o nome está faltando, por exemplo, o popover que cresce a partir do botão que o abriu.
Você precisa do vocabulário para orientar uma IA ou um designer, em vez de implementar algo você mesmo.
O pedido chega como uma pergunta de nomenclatura: como se chama quando…
Você só consegue descrever uma sensação física, como o overscroll que resiste e volta com um snap.

Conheça os Limites

Projetar ou construir a animação — o skill está limitado a nomear o efeito apenas.
Termos que ficam fora deste glossário: em vez de estendê-lo, o skill relata a lacuna.

O Que Fornecer

EntradaNada técnico é necessário de início; o skill lê o que é descrito, não uma lista de palavras-chave.
EntradaDiga de qual elemento ele sai ou a qual ele se anexa, já que termos como animação com consciência de origem são definidos por essa relação.

03 Dentro da skill

Regras que o Skill animation-vocabulary fornece ao Claude Code e ao Codex

6 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Cite o Glossário, Não Parafraseie
As descrições são tratadas como texto de referência autoritativo, então a redação é transportada exatamente em vez de ser reformulada para o usuário.
Contraste Termos Concorrentes de Forma Explícita
Pares próximos como Clip-path contra Mask, Pop in contra Bounce, Shared element transition contra Layout animation devem ser colocados lado a lado em vez de escolhidos silenciosamente.
Nunca Invente um Termo
Se o termo exato estiver ausente do glossário, diga isso claramente; palavras já existentes no glossário podem ser usadas para explicar o conceito, mas nenhum nome novo pode ser criado.
Leia para Intenção
O gatilho é a descrição simples do usuário sobre o que ele vê, não uma busca por palavra-chave; a sensação intuída é a entrada que é resolvida.
Mantenha Conciso
Uma pergunta de nomenclatura deve receber um nome, não um ensaio; o tamanho só aumenta quando o usuário pede.
Mantenha o Glossário Sincronizado
O glossário embutido na skill é um retrato curado da página /vocabulary do projeto, e os dois devem ser atualizados juntos sempre que um deles mudar.

04 Coloque em prática

Instalar animation-vocabulary no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar animation-vocabulary ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

Forma genérica de CLI skills para skills/animation-vocabulary/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Adapte este prompt com seu próprio conteúdo e restrições, depois execute no Claude Code ou Codex.

Example prompt

**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

Fonte: SKILL.md § Exemplos (bloco de código).

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

A resposta se lê como uma linha do glossário: termo em negrito, travessão, a formulação própria do arquivo, por exemplo, a entrada de rubber-banding.
Quando existem alternativas, elas aparecem como marcadores, cada um trazendo uma condição de uma linha para quando aquele termo se aplica.
Termos concorrentes são separados antes de você escolher, em vez de serem combinados em uma única resposta.

No OpenDesign importe o animation-vocabulary a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Arquivo da skill: skills/animation-vocabulary/SKILL.md Checksum do conteúdo registrado na verificação; commit d23d7f8
License: MIT De LICENSE.
Estrelas do repositório: 37.516 Instantâneo do GitHub capturado em 14/09/2026 para todo o repositório emilkowalski/skills, que contém 9 skills neste catálogo. Não é uma classificação ou contagem de uso para animation-vocabulary.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Início RápidoMostra o formato de resposta de uma linha: termo em negrito, travessão, descrição do glossário.
InstruçõesSeis regras numeradas: ler a intenção, citar literalmente, desambiguar, aproximar, permanecer no glossário, manter-se conciso.
ExemplosTrês consultas resolvidas: uma baseada em sensação, uma desambiguação e uma sensação física.
GlossárioDoze listas de termos agrupados, de Entradas & Saídas até Princípios a Conhecer.

A Descrição da Própria Skill

"Glossário de busca reversa que transforma uma descrição vaga de uma animação ou efeito de movimento web em seu termo exato ("aquela coisa elástica quando um popover abre" → Pop in; "o scroll de elástico do iOS" → Rubber-banding). Use quando o usuário perguntar "como se chama quando…", ou descrever um efeito de movimento sem saber seu nome e quiser a palavra certa para solicitar a uma IA ou designer. Para nomear um efeito, não projetar ou construir um."

Descrição do cabeçalho do SKILL.md. O arquivo completo tem cerca de 12.884 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill animation-vocabulary

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Preciso já conhecer o termo para usar isso?

Não. Você descreve o efeito da maneira que conseguir — o próprio exemplo do arquivo é apenas "o scroll com efeito elástico do iOS" — e a resposta retorna com o termo Rubber-banding acompanhado da descrição do glossário.

O que acontece se meu efeito não estiver no glossário?

Ele nomeia o termo mais próximo e afirma claramente que é apenas uma aproximação, ou reformula o efeito com palavras do glossário, como "isso é um stagger de entradas com scale-in". Ele não inventará um termo que não esteja na lista.

Ele vai projetar ou construir a animação para mim?

Não. A skill está limitada a nomear o efeito; projetar ou construir a animação está explicitamente fora do escopo. Você pega o termo que ela retorna e o usa para orientar quem ou o que vai construir o movimento.

Vocabulário de Animação

Execute animation-vocabulary em uma tarefa real de Motion e Vídeo.

Baixe o OpenDesign, importe animation-vocabulary a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills