← ClaudeAtlas

animation-vocabularylisted

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.
JasonxzWen/harness-hub · ★ 72 · Web & Frontend · score 72
Install: claude install-skill JasonxzWen/harness-hub
# 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 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 whe