Frontend & UI

animation-vocabulary

Macht aus einer vagen Motion-Beschreibung den exakten Fachbegriff.

Worum es geht

Ein Glossar zum Rückwärtsnachschlagen. Du beschreibst einen Motion-Effekt lose, und der Skill liefert den präzisen Begriff, wörtlich zitiert, mit nahen Alternativen, wenn mehrere passen könnten.

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
Aus der Upstream-SKILL.md

Warum das fürs Design zählt

  • Gibt Designern das richtige Wort, um einen Agenten zu prompten.
  • Trennt nahe Paare wie clip-path versus mask oder Pop-in versus Bounce.
  • Erfindet keine Begriffe, damit die Benennung verlässlich bleibt.

Was es abdeckt

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

So installierst du es

animation-vocabulary

  1. Klone das Repo.

    git clone https://github.com/emilkowalski/skills
  2. Verweise Codex auf die Skill-Datei.

    skills/animation-vocabulary/SKILL.md
  3. Beschreibe dann das gewünschte UI. Codex folgt dem Skill.

So nutzt du es mit Codex

  1. Beschreib, was du gesehen hast, etwa ‚den iOS-Rubber-Band-Scroll‘.

  2. Er liefert den fett gesetzten Begriff plus eine einzeilige Glossardefinition.

  3. Frag nach Alternativen, wenn zwei Begriffe plausibel passen könnten.

Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.

Mehr auf der codex-design-Liste ↗

Nächster Schritt

Mit Open Design designen, ohne Setup

Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.