design-motion-principlesvon Kyle Zantos

Design Motion Principles Skill.

Ein Claude Code- und Codex-Skill für Motion und Video: zielgerichtete Interaktionsbewegung oder eine Prüfung bestehender Animation nach Kowalski, Krehel und Tompkins.

Motion & Video

OpenDesign herunterladen Anleitung ansehen

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

Front Matter und Abschnittsüberschriften aus der vorgelagerten Datei vom 14.09.2026 · 6.794 Zeichen vollständig

01 Was es tut

Was die Skill design-motion-principles 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

Eine Interaktions- und Motion-Design-Skill für Coding-Agents, die in zwei Modi arbeitet. Create baut interaktive Komponenten mit gezielter Bewegung; Audit prüft bestehende Motion und meldet Befunde je Designer, einschließlich AI-Slop-Mustern, in einem gebrandeten HTML-Report mit Loop-Demos.

Sie gliedert ihre Empfehlungen entlang drei Perspektiven — Emil Kowalski zu Zurückhaltung und Geschwindigkeit, Jakub Krehel zu Produktionsschliff, Jhey Tompkins zu spielerischem Experimentieren — gewichtet nach Projektart statt einheitlich angewendet. Abgedeckt werden Web- und App-UI-Motion: HTML/CSS, React, Framer Motion, iOS/Android-Übergänge und Design-System-Animationen. Das Frequenz-Gate, kontextabhängige Dauern und die verpflichtende Behandlung von prefers-reduced-motion laufen in beiden Modi.

Was er erzeugt

Interaktive Komponenten, die im Create-Modus mit gezielter Bewegung gebaut werden.
Ein Review-Report je Designer im Audit-Modus.
Ein gebrandeter HTML-Report mit Loop-Demos der Befunde.
Eine Audit-Report-Vorlage, standardmäßig als HTML gerendert, mit einem Terminal-Modus als optionalem Flag.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Den Modus aus der Anfrage erkennen
Build-artige Formulierungen wählen Create; Audit, Review, Bewertung, Feedback oder „ist diese Motion gut“ wählen Audit.
02
Die passende Workflow-Datei lesen
Die Moduserkennung ist Schritt 0 und steuert alles Weitere — die Workflow-Datei für diesen Modus wird wie geschrieben befolgt.
03
Die drei Designer je nach Kontext gewichten
Emil, Jakub und Jhey werden als kontextabhängige Perspektiven behandelt, niemals als universelle Regeln.
04
Häufigkeits- und Dauer-Leitlinien anwenden
Zuerst kommt, wie oft die Interaktion ausgelöst wird, dann die Dauerziele aus der jeweiligen Perspektive.
05
Das Artefakt für den Modus ausgeben
Create liefert Komponenten; Audit liefert einen Bericht pro Designer, dessen Befunde jeweils eine Demo-Karte erhalten, die aus einer visuellen Container-Vorlage erstellt wird.

02 Finden Sie Ihren Favoriten

Wann Sie die design-motion-principles Skill verwenden

Verwenden Sie die design-motion-principles Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art betrifft. Eignung und Grenzen unten stammen aus der eigenen Datei der Skill.

Gut geeignet

Produktivitätstools wie Linear oder Raycast, bei denen Emils Zurückhaltung und Tempo-Regeln führen und Jhey nur beim Onboarding eingesetzt wird.
Kinder-Apps und Bildungsprodukte, bei denen Feinschliff und Freude wichtiger sind als Produktivitäts-Tempo-Regeln, wobei Emil hochfrequenten Spielinteraktionen vorbehalten ist.
Kreativ-Portfolios, angeführt von Jakub für Feinschliff und Jhey für Erfindungsreichtum, wobei Emil auf hochfrequente Interaktionen begrenzt ist.
Mobile Apps, bei denen Jakub führt, Emil unterstützt und Jhey Highlights liefert.

Grenzen kennen

Motion-Arbeit außerhalb von Web- und App-UI – Game-Engines, Lottie, Rive oder Video –, bei denen das Häufigkeitsframework weiterhin gilt, sich die designerspezifischen Techniken jedoch möglicherweise nicht übertragen lassen.
Dauern anhand einer einzigen universellen Zahl zu beurteilen; Dauern zu markieren oder zu begrenzen, ohne die kontextabhängige Gewichtung zu prüfen, ist ausdrücklich ausgeschlossen.
Über Tastatur ausgelöste Interaktionen werden unabhängig vom Projekttyp vollständig von Animationen ausgeschlossen.

Was Sie bereitstellen sollten

Der ProjekttypEr bestimmt die primäre, sekundäre und selektive Gewichtung, sodass ein SaaS-Dashboard zuerst auf Emil und nicht auf Jakub verweist.
Wie oft die Interaktion ausgelöst wirdDas Häufigkeits-Gate wird angewendet, bevor irgendetwas hinzugefügt oder genehmigt wird, sodass die Antwort verändert, was überhaupt für Animation in Frage kommt.
Die Bewegung selbst und ihr StackÜbergänge, Hover-Zustände, Mikrointeraktionen und Enter-/Exit-Animationen, in React, Framer Motion, CSS oder HTML.

03 Innerhalb des Skills

Regeln, die die design-motion-principles 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.

