Animation vocabulary
Repository-first deterministic migration and atomic Skill source for Claude Code and Codex.
npx -y skills add JasonxzWen/harness-hub --skill animation-vocabularyAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
What its author says it does
Copied from the file, not written here
Load when a user describes a Web animation or motion effect without knowing its name and needs the precise term or close alternatives; use only for naming, not design, implementation, or review.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.0 KB, as published. Nobody here has run it
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:
**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.
If several terms could fit, list the best match first, then 1–2 alternates with a one-line note on how they differ.
Instructions
- 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.
- Quote the glossary verbatim. Its descriptions are authoritative — use them as-is, don't paraphrase.
- 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.
- 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").
- 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.
- 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:
**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.
Example 2 — disambiguation User: "The thing where one image turns into another image." Output:
**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.
Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.
Example 3 — physics feel User: "That iOS scroll where it resists and snaps back when you pull too far." Output:
**Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
Glossary
Read references/glossary.md for the curated terms. Load only the relevant section when the description already narrows the family.