Zur Nutzungsanleitung springen
animation-vocabularyvon Emil Kowalski

Animation Vocabulary Skill.

Ein Claude Code und Codex Skill für Motion und Video: Reverse-Lookup-Glossar, das eine vage Bewegungsbeschreibung in den exakten Fachbegriff übersetzt.

  • Motion & Video
emilkowalski/skills · skills/animation-vocabulary/SKILL.mdSKILL.md
--- name: animation-vocabulary 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 … --- ## Quick Start ## Instructions ## Examples ## Glossary
Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 12.884 Zeichen insgesamt

01 Was es tut

Was das Skill animation-vocabulary in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

animation-vocabulary ist ein Rückwärts-Nachschlage-Glossar zur Benennung von Web-Bewegung. Sie beschreiben einen Effekt vage – „das federnde Ding, wenn sich ein Popover öffnet", „das iOS-Gummiband-Scrollen" – und es liefert den exakten Begriff plus die eigene Beschreibung des Glossars, in der Form Stagger — Animiert mehrere Elemente nacheinander.

Es richtet sich an Designer und Entwickler, die das richtige Wort brauchen, um eine KI oder einen Designer zu briefen, nicht um die Animation zu entwerfen oder zu bauen. Das Glossar umfasst Entrances & Exits, Sequencing & Timing, Movement & Transforms, Easing, Spring Animations, Scroll, Feedback & Interaction, Performance und Principles to Know, und es stellt eng verwandte Paare wie Clip-path versus Mask gegenüber.

Was er erzeugt

  • Der passende Begriff plus die eigene Definition des Glossars, in einer formatierten Zeile
  • Eine Aufzählungsliste naher Alternativen mit je einer Bedingung
  • Eine explizit gekennzeichnete Annäherung, wenn nichts passt
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Die Empfindung treffen, nicht die Schlüsselwörter

    Der Nutzer beschreibt, wie sich die Bewegung anfühlt oder aussieht, und diese Empfindung wird auf das Glossar abgebildet, statt gegen technische Zeichenketten abgeglichen zu werden.

  2. 02
    Antworten im festen Format des Skills

    Eine Zeile: der Begriff fett gesetzt, ein Gedankenstrich, dann die Beschreibung aus dem Glossar selbst. Keine Einleitung um die Antwort herum.

  3. 03
    Die Übereinstimmung einordnen, dann Alternativen aufzählen

    Wenn mehrere Begriffe passen, steht die beste Übereinstimmung zuerst, gefolgt von ein bis zwei Alternativen mit einer Zeile, die den Unterschied erklärt.

  4. 04
    Mit dem Begriff beginnen und aufhören

    Der Begriff kommt zuerst, die Begründung wird zurückgehalten, sofern der Nutzer nicht nach mehr fragt.

02 Finden Sie Ihren Favoriten

Wann der animation-vocabulary Skill zu verwenden ist

Verwenden Sie den animation-vocabulary Skill in Claude Code oder Codex, wenn die Aufgabe Motion and Video dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Sie können sich den Effekt genau vorstellen, aber der Name fehlt, z. B. das Popover, das aus der Schaltfläche herauswächst, die es geöffnet hat.
  • Sie brauchen das Vokabular, um eine KI oder einen Designer zu briefen, nicht um selbst etwas umzusetzen.
  • Die Anfrage kommt als Benennungsfrage: Wie nennt man es, wenn …
  • Sie können nur ein Bewegungsgefühl beschreiben, etwa Overscroll, der sich sträubt und zurückschnappt.

Grenzen kennen

  • Die Animation zu entwerfen oder zu bauen – der Skill ist ausschließlich auf die Benennung des Effekts ausgelegt.
  • Begriffe, die außerhalb dieses Glossars liegen: Statt es zu erweitern, meldet der Skill die Lücke.

Was Sie bereitstellen sollten

  • EingabeVorab ist nichts Technisches nötig; der Skill liest, was beschrieben wird, keine Stichwortliste.
  • EingabeGeben Sie an, aus welchem Element es herauskommt oder an welches es sich anfügt, da Begriffe wie origin-aware animation über diese Beziehung definiert werden.

03 Innerhalb des Skills

Regeln, die der animation-vocabulary-Skill Claude Code und Codex vorgibt

