animation-vocabularyby Emil Kowalski

Animation Vocabulary Skill.

A Claude Code and Codex skill for motion and video: reverse-lookup glossary that turns a vague motion description into its exact term.

Motion & Video

Download OpenDesign View usage guide

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

Front matter and section headings read from the upstream file on 2026-09-14 · 12,884 characters in full

01 What it does

What the animation-vocabulary Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

animation-vocabulary is a reverse-lookup glossary for naming web motion. You describe an effect loosely — "the bouncy thing when a popover opens", "the iOS rubber-band scroll" — and it returns the exact term plus the glossary's own description, in the form Stagger — Animate several items one after another.

It is for designers and developers who need the right word to prompt an AI or a designer, not to design or build the animation. The glossary covers Entrances & Exits, Sequencing & Timing, Movement & Transforms, Easing, Spring Animations, Scroll, Feedback & Interaction, Performance and Principles to Know, and it contrasts close pairs like Clip-path versus Mask.

What it produces

The matching term plus the glossary's own definition, in one formatted line
A bulleted list of close alternates with a condition on each
An explicitly flagged approximation when nothing matches

See the example prompt ↗

How It Works

01
Match the Sensation, Not the Keywords
The user says what the motion looks or feels like, and that sensation is mapped onto the glossary rather than matched against technical strings.
02
Answer in the Skill's Fixed Format
One line: the term in bold, an em dash, then the glossary's own description of it. No preamble around the answer.
03
Rank the Match, Then List Alternates
When several terms fit, the best match goes first and one or two runners-up follow with a line explaining how each differs.
04
Lead with the Term and Stop
The term comes first and the reasoning is held back unless the user asks for more.

02 Find your fit

When to Use the animation-vocabulary Skill

Use the animation-vocabulary skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

You can picture the effect precisely but the name is missing, e.g. the popover that grows out of the button that opened it.
You need the vocabulary to brief an AI or a designer with, rather than to implement anything yourself.
The request arrives as a naming question: what's it called when…
You can only describe a physics feel, such as overscroll resisting and snapping back.

Know the Boundaries

Designing or building the animation — the skill is scoped to naming the effect only.
Terms that fall outside this glossary: rather than extending it, the skill reports the gap.

What to Provide

InputNothing technical is needed up front; the skill reads what is described, not a keyword list.
InputSay which element it comes out of or attaches to, since terms like origin-aware animation are defined by that relationship.

03 Inside the skill

Rules the animation-vocabulary Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Quote the Glossary, Do Not Paraphrase
The descriptions are treated as authoritative reference text, so the wording is carried over exactly instead of being reworded for the user.
Contrast Competing Terms Explicitly
Close pairs like Clip-path against Mask, Pop in against Bounce, Shared element transition against Layout animation must be set side by side rather than silently chosen.
Never Invent a Term
If the exact term is absent from the glossary, say so plainly; existing glossary words may be used to explain the concept, but no new name may be coined.
Read for Intent
The trigger is the user's plain description of what they see, not a keyword search; intuited feel is the input that gets resolved.
Keep It Tight
A naming question should get a name, not an essay; length only grows when the user asks for it.
Keep the Glossary in Sync
The in-skill glossary is a curated snapshot of the project's /vocabulary page, and the two are meant to be updated together whenever either changes.

04 Put it to work

Install animation-vocabulary in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add animation-vocabulary to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for skills/animation-vocabulary/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or 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.

Source: SKILL.md § Examples (code block).

Check the First Result

What the SKILL.md itself says a correct result looks like:

The answer reads as one glossary line: bolded term, em dash, the file's own wording, e.g. the rubber-banding entry.
Alternates, when present, appear as bullets each carrying a one-line condition for when that term applies.
Competing terms are separated before you choose, rather than being merged into a single answer.

In OpenDesign import animation-vocabulary from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Skill file: skills/animation-vocabulary/SKILL.md Content checksum recorded at verification; commit d23d7f8
License: MIT From LICENSE.
Repository stars: 37,516 GitHub snapshot taken 2026-09-14 for the whole emilkowalski/skills repository, which contains 9 skills in this catalog. Not a rating or usage count for animation-vocabulary.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Quick StartShows the one-line answer shape: bolded term, em dash, glossary description.
InstructionsSix numbered rules: read intent, quote verbatim, disambiguate, approximate, stay in glossary, stay tight.
ExamplesThree worked lookups: a feel-based one, a disambiguation, and a physics feel.
GlossaryTwelve grouped term lists, from Entrances & Exits through Principles to Know.

The Skill's Own 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 one.”

Front-matter description from SKILL.md. The full file is about 12,884 characters. Read the full file on GitHub.

06 Before you install

Questions About the animation-vocabulary Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I need to know the term already to use this?

No. You describe the effect however you can — the file's own example is just "the iOS rubber-band scroll" — and the reply comes back as the term Rubber-banding with the glossary's description attached.

What happens if my effect isn't in the glossary?

It names the closest term and says plainly that it is only an approximation, or restates the effect in glossary words such as "that's a stagger of scale-in entrances". It will not invent a term that isn't in the list.

Will it design or build the animation for me?

No. The skill is scoped to naming the effect; designing or building it is explicitly out of scope. You take the term it returns and use it to brief whoever or whatever builds the motion.

Animation Vocabulary

Run animation-vocabulary on a Real Motion and Video Task.

Download OpenDesign, import animation-vocabulary from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills