What is the animation-vocabulary skill?
The animation-vocabulary skill is a reverse-lookup glossary in a single SKILL.md. You describe an effect loosely, such as a popover growing from its button, and the agent returns the exact term, here origin-aware animation, with close alternates. It names effects. It does not design or build them.
The animation-vocabulary skill is a glossary packaged as a SKILL.md. When you describe a motion effect without knowing its name, the agent maps the description to the matching term and returns it in a fixed format with a one-line definition.
The description says it is for naming an effect, not designing or building one. The same glossary appears in Emil Kowalski's emilkowalski/skills repository, and this repository carries a copy of it in its skills folder.
What changes in your agent's output
- The agent reads for intent, so "springy" or "draws itself in" maps to a term instead of a keyword match.
- Answers lead with the term in bold followed by its glossary definition, quoted as written.
- When two terms compete, such as clip-path and mask, the agent contrasts them and lists one or two alternates.
- If nothing matches, the agent names the closest term and says it is an approximation. It does not invent a term.
What the glossary covers
The glossary has twelve groups: entrances and exits, sequencing and timing, movement and transforms, transitions between states, scroll, feedback and interaction, easing, spring animations, looping and ambient motion, polish and effects, performance, and principles to know.
Who the animation-vocabulary skill is for
Best for
- Designers and founders who can describe a motion but cannot name it.
- Anyone writing prompts for an AI coding agent who wants the right words, such as stagger, crossfade or scroll-driven animation.
- Developers briefing a designer on an effect they saw on another site.
Not for
- Building or reviewing animation code. Use emil-design-eng to build and review-animations to review.
- Choosing durations and easing values. The glossary defines terms but does not set numbers.
- Auditing a codebase. improve-animations does that.
Use it with UiChemy
UiChemy Composer takes plain-language prompts and writes HTML, CSS and JS inside Elementor or Gutenberg. Naming the effect precisely, say stagger or scroll reveal, gives that prompt a clearer target. Click Get Started on uichemy.com.
How to install Animation Vocabulary Skill: Name Any Motion Effect
git clone https://github.com/babznxbz/website-skill.gitClone the repository
Run
git clone https://github.com/babznxbz/website-skill.git. The skill is the skills/animation-vocabulary folder, a single SKILL.md.Copy the skill folder
Copy skills/animation-vocabulary into the folder where your agent loads skills, for one project or globally. The repository also holds other skills, so copy only this folder.
Ask what an effect is called
Describe an effect in your own words, such as the iOS scroll where it resists and snaps back.
Check that it loaded
Ask what it is called when a popover grows out of the button that opened it. The agent should answer with the bold term Origin-aware animation and its definition.
Key features
- Reverse lookupYou describe what you see or feel. The skill maps the sensation to the term, for example the bouncy thing when a popover opens maps to Pop in.
- Fixed answer formatEach answer is the bold term, a dash-free definition line from the glossary, then close alternates if several terms could fit.
- Verbatim definitionsThe instructions say the glossary's descriptions are authoritative, so the agent quotes them as written instead of paraphrasing.
- DisambiguationClose pairs such as clip-path and mask, pop in and bounce, or shared element transition and layout animation get contrasted so you can choose.
- Twelve glossary groupsEntrances, sequencing, transforms, state transitions, scroll, feedback, easing, springs, looping motion, polish effects, performance and principles.
- Spring and easing termsIt defines easing, ease-out, cubic-bezier, spring, stiffness, damping, mass, bounce, momentum, velocity and interruptible animation.
- Performance termsIt defines frame rate, jank, dropped frame, compositing, will-change and layout thrashing, so you can describe a stutter correctly.
- Principles to knowIt covers purposeful animation, anticipation, follow-through, squash and stretch, frequency of use, spatial consistency and reduced motion.
- No invented termsIf a term is not in the glossary, the agent says so. It may still explain the idea using glossary words.
Frequently asked questions
What is the animation-vocabulary skill?
It is a glossary in one SKILL.md that turns a loose description of a web animation into its exact term. You describe the effect, and the agent returns the matching name, its definition, and one or two close alternates when several terms could fit.
How do I install the animation-vocabulary skill?
Clone the babznxbz/website-skill repository with git and copy the skills/animation-vocabulary folder into your agent's skills folder. It is one file with no scripts or dependencies, so there is nothing else to set up.
What does the animation-vocabulary skill answer?
It answers what-is-it-called questions. For example, the iOS overscroll that resists and snaps back is Rubber-banding, and one item growing from another's position is a Shared element transition. It does not write animation code.
Which AI agents can use the animation-vocabulary skill?
The README names Antigravity, OpenCode, Claude Code, Windsurf, Cursor and Gemini CLI for the repository's skills. The skill itself is a plain SKILL.md, so any agent that loads skill folders can read it.
Where does the glossary come from?
The same glossary is in Emil Kowalski's emilkowalski/skills repository, where the skill adds a short ready message. The skill describes its glossary as a snapshot of a vocabulary page, kept in sync when either changes.
Does the skill set easing or duration values?
No. It defines terms such as ease-out and cubic-bezier but sets no numbers. For values, use review-animations, which cites a standards file, or the emil-design-eng skill for durations and curves.
What should I do with the term once I have it?
Put it in your prompt. Asking an agent for a stagger of scale-in entrances is clearer than asking for a nice animation. The apple-design skill covers spring and gesture terms in more depth.