Agent skill · design visual · aiskillstore
animation-vocabulary
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.
Why this skill is useful
Provides a precise vocabulary for describing web animations, which aids in effective communication with designers and AI.
What it needs
About 9k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Animation Vocabulary Turn a vague description of a motion or effect into the precise term, so the user knows what to ask for. Quick Start The user describes an effect loosely. You return the matching term(s) in this format: If several terms could fit, list the best match first, then 1–2 alternates with a one-line note on how they differ. Instructions 1. Read for intent, not keywords. Users describe what they see or feel ("springy", "slides off", "draws itself in"), not the technical name. Map the sensation to the glossary below. 2. Quote the glossary verbatim. Its descriptions are authoritative — use them as-is, don't paraphrase. 3. Disambiguate close terms. When two compete (Clip-path vs Mask, Pop in vs Bounce, Shared element transition vs Layout animation), contrast them so the user can pick. 4. When nothing matches exactly, name the closest term and say plainly it's an approximation, or describe the effect in the glossary's vocabulary (e.g. "that's a stagger of scale-in entrances"). 5. Stay within this glossary. If a term genuinely isn't here, say so rather than inventing one — though you may explain the concept using these words. 6. Keep it tight. A naming question wants a name, not an essay. Lead with the term; expand only if asked. Examples Example 1 — feel-based User: "What's it called when a popover seems to grow out of the button you clicked instead of from its middle?" Output: Example 2 — disambiguation User: "The thing where one image turns into another image." Output: Example 3 — physics feel User: "That iOS scroll where it resists and snaps back when you pull too far." Output: Glossary A curated snapshot mirroring the project's /vocabulary page; keep the two in sync when either changes. Entrances & Exits — how elements appear and disappear Fade in / Fade out — Element appears or disappears by changing opacity. Slide in — Element enters by sliding in from off-screen (left, right, top, or bottom). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/animation-vocabulary