Die Auslösefrequenz entscheiden lassen, ob animiert wird
Häufige Interaktionen, die hunderte Male pro Tag ausgelöst werden, erhalten keine Animation oder einen sofortigen Übergang; seltene dürfen ausdrucksstark sein.
prefers-reduced-motion immer behandeln
Die Anforderung wird so formuliert, dass sie alles abdeckt, was im Create-Modus erzeugt oder im Audit-Modus überprüft wird, ohne Ausnahmen.
Nachfragen, wenn die Anfrage mehrdeutig ist
Bei einer vagen Anfrage wie „schau dir diese Modal-Animation an“ wird nicht geraten – der Nutzer wird gebeten, zwischen Create oder Audit zu wählen.
Die Designer je Projekttyp neu gewichten
Die Zuordnungstabelle ändert primäre, sekundäre und selektive Perspektiven; bei einer Landingpage ist Jakub primär, Jhey sekundär, Emil nur für Formulare und Navigation.
Nutzen Sie Auffälligkeit als Qualitätstest
Motion, die bei jeder einzelnen Interaktion ein Kompliment hervorruft, gilt als zu auffällig für die Produktion.
Laden Sie die vom Modus vorgeschriebenen Referenzen
Der Create-Modus lädt immer das Motion Cookbook (Rezepte für Enter/Exit, Easing, Springs, clip-path, @property, FLIP, scroll-gesteuerte Animationen); der Audit-Modus lädt seine eigenen immer aktiven Dateien.

04 In Betrieb nehmen

design-motion-principles 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.

design-motion-principles 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/kylezantos/design-motion-principles --skill design-motion-principles

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

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

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Prüfen Sie, ob das Gewicht der Motion dazu passt, wie oft die Interaktion tatsächlich ausgelöst wird, nicht wie gut sie aussieht.
Bewerten Sie die Feinarbeit an der Produktion anhand der Jakub-Bandbreite von 200–500 ms und nicht an einer einzelnen globalen Dauer.
Arbeiten Sie im Audit-Modus die systematische Audit-Checkliste durch, statt die Animation nur nach Gefühl zu beurteilen.
Lassen Sie die Ergebnisse durch das Anti-Checklist-Qualitätstor laufen, das die AI-Slop-Motion-Kategorien und Anti-Patterns benennt.
Prüfen Sie bei komplexen Animationen GPU-Optimierung, will-change-Einsatz und Layout-Thrashing.

In OpenDesign importieren Sie design-motion-principles über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann 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: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles Branch main
Skill-Datei: skills/design-motion-principles/SKILL.md Content-Prüfsumme bei Verifizierung erfasst; Commit 4a9ca87
License: MIT Aus LICENSE.
Repository-Sterne: 1.048 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository kylezantos/design-motion-principles. Keine Bewertung oder Nutzungszahl für design-motion-principles.
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

SCHRITT 0: Modus erkennen (ZUERST DIES TUN)Ordnet die Formulierung der Anfrage Create oder Audit zu und fragt nach, wenn es unklar ist.
Die drei DesignerWer Emil, Jakub und Jhey sind, welche Frage jeder beantwortet, und der Tribute-Hinweis.
Kontext-zu-Perspektive-ZuordnungSieben Projekttypen, zugeordnet zu primärer, sekundärer und selektiver Gewichtung der Designer.
Kernprinzipien (beide Modi)Häufigkeits-Gate, Richtlinien zur Dauer, die goldene Regel und nicht optionale Barrierefreiheit.
ReferenzindexJede Referenzdatei gepaart mit den Bedingungen, unter denen sie geladen werden soll.
Workflow-IndexDie zwei Workflow-Dateien: Komponenten bauen oder Motion überprüfen und berichten.

Die eigene Beschreibung des Skills

„Experte für Motion- und Interaktionsdesign basierend auf den Techniken von Emil Kowalski, Jakub Krehel und Jhey Tompkins. Zwei Modi — interaktive Komponenten mit zielgerichteter Motion erstellen oder bestehende Animationen auditieren, um AI-Slop-Motion-Muster zu erkennen (Audit gibt einen gebrandeten HTML-Report mit Loop-Demos aus). Verwenden Sie diesen Skill beim Erstellen, Hinzufügen, Animieren oder Überprüfen von UI-Motion: Übergänge, Hover-Zustände, Mikro-Interaktionen, Enter/Exit-Animationen oder jegliche Motion-Design-Arbeit in React, Framer Motion, CSS oder HTML. Bietet Perspektiven pro Designer mit kontextabhängiger Gewichtung."

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

06 Vor der Installation

Fragen zum Skill design-motion-principles

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

Brauche ich React, oder funktioniert es auch mit reinem CSS und HTML?

Beides fällt in den Anwendungsbereich. Der Skill deckt Web- und App-UI-Motion ab, über HTML/CSS, React, Framer Motion oder Motion, iOS/Android-Übergänge und Design-System-Animationen.

Wie entscheidet er, ob etwas gebaut oder überprüft werden soll?

Er liest die Anfrage auf Create- oder Audit-Signale, und wenn diese unklar sind, fragt er nach. Ist AskUserQuestion nicht verfügbar, greift er auf eine reine Textfrage zurück, die die beiden Modi anbietet.

Erhält eine Kinder-App die gleiche schnelle, zurückhaltende Motion wie ein Dashboard?

Nein. Die Gewichtung ist kontextabhängig, sodass eine Kinder-App Jakub und Jhey für Feinschliff und Freude priorisiert, statt Emils produktivitätsorientierte Geschwindigkeitsregeln — Freude wird in diesem Kontext als Ziel behandelt.

Stehen die drei Designer hinter diesem Skill?

Nein. Die Lenses fassen ihre öffentlich veröffentlichten Kurse, Artikel, Talks und Open-Source-Projekte zusammen, und das Gewichtungsframework ist die eigene Interpretation des Skills, die ihnen zu Ehren benannt wurde.

Design Motion Principles

Führen Sie design-motion-principles für eine echte Motion- und Video-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie design-motion-principles ü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