Source: emilkowalski/skills · Maintainer: community: Emil Kowalski · License: MIT · Checked: 24 October 2026
What is the animation vocabulary skill?
The animation vocabulary skill, animation-vocabulary, is a glossary your agent uses in reverse: you describe a motion effect the way you see it, and it tells you the exact term. Say "that iOS scroll where it resists and snaps back," and the answer is Rubber-banding, with a one-line definition. It is for designers and developers who know what they want an interface to do but not what to call it.
It is one of 15 skills in Emil Kowalski's emilkowalski/skills repo. The README describes it in one line: "Get better animations from an AI by telling it exactly what you want by using the right words." The skill's own description calls it a "Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term," and adds: "For naming an effect, not designing or building one."
As of 24 October 2026, its skills.sh page listed about 235,000 installs (snapshot, 24 October 2026), fourth in the repo after emil-design-eng, review-animations and apple-design.
What does it do?
The folder holds one file, a SKILL.md of about 2,200 words. Most of it is the glossary. The rest is a short set of rules for how the agent answers.
First response. Invoked with no question, the agent replies only with: "I'm ready to put a name to any motion effect you describe, my knowledge comes from Emil Kowalski's animation philosophy." Then it waits.
The answer format. The agent returns the term in bold followed by its glossary definition. When more than one term could fit, it lists the best match first and then one or two alternates, each with a line on how they differ.
The rules the agent follows:
- "Read for intent, not keywords." People describe what they see or feel, such as springy or draws itself in, and the agent maps that sensation to a term.
- Quote the glossary as written rather than paraphrasing it.
- Contrast close terms, such as Clip-path and Mask, Pop in and Bounce, or Shared element transition and Layout animation.
- When nothing matches exactly, name the closest term and say it is an approximation, or describe the effect with glossary words, such as a stagger of scale-in entrances.
- "Stay within this glossary." If a term isn't there, the agent says so rather than inventing one.
- "Keep it tight." The SKILL.md says "A naming question wants a name, not an essay."
The glossary. It has 91 entries in 12 groups:
| Group | Example terms |
|---|---|
| Entrances and Exits | Fade in, Slide in, Scale in, Pop in, Reveal |
| Sequencing and Timing | Keyframes, Tween, Stagger, Orchestration, Fill mode |
| Movement and Transforms | Translate, Skew, 3D tilt, Transform origin, Origin-aware animation |
| Transitions Between States | Crossfade, Morph, Shared element transition, Layout animation |
| Scroll | Scroll reveal, Scroll-driven animation, Parallax, View transition |
| Feedback and Interaction | Press feedback, Hold to confirm, Swipe to dismiss, Rubber-banding |
| Easing | Ease-out, Ease-in-out, Cubic-bezier, Asymmetric easing |
| Spring Animations | Stiffness, Damping, Mass, Perceptual duration, Interruptible animation |
| Looping and Ambient Motion | Marquee, Alternate (yoyo), Pulse, Float, Idle animation |
| Polish and Effects | Blur, Mask, Line drawing, Text morph, Number ticker, Tabular numbers |
| Performance | Frame rate, Jank, Compositing, will-change, Layout thrashing |
| Principles to Know | Anticipation, Follow-through, Frequency of use, Reduced motion |
Some definitions carry Emil Kowalski's opinions, consistent with his other skills. Ease-out is "The default for most UI and anything responding to the user," Ease-in is "Usually avoided; can feel sluggish," and Linear is to be avoided for UI and kept for spinners or marquees.
A note at the top of the glossary calls it a curated snapshot mirroring the project's /vocabulary page, to be kept in sync with it. The same glossary is published at animations.dev/vocabulary, the site of Emil Kowalski's animation course.
How do you install it?
The skills.sh page gives this command for the skills CLI:
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary
The repo README's command adds the whole collection, and the CLI lets you pick which of the 15 skills to keep:
npx skills@latest add emilkowalski/skills
The CLI installs into the current project by default; add -g to make the skill available across projects. For Claude Code that means .claude/skills/animation-vocabulary/ or ~/.claude/skills/animation-vocabulary/, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.
On claude.ai, zip the animation-vocabulary folder and upload it under Customize > Skills, as the Claude help article on skills describes. Code execution must be turned on.
How do you use it?
The frontmatter doesn't disable automatic loading, so the agent can pick the skill up when you ask what an effect is called. You can also call it by name, for example /animation-vocabulary in Claude Code.
Example prompts (suggestions, not quotes from the repo):
- "What's it called when list items appear one after another instead of all at once?"
- "The effect where a thumbnail grows into a full card when I click it. What's the word for that?"
- "What do you call a loading placeholder with a moving shine across it?"
- "Is a popover that grows from its button a pop in or an origin-aware animation?"
- "I want numbers to stop jumping sideways while a timer counts. What should I ask for?"
The repo's own examples show the pattern. Asked about "one image turns into another image," the agent answers Morph, then offers Crossfade if the images simply fade over each other and Shared element transition if an element travels between positions.
Once you have the term, put it in your build prompt. "Add a 50ms stagger to the card grid entrance, with origin-aware scale-in on the menu" is something an agent can act on. To build or review it with the same taste, use emil-design-eng or review-animations.
Tips and limits
- It names, it doesn't build. By design the skill stops at the word. Pair it with a building skill or your own prompt.
- Web-first vocabulary. The description calls these web animation terms, and many terms are CSS concepts, such as Fill mode, will-change and Transform origin. Native platforms may use different names for the same effect.
- A closed list. The agent is told to stay inside the 91 entries. For an effect outside them, expect an approximation in glossary terms, not a new name.
- Opinions inside definitions. Lines like "Avoid for UI" under Linear are craft guidance from Emil Kowalski, not a web standard.
- Light footprint. One Markdown file, no scripts, no dependencies, no API keys.
- Security audit. As of 24 October 2026, its skills.sh page showed Pass from Gen Agent Trust Hub, Socket and Snyk.
The repo's MIT License (copyright 2026 Emil Kowalski) lets you copy and change the skill as long as you keep the notice.
Save it in your Kipt library
In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md; paste the repo link instead and Kipt shows a list of all 15 skills to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:
npx skills add https://github.com/<you>/<repo>.git --all -g
Kipt is not affiliated with Emil Kowalski or emilkowalski/skills.
Similar skills
- Emil Kowalski skill (emil-design-eng): the main skill in the repo, with the rules behind many of these definitions.
- Find animation opportunities skill: finds where an interface should animate, and where it shouldn't.
- Improve animations skill: audits existing motion and writes fix plans.
- Review animations skill: a strict review of motion code with a Block or Approve verdict.
- Apple design skill: Apple's fluid motion principles from the same repo.