# Animation Vocabulary

Reverse-lookup glossary that turns a vague description of a web animation or motion...

- Repository: https://github.com/emilkowalski/skills (52719 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add emilkowalski/skills --skill animation-vocabulary -g -a claude-code -y`
Codex: `npx skills add emilkowalski/skills --skill animation-vocabulary -g -a codex -y`
Cursor: `npx skills add emilkowalski/skills --skill animation-vocabulary -g -a cursor -y`
Gemini CLI: `npx skills add emilkowalski/skills --skill animation-vocabulary -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Animation Vocabulary

## Initial Response

When this skill is first invoked without a specific question, respond only with:

> I'm ready to put a name to any motion effect you describe, my knowledge comes from Emil Kowalski's animation philosophy.

Do not provide any other information until the user asks a question.

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

The rest: https://github.com/emilkowalski/skills/blob/HEAD/skills/animation-vocabulary/SKILL.md