Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add memi-design/design-skills --skill animation-vocabularygit clone --depth 1 https://github.com/memi-design/design-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/memi-design/design-skills/animation-vocabulary)<a href="https://agentmods.dev/skills/memi-design/design-skills/animation-vocabulary"><img src="https://agentmods.dev/badge/skills/memi-design/design-skills/animation-vocabulary/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/memi-design/design-skills/animation-vocabulary"><img src="https://agentmods.dev/badge/skills/memi-design/design-skills/animation-vocabulary.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00098 | $0.02905 |
| Opus 5 | $0.00049 | $0.01452 |
| Sonnet 5 | $0.00020 | $0.00581 |
| Haiku 4.5 | $0.00010 | $0.00291 |
Grade A, and why
animation-vocabulary scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
100% identical to animation-vocabulary — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 174 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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.
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 174 lines · 98 tokens per session scan A d718b48fe3c7
animation-vocabulary is a skill published in the GitHub repository memi-design/design-skills (7 stars, last pushed 1mo ago), licensed MIT. It adds 98 tokens to every session and 2,905 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to animation-vocabulary, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
accessibility
Use when making a web UI conform to WCAG 2.2 Level AA — axe-core or Lighthouse a11y violations, keyboard operability, focus management, ARIA roles/names/live regions, contrast, tap-target size. NOT palette or visual intent (that is design), NOT test-runner setup (that is testing-web), NOT LCP/page-speed (that is…
motion-craft
Use when an interface moves and the movement has to feel right — durations and easing, what must never animate, fixing motion that reads sluggish, cheap or janky, and reduced-motion. Web and native. NOT the visual system (that is design), NOT the graded critique (that is design-loop).
design-engineering
Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA…
motion-guide
Use when designing, adding, changing, suggesting, or reviewing UI motion. Motion Guide is a default-trigger motion decision advisor for AI coding agents: it decides whether motion should exist, selects an appropriate functional or expressive pattern, and constrains implementation with timing, easing, accessibility…
motion
Author verified, reduced-motion-safe web animation with MotionSpec. Use when adding scroll, entrance, hover, or loop animation to a website or web app — instead of hand-writing GSAP or CSS keyframes, write a MotionSpec JSON spec, validate it, and compile deterministic code.
canon-interaction
Use when designing or auditing interactive states (hover, focus, active, disabled, loading), focus management, keyboard navigation, click targets, drag-and-drop, or any user input handling. Trigger when the user mentions states, focus, hover, keyboard, interaction, click, tap, or fixing how something responds.