animatevon Emil Kowalski

Animate Skill.

Ein Skill für Claude Code und Codex für Motion und Video: erstellt eine Animation von Grund auf und bestimmt der Reihe nach Zweck, Tool, Eigenschaften, Kurve und Dauer.

Motion & Video
UI-Code

OpenDesign herunterladen Anleitung ansehen

emilkowalski/skills · skills/animate/SKILL.mdSKILL.md

--- name: animate description: Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; … --- ## Operating Posture ## Hard Rules ## The Build Sequence ## Recipes ## Never Ship ## Output

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 11.494 Zeichen insgesamt

01 Was es tut

Was der animate-Skill in Claude Code und Codex tut

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

Ein Konstruktions-Skill, kein Audit: Er verwandelt eine Anfrage nach Bewegung in eine Umsetzung, die eine strikte Prüfung überstehen würde – dabei arbeitet er in fester Reihenfolge: ob überhaupt animiert werden soll, Zweck, Werkzeug, Eigenschaften, Kurve und Dauer, Unterbrechung, Austritt – und schreibt dann den Code.

Er richtet sich an Designer und Entwickler, die die Entscheidung getroffen haben möchten, statt eine Auswahl an Optionen zu erhalten. Die Details stammen aus festen Tabellen: Häufigkeitsstufen, ausschließlich Transform und Opacity, benannte Cubic-Bezier-Kurven, Dauerbereiche pro Element sowie Reduced-Motion- und Hover-Gating, die mit der Animation mitgeliefert werden. Zum Auditieren einer Codebasis oder zum Kritisieren eines Diffs verwenden Sie die verwandten Skills.

UI-Code

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Zuerst nach Häufigkeit filtern
Der erste Schritt kann die Aufgabe beenden, bevor überhaupt Code existiert: Alles, was 100+ Mal am Tag geöffnet wird oder per Tastaturkürzel ausgelöst wird, erhält keine Animation.
02
Den Zweck in einem Wort benennen
Kein Zweck, keine Animation. Sie zu wollen, weil sie cool aussieht, an einem Element, das der Nutzer ständig sieht, ist ein Grund zum Abbrechen statt zum Bauen.
03
Das günstigste funktionierende Werkzeug wählen
Gehen Sie die Werkzeugtabelle durch und halten Sie beim ersten passenden Eintrag an: CSS transition, @starting-style, CSS animation, WAAPI, Motion.
04
Die Eigenschaften einschränken
Transform und Opacity erledigen die Arbeit, da sie Layout und Paint überspringen und auf der GPU laufen; clip-path ist die zulässige vierte Eigenschaft, und das Animieren von height wird nur bei Akkordeons toleriert.
05
Kurve und Dauer aus den Tabellen festlegen
Ein- und Austritt bedeuten ease-out, Bewegung auf dem Bildschirm ease-in-out, Hover- und Farbänderungen ease, konstante Bewegung linear, Standard ease-out.
06
Unterbrechung und Austritt planen
Schnell erneut ausgelöste Elemente verwenden transitions, Gesten verwenden springs, und der Austritt spiegelt den Eintritt, sodass Swipe-to-Dismiss offensichtlich wirkt.

02 Finden Sie Ihren Favoriten

Wann der animate Skill zu verwenden ist

Verwenden Sie das animate Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art betrifft. Eignung und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

Sie wurden gebeten, etwas zu animieren, Bewegung hinzuzufügen, eine Komponente lebendig wirken zu lassen oder einen Übergang zu bauen.
Die Aufgabe entspricht einem gängigen Komponentenfall, daher starten Sie mit einem Rezept statt mit einer leeren Datei.

Grenzen kennen

Selbstprüfung bevor Sie fertig werden.
Jeder dieser Punkte ist ein automatischer Block in review-animations:

03 Innerhalb des Skills

Regeln, die der animate-Skill Claude Code und Codex gibt

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

Tastatur- und 100+/Tag-Aktionen animieren nie
Tastatur-initiierte Aktionen sind ein Ausschlussgrund und keine Ermessensfrage, und Elemente, die zig Mal am Tag genutzt werden, erhalten nur kaum wahrnehmbare Bewegung – oder gar keine.
Keine angenäherten Werte
Jede Kurve, Dauer und jede Spring-Konfiguration stammt aus den Tabellen des Skills. Eine vertraut wirkende cubic-bezier ist keine Quelle.
Bestehende Token erweitern, nie forken
Existiert im Codebase bereits eine --ease-out-Variable oder eine Duration-Skala, wird diese verwendet; ein paralleles Motion-System aufzubauen gilt als Fehler.
Nie ease-in auf UI
ease-in startet langsam und verzögert genau den Moment, den der Nutzer beobachtet, daher ist es hier verboten; Standard ist ease-out.
Nie scale(0)
Einblendungen starten bei scale(0.9–0.97) plus opacity 0, denn in der realen Welt entsteht nichts aus dem Nichts.
Reduced Motion und Pointer-Gating zusammen mit dem Code liefern
Die prefers-reduced-motion Media-Query und das Hover-Gating gehören in denselben Change wie die Animation, nicht in ein späteres Ticket oder Follow-up.
Die Entscheidung treffen, nicht ein Menü anbieten
Animationsoptionen als Auswahl zu präsentieren ist hier selbst ein Fehlermodus; die Begründung in einer Zeile nennen und die Implementierung schreiben.
Delight nur auf der seltenen Stufe
Delight ist nur auf der seltenen oder Erstnutzungs-Stufe erlaubt, etwa bei Onboarding, Erfolg und Feiern; anderswo braucht es einen echten, benannten Zweck.

04 In Betrieb nehmen

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

animate 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 animate

Generische skills-CLI-Form für skills/animate/SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

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

Die SKILL.md enthält keinen Beispiel-Prompt; dieser Starter ist aus der Katalog-Einzeiler geschrieben. Ersetzen Sie die Aufgabenzeile mit Ihrem echten Briefing.

Starter prompt

Use the animate skill on the material I attach. What the skill should do here: Builds an animation from scratch, deciding purpose, tool, properties, curve, and duration in order. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Quelle: Starter-Prompt geschrieben aus der Katalog-Einzeilen-Verwendung (nicht aus der SKILL.md).

Das erste Ergebnis prüfen

Prüfen Sie vor Annahme der Ausgabe Folgendes im Transkript und in den Dateien:

Schritte 1 und 2 sind entscheidend. Greifen Sie nicht zu einer Kurve, bevor Sie wissen, ob überhaupt animiert wird.
Jede Kurve, Duration und Spring-Config stammt aus den Tabellen unten. Erfinden Sie niemals cubic-bezier(0.4, 0, 0.2, 1), weil es vertraut aussieht.
Wenn --ease-out oder eine Duration-Skala bereits existiert, verwenden Sie diese. Ein paralleles System hinzuzufügen ist ein Defekt.
Installieren Sie keine Motion-Library für ein Fade.

In OpenDesign importieren Sie animate über den SKILL.md-Link: Plugins → Add → Skill → Import from link, dann wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Skill-Datei: skills/animate/SKILL.md Content-Checksum bei Verifikation aufgezeichnet; Commit d23d7f8
License: MIT Aus LICENSE.
Repository-Sterne: 37.516 GitHub-Snapshot vom 14.09.2026 für das gesamte emilkowalski/skills-Repository, das 9 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für animate.
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.

Die eigene Beschreibung des Skills

„Erstellt eine Animation von Grund auf und trifft die Entscheidungen in der Reihenfolge, die darüber entscheidet, ob sie sich richtig anfühlt – soll sie überhaupt animieren, welcher Zweck, welches Werkzeug, welche Eigenschaften, welche Kurve und Dauer, wie sie unterbricht, wie sie endet. Schreibt die Implementierung. Verwenden Sie es, wenn Sie gebeten werden, etwas zu animieren, Bewegung hinzuzufügen, eine Komponente lebendig zu machen oder einen Übergang zu erstellen. Für die Kritik vorhandener Bewegungen verwenden Sie review-animations; für die Überprüfung einer gesamten Codebasis verwenden Sie improve-animations."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 11.494 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

Animate

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

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

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/emilkowalski/skills --skill animate

Was der animate-Skill in Claude Code und Codex tut

In den eigenen Worten des Skills

So funktioniert es

Wann der animate Skill zu verwenden ist

Gut geeignet

Grenzen kennen

Regeln, die der animate-Skill Claude Code und Codex gibt

Tastatur- und 100+/Tag-Aktionen animieren nie

Keine angenäherten Werte

Bestehende Token erweitern, nie forken

Nie ease-in auf UI

Nie scale(0)

Reduced Motion und Pointer-Gating zusammen mit dem Code liefern

Die Entscheidung treffen, nicht ein Menü anbieten

Delight nur auf der seltenen Stufe