6 konkrete Anweisungen, Vorgaben und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Das Glossar zitieren, nicht umschreiben

    Die Beschreibungen werden als maßgeblicher Referenztext behandelt, daher wird der Wortlaut exakt übernommen statt für den Nutzer umformuliert.

  2. Konkurrierende Begriffe explizit gegenüberstellen

    Eng verwandte Paare wie Clip-path gegen Mask, Pop in gegen Bounce, Shared element transition gegen Layout animation müssen einander gegenübergestellt werden, statt sie stillschweigend auszuwählen.

  3. Nie einen Begriff erfinden

    Fehlt der exakte Begriff im Glossar, wird das klar gesagt; vorhandene Glossarbegriffe dürfen zur Erklärung des Konzepts verwendet werden, aber es darf kein neuer Name geprägt werden.

  4. Auf die Absicht eingehen

    Der Auslöser ist die einfache Beschreibung des Nutzers, was er sieht, keine Stichwortsuche; das erahnte Gefühl ist die Eingabe, die aufgelöst wird.

  5. Knapp halten

    Eine Benennungsfrage sollte einen Namen erhalten, keinen Aufsatz; die Länge wächst nur, wenn der Nutzer danach fragt.

  6. Das Glossar synchron halten

    Das Glossar innerhalb des Skills ist eine kuratierte Momentaufnahme der /vocabulary-Seite des Projekts, und beide sollen zusammen aktualisiert werden, sobald sich eines von beiden ändert.

04 In Betrieb nehmen

animation-vocabulary in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

animation-vocabulary zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

Generische skills-CLI-Form für skills/animation-vocabulary/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Motion- und Video-Aufgabe

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt
**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.

Quelle: SKILL.md § Examples (Codeblock).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Die Antwort liest sich wie eine Glossarzeile: fett gesetzter Begriff, Gedankenstrich, der originale Wortlaut der Datei, z. B. der Eintrag zum Rubber-Banding.
  • Falls vorhanden, erscheinen Alternativen als Aufzählungspunkte, jeweils mit einer einzeiligen Bedingung, wann dieser Begriff zutrifft.
  • Konkurrierende Begriffe werden getrennt aufgeführt, bevor Sie sich entscheiden, statt sie zu einer einzigen Antwort zu verschmelzen.

In OpenDesign importieren Sie animation-vocabulary über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Repository
github.com/emilkowalski/skills Branch main
Skill-Datei
skills/animation-vocabulary/SKILL.md Inhalts-Checksumme bei Verifizierung erfasst; Commit d23d7f8
License
MIT Aus LICENSE.
Repository-Sterne
37.516 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository emilkowalski/skills, das 9 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für animation-vocabulary.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. Quick StartZeigt die Form der einzeiligen Antwort: fett gesetzter Begriff, Gedankenstrich, Glossarbeschreibung.
  2. InstructionsSechs durchnummerierte Regeln: Absicht erfassen, wörtlich zitieren, Mehrdeutigkeit auflösen, annähern, im Glossar bleiben, knapp bleiben.
  3. ExamplesDrei durchgearbeitete Nachschlagebeispiele: ein gefühlsbasiertes, eine Disambiguierung und ein physikalisches Gefühl.
  4. GlossaryZwölf gruppierte Begriffslisten, von Entrances & Exits bis Principles to Know.
Die eigene Beschreibung des Skills
„Reverse-Lookup-Glossar, das eine vage Beschreibung einer Web-Animation oder eines Bewegungseffekts in seinen exakten Begriff übersetzt („das Federnde, wenn ein Popover öffnet" → Pop in; „das iOS-Gummiband-Scroll" → Rubber-banding). Verwenden Sie es, wenn der Benutzer fragt „wie nennt man das, wenn…" oder einen Bewegungseffekt beschreibt, ohne seinen Namen zu kennen, und das richtige Wort haben möchte, um eine KI oder einen Designer damit zu briefen. Zum Benennen eines Effekts, nicht zum Entwerfen oder Erstellen."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 12.884 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum animation-vocabulary-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Muss ich den Begriff bereits kennen, um dies zu nutzen?

Nein. Sie beschreiben den Effekt, so gut Sie können — das Beispiel der Datei selbst lautet lediglich „the iOS rubber-band scroll“ — und die Antwort kommt als der Begriff Rubber-banding zurück, mit der zugehörigen Glossarbeschreibung.

Was passiert, wenn mein Effekt nicht im Glossar steht?

Es nennt den nächstliegenden Begriff und weist unmissverständlich darauf hin, dass es sich nur um eine Annäherung handelt, oder es formuliert den Effekt in Glossarbegriffen um, etwa „das ist ein Stagger von Scale-in-Entrances“. Es erfindet keinen Begriff, der nicht in der Liste steht.

Wird die Animation für mich entworfen oder gebaut?

Nein. Der Skill ist auf das Benennen des Effekts beschränkt; das Entwerfen oder Bauen ist ausdrücklich nicht Teil des Umfangs. Sie nehmen den zurückgegebenen Begriff und nutzen ihn, um denjenigen oder das zu briefen, was die Bewegung baut.

Animationsvokabular

Führen Sie animation-vocabulary für eine echte Motion- und Video-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie animation-vocabulary über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows