Frontend & UI

animation-vocabulary

Turns a vague motion description into its exact technical term.

What it is

A reverse-lookup glossary. The user describes a motion effect loosely and the skill returns the precise term, quoted verbatim, with close alternates when several could fit.

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 t
From the upstream SKILL.md

Why it matters for design

  • Gives a designer the right word to prompt an agent with.
  • Disambiguates close pairs such as clip-path versus mask, pop in versus bounce.
  • Refuses to invent terms, so the naming stays trustworthy.

What it covers

  • Entrances and exits
  • Sequencing and timing
  • Transitions between states
  • Scroll
  • Spring animations
  • Polish and effects

How to install

animation-vocabulary

  1. Clone the repo.

    git clone https://github.com/emilkowalski/skills
  2. Point Codex at the skill file.

    skills/animation-vocabulary/SKILL.md
  3. Then describe the UI you want. Codex follows the skill.

How to run it with Codex

  1. Describe what you saw, such as ‘the iOS rubber-band scroll’.

  2. It returns the bolded term plus a one-line glossary definition.

  3. Ask for alternates when two terms could plausibly fit.

Every plugin here is free, open source, and links to its real upstream source.

More on the codex-design list ↗

Next step

Design with Open Design, without the setup

Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.