Zur Nutzungsanleitung springen
fixing-motion-performancevon Julien Thibeaut

Fixing Motion Performance Skill.

Ein Claude Code und Codex Skill für Motion und Video: findet und behebt ruckelnde CSS/JS-Animationen und Scroll-gekoppelte Bewegungen.

  • Motion & Video
  • Review-Bericht
ibelick/ui-skills · skills/fixing-motion-performance/SKILL.mdSKILL.md
--- name: fixing-motion-performance description: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. --- ## how to use ## when to apply ## rendering steps glossary ## rule categories by priority ## common fixes ## review guidance
Front Matter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 5.561 Zeichen insgesamt

01 Was es tut

Was der fixing-motion-performance 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 Audit-and-Fix-Playbook für die Performance von CSS- und JS-Animationen, gedacht für Designer und Entwickler, die ruckelige Übergänge, scroll-gebundene Bewegungen und Blur-Effekte prüfen oder überarbeiten. Es kommt als Slash-Command: ohne Zusatz aufgerufen, wendet es die Richtlinien auf jede Animationsarbeit im Gespräch an; mit einer Datei aufgerufen, meldet es Verstöße unter Angabe der genauen Zeile, der Begründung und eines codebasierten Fixes.

Die Regeln sind nach Priorität geordnet: von Never-Patterns, der Wahl des Mechanismus und den Tool-Grenzen auf kritischer Stufe, über Messung, Scroll, Paint, Layer und Blur bis hin zu View Transitions. Es weigert sich, Animations-Bibliotheken zu migrieren, sofern nicht ausdrücklich gewünscht, und wendet die Regeln innerhalb des bestehenden Stacks an.

Was er erzeugt

  • Ein kurzer Satz pro Verstoß, der erklärt, warum er relevant ist.
  • Ein konkreter, codebasierter Fix für jeden Verstoß.
  • Eine ausdrückliche Begründung für jede Nicht-Standard-Entscheidung bei Rendering-Arbeit.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Als Slash-Command aufrufen

    Führen Sie /fixing-motion-performance aus, um die Vorgaben an die im Session-Verlauf bereits diskutierte Animationsarbeit zu binden.

  2. 02
    Oder auf eine Datei anwenden

    Die Angabe eines Pfads schaltet in den Review-Modus: Die Datei wird gegen jede Regel geprüft, statt laufende Arbeit einzuschränken.

  3. 03
    Bericht in drei Teilen

    Jeder Befund zitiert die betroffene Zeile, liefert einen kurzen Satz zur Relevanz und schlägt einen codebasierten Fix vor.

  4. 04
    Eigenschaften nach Rendering-Schritt sortieren

    Das Glossar unterteilt die Arbeit in Composite, Paint und Layout, damit der Reviewer erkennt, welche Animationen günstig und welche teuer sind.

  5. 05
    In Prioritätsreihenfolge durchsetzen

    Kritische Kategorien werden vor den weniger wirkungsvollen geprüft, sodass Never-Patterns und Tool-Grenzen zuerst geklärt werden.

  6. 06
    Innerhalb des bestehenden Stacks bleiben

    Die Migration einer Bibliothek ist nicht Teil der Aufgabe; die Regeln werden auf das Animationssystem angewendet, das die Codebasis bereits verwendet.

02 Finden Sie Ihren Favoriten

Wann das fixing-motion-performance Skill zu verwenden ist

Verwenden Sie das fixing-motion-performance Skill in Claude Code oder Codex, wenn die Aufgabe eine Motion-and-Video-Arbeit dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Hinzufügen oder Ändern von UI-Animationen, die mit CSS, WAAPI, Motion, rAF oder GSAP geschrieben sind.
  • Refactoring von Interaktionen oder Übergängen, die sich bereits ruckelig anfühlen.
  • Implementieren von scroll-gebundener Bewegung oder Reveal-on-Scroll-Effekten, die derzeit über Scroll-Events laufen.
  • Animieren von Layout, Filtern, Masken, Verläufen oder CSS-Variablen, bei denen die Kostenbilanz die eigentliche Frage ist.
  • Überprüfen von Komponenten, die auf will-change, Transforms oder Messungen setzen.

Grenzen kennen

  • View-Transitions, die über Änderungen auf Navigationsebene hinausgehen, etwa interaktionsintensive UI oder Abläufe, die unterbrechbar sein müssen.
  • Kontinuierliche oder großflächige Blur-Effekte, die ausgeschlossen statt optimiert werden.

Was Sie bereitstellen sollten

  • Der Slash-Befehl alleinFür laufende Arbeit reicht der bloße Aufruf; er prägt dann alle im Gespräch vorgenommenen Animationsänderungen.
  • Ein Dateipfad für den Review-ModusWird eine Datei übergeben, prüft der Skill diese Datei gegen alle Regeln und erstellt den Verstoßbericht.
  • Das bestehende AnimationssystemSie geben keine Ziel-Bibliothek vor; der Code in seinem aktuellen Zustand ist der Bezugsrahmen, und die Regeln werden innerhalb dessen angewendet.

03 Innerhalb des Skills

Regeln, die der fixing-motion-performance Skill Claude Code und Codex mitgibt

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

  1. Nie Lese- und Schreibvorgänge Verschachteln

    Layout-Lese- und Schreibvorgänge dürfen nicht innerhalb desselben Frames gemischt werden, und mehrere Animationssysteme, die jeweils Layout messen oder verändern, dürfen nicht gleichzeitig laufen.

  2. Nie Animation von der Scroll-Position Ableiten

    Animation über scrollTop, scrollY oder Scroll-Events zu steuern ist untersagt; verwenden Sie stattdessen Scroll- oder View-Timelines und IntersectionObserver.

  3. Jede rAF-Schleife Braucht einen Exit

    Eine requestAnimationFrame-Schleife ohne Abbruchbedingung ist ein Nie-Muster, kein akzeptabler Kompromiss.

  4. Standardmäßig Transform und Opacity Verwenden

    Das sind die Compositor-Eigenschaften und der Ausgangspunkt für Bewegung; JS-gesteuerte Animation ist Interaktionen vorbehalten, die sie erfordern.

  5. Blur auf 8px Begrenzen

    Blur-Animation muss klein bleiben, bei 8px oder weniger, und ist auf kurze einmalige Effekte beschränkt; kontinuierlicher Blur und Blur auf großen Flächen sind ausgeschlossen.

  6. will-change Gezielt Einsetzen

    Layer-Promotion erfolgt nicht automatisch, daher wird will-change vorübergehend und eng eingesetzt, statt auf vielen oder großen promoteten Layern zu bleiben.

  7. Animieren Sie CSS-Variablen nicht für Bewegung

    Custom Properties, die transform, opacity oder position steuern, dürfen nicht animiert werden, und vererbte animierte Variablen sind grundsätzlich verboten.

  8. Keine halben Migrationen

    Innerhalb einer Komponente dürfen APIs nicht teilweise migriert werden, und Animationsstile dürfen nicht gemischt werden.

04 In Betrieb nehmen

fixing-motion-performance 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.

fixing-motion-performance 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/ibelick/ui-skills --skill fixing-motion-performance

Generische skills-CLI-Form für skills/fixing-motion-performance/SKILL.md; das Repository kann einen 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
Use /fixing-motion-performance on [path/to/Component.tsx]. The [side panel] transitions width on hover, the reveal-on-scroll is wired to a window scroll listener, and there is a blurred overlay on a full-width section. Report each violation with the exact line, why it matters, and a concrete fix, working within our existing [Motion] setup rather than migrating libraries.

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:

  • Bestätigen Sie, dass die vorgeschlagene Korrektur die kostengünstigste Rendering-Arbeit leistet, die den beabsichtigten Effekt trotzdem erzielt.
  • Prüfen Sie, dass alles, was aus dem Bildschirmbereich bewegt wurde, tatsächlich pausiert oder gestoppt ist und nicht weiterläuft.
  • Wo Layer-Promotion wichtig ist, verifizieren Sie diese mit Tooling, statt sie einfach anzunehmen.

In OpenDesign importieren Sie fixing-motion-performance über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann 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/ibelick/ui-skills Branch main
Skill-Datei
skills/fixing-motion-performance/SKILL.md Inhalts-Checksum bei Verifikation aufgezeichnet; Commit 79081ab
License
MIT Aus LICENSE.
Repository-Sterne
8.402 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository ibelick/ui-skills, das 5 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für fixing-motion-performance.
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. VerwendungEin bloßer Aufruf schränkt die Sitzung ein; ein Datei-Argument löst einen vollständigen Verstoßbericht aus.
  2. Wann anwendenListet die fünf Situationen auf, die diese Richtlinien bei Animationsarbeiten auslösen sollten.
  3. Glossar der Rendering-SchritteDefiniert Composite, Paint und Layout sowie die jeweils betroffenen Eigenschaften.
  4. Regelkategorien nach PrioritätNeun Kategorien, eingestuft mit einem Impact-Label, von kritisch bis niedrig.
  5. KurzreferenzNeun nummerierte Kategorien kurzer Stichpunkt-Einschränkungen, von Nie-Mustern bis Tool-Grenzen.
  6. Häufige KorrekturenCSS- und JS-Vorher/Nachher-Snippets für Layout-Thrashing, scroll-gebundene Bewegung und FLIP-Messung.
  7. Review-LeitfadenWie das Review durchzuführen ist: zuerst kritisch, günstigste Arbeit, begründete Nicht-Standard-Entscheidungen, umsetzbare Hinweise.
Die eigene Beschreibung des Skills
„Prüft und behebt Animationsleistungsprobleme einschließlich Layout-Thrashing, Compositor-Eigenschaften, scroll-gebundener Bewegung und Blur-Effekten. Verwenden, wenn Animationen stottern, Übergänge ruckeln oder CSS/JS-Animationsleistung geprüft wird."

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

06 Vor der Installation

Fragen zum fixing-motion-performance Skill

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

Welche Animationsbibliotheken deckt es ab?

Es nennt CSS, WAAPI, Motion, rAF und GSAP in seinem Anwendungsbereich, ist also breit angelegt statt an ein Framework gebunden. Da es Regeln innerhalb des bestehenden Systems anwendet, passt es sich an das an, was Sie bereits verwenden.

Fixing Motion Performance

Führen Sie fixing-motion-performance auf einer echten Motion- und Video-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie fixing-motion-performance über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan, bevor das Ergebnis erscheint.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

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