Zur Nutzungsanleitung springen
review-animationsvon Emil Kowalski

Review Animations Skill.

Ein Claude Code- und Codex-Skill für Design Review: prüft Animationscode auf Timing, Interaktion und Verarbeitung nach hohen Qualitätsmaßstäben.

  • Design Review & Accessibility
  • Review-Bericht
emilkowalski/skills · skills/review-animations/SKILL.mdSKILL.md
--- name: review-animations description: Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned. --- ## Operating Posture ## The Ten Non-Negotiable Standards ## Aggressive Escalation Triggers ## Remedial Preference Hierarchy ## Required Output Format ## Guidelines
Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 8.040 Zeichen insgesamt

01 Was es tut

Was der review-animations Skill 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

Ein bewusst eng gefasster Review-Skill: Er beurteilt Animations- und Motion-Code nach einem hohen handwerklichen Anspruch und nichts sonst und lehnt allgemeine Code-Reviews ab. Seine inhaltlichen Maßstäbe stammen aus Emil Kowalskis Animationsphilosophie, und seine Methode – zehn nicht verhandelbare Standards, aggressive Eskalationsauslöser, eine neunstufige Abhilfe-Hierarchie und ein gestuftes Ergebnis – ist darauf ausgelegt, in einem Urteil zu enden.

Der Standard ist, zu markieren; Zustimmung muss man sich verdienen. Jede Animation im Diff muss sich durch Zweck und Häufigkeit rechtfertigen, responsives Easing verwenden, unter 300 ms bleiben, von ihrem Auslöser her skalieren, auf transform und opacity laufen, unterbrechbar sein, reduzierte Bewegung respektieren und asymmetrisches Timing verwenden. Das Ergebnis ist eine Vorher/Nachher/Warum-Befundtabelle plus eine Block- oder Approve-Entscheidung, mit Angabe von file:line.

Prüfbericht
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    An zehn Standards messen

    Jede Animation im Diff wird gegen zehn nicht verhandelbare Kriterien geprüft, die Rechtfertigung, Häufigkeit, Easing, Dauer, Ursprung, Unterbrechbarkeit, GPU-Eigenschaften, Zugänglichkeit, Asymmetrie und Kohärenz umfassen.

  2. 02
    Eskalationsauslöser sofort markieren

    Eine festgelegte Liste von Warnsignalen wird konsequent benannt statt diskutiert, darunter transition: all, scale(0)-Einblendungen, ease-in bei UI-Elementen, Animationen auf Tastatureingaben oder Aktionen mit 100+/Tag sowie fehlende Behandlung von reduzierter Bewegung.

  3. 03
    Die frühestmögliche Abhilfe bevorzugen

    Korrekturen werden in Hierarchie-Reihenfolge vorgeschlagen: vom Löschen der Animation über deren Reduzierung bis zur Korrektur von Easing, Ursprung, Unterbrechbarkeit, GPU-Eigenschaften, Timing, Feinschliff und schließlich Zugänglichkeit und Kohärenz.

  4. 04
    Die zwei erforderlichen Teile ausgeben

    Das Review kommt in fester Reihenfolge zurück: Teil 1 ist eine einzelne Befundtabelle, Teil 2 ist gestufter Kommentar, der mit einer expliziten Entscheidung endet.

  5. 05
    Kommentare stufen und entscheiden

    Die übrige Kommentierung wird in sechs Wirkungsstufen gruppiert, die höchste zuerst, leere Stufen entfallen; sie schließt mit einer Entscheidung zum Blockieren oder Freigeben.

02 Finden Sie Ihren Favoriten

Wann Sie das review-animations Skill verwenden

Verwenden Sie den review-animations Skill in Claude Code oder Codex, wenn es um ein Design-Review dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Prüft Animations- und Motion-Code anhand eines hohen Qualitätsmaßstabs, der aus Emil Kowalskis Design-Engineering-Philosophie abgeleitet ist. Standardmäßig kritisch; Zustimmung muss verdient werden.

Grenzen kennen

  • Es schreibt keine Features, behebt keine unabhängigen Bugs und prüft keinen Code außerhalb von Motion.

03 Innerhalb des Skills

Was das review-animations Skill zum Design-Review beiträgt

4 Dinge, die die SKILL.md Claude Code oder Codex anweist zu tun, in der Abschnittsreihenfolge der Datei.

  1. Arbeitshaltung

    Sie sind ein Senior Design Engineer mit einem schonungslosen Blick für Qualität. Ihr Fokus liegt auf Bewegung, die sich richtig anfühlt, nicht auf Bewegung, die nur läuft.

  2. Die zehn nicht verhandelbaren Standards

    Jede Animation im Diff wird daran gemessen. Ein Verstoß ist ein Befund.

  3. Hierarchie bevorzugter Abhilfemaßnahmen

    Beim Vorschlagen von Korrekturen frühere Maßnahmen gegenüber späteren bevorzugen:

  4. Guidelines

    Bevorzugen Sie CSS-Transitions/@starting-style/WAAPI für vorbestimmte Motion; JS/Springs für dynamische, unterbrechbare, gestengesteuerte Motion.; Wenn unsicher, ob sich Motion richtig anfühlt, empfehlen Sie eine Überprüfung in Zeitlupe / Frame-für-Frame

04 In Betrieb nehmen

review-animations 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.

review-animations 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 review-animations

Allgemeine skills-CLI-Form für skills/review-animations/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Design-Review-Aufgabe geben

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 review-animations skill on the material I attach. What the skill should do here: Reviews animation code for timing, interaction, and finish against a high craft bar. 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:

  • Das Ergebnis wird als Review-Bericht geliefert, wie es der Katalog für dieses Skill auflistet.
  • Der Agent nennt das review-animations Skill in seinem Plan oder Transkript, bevor er das Ergebnis liefert.
  • Ihre eigenen Inhalte, Namen und Zahlen erscheinen unverändert in der Ausgabe.

In OpenDesign ist review-animations mitgeliefert: Plugins → Skills, in der oberen Leiste auswählen.

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/review-animations/SKILL.md Content-Prüfsumme bei Verifizierung 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 review-animations.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.
Die eigene Beschreibung des Skills
„Prüft Animations- und Motion-Code anhand eines hohen Qualitätsmaßstabs, der aus Emil Kowalskis Design-Engineering-Philosophie abgeleitet ist. Standardmäßig kritisch; Zustimmung muss verdient werden."

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

Review Animations

Führen Sie review-animations für eine echte Design-Review-Aufgabe aus.

Das review-animations Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter Plugins → Skills aus, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill review-animations