106.9K+Download
Zur Nutzungsanleitung springen
UI Animationvon mblode

UI Animation Skill.

Zweckgerichtete Interface-Bewegung entwickeln, debuggen und messen.

  • UI-Bewegung
  • Reduzierte Bewegung
OpenDesign herunterladenNutzungsanleitung ansehen
Quellprüfung · ui-animationSKILL.md
Aufgabe Zweckgerichtete Interface-Bewegung entwickeln, debuggen und messen. Ergebnisse Eine gezielte Implementierung oder Prüfung von Interface-Bewegung. Vor dem Start Komponentencode oder eine klare Referenzaufnahme sowie Aktionshäufigkeit und Zielgeräte bereitstellen. Festlegen, ob es um eine Bewegungsprüfung, eine Implementierungsänderung oder eine gemessene Rekonstruktion geht.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · kein generiertes Beispiel

01 Funktionen

Zweckgerichtete Interface-Bewegung entwickeln, debuggen und messen

UI-Übergänge, Federn und Gesten prüfen oder Bewegung aus Aufnahmen anpassen – mit Kontrollen für Unterbrechung, Bildrate und reduzierte Bewegung.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

ui-animation behandelt Entwicklung, Prüfung und Messung von Interface-Bewegung. Am Anfang stehen Zweck und Häufigkeit einer Interaktion, danach folgen Timing und Implementierung. Feedback, Orientierung und Kontinuität bestimmen die Entscheidung; häufig wiederholte Aktionen sollen unmittelbar bleiben.

Ein zweiter Workflow misst Bewegung aus einer Aufnahme. Er extrahiert Frames, verfolgt ein Element und passt Feder- oder Easing-Kurven an, bevor Implementierungsparameter erzeugt werden. Öffnen und Schließen werden getrennt behandelt. Eine neue Aufnahme wird mit der Referenz verglichen, um zu prüfen, ob die rekonstruierten Phasen erhalten blieben.

Erwartete Ergebnisse

  • Eine gezielte Implementierung oder Prüfung von Interface-Bewegung.
  • Eine aus einer Aufnahme gemessene Easing- oder Federspezifikation.
  • Eine Übergabe mit Timing, Eigenschaftsphasen und Validierungsbeobachtungen.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Den Bewegungszweck bestimmen

    Bedarf an Feedback, Kontinuität oder Orientierung sowie die Aktionshäufigkeit feststellen. Unmittelbare Aufgabenerledigung und Tastaturfokus erhalten.

  2. 02
    Bewegung auswählen oder messen

    Ein Komponentenrezept wählen oder eine Aufnahme mit ihrer echten Bildrate extrahieren und die relevante Bewegung anpassen. Öffnungs- und Schließphasen getrennt halten.

  3. 03
    Die tatsächliche Interaktion testen

    Schnell umschalten, in Zeitlupe prüfen und Touch sowie reduzierte Bewegung testen. Bei Rekonstruktion eine Aufnahme der Implementierung mit dem Original vergleichen.

02 Einsatzbereiche

Wann einsetzen?

Komponentencode oder eine klare Referenzaufnahme sowie Aktionshäufigkeit und Zielgeräte bereitstellen. Festlegen, ob es um eine Bewegungsprüfung, eine Implementierungsänderung oder eine gemessene Rekonstruktion geht.

Gut geeignet

  • Eine Interaktion fühlt sich falsch anDie Quelle ordnet Trägheit, Sprünge und Fehlverhalten konkreten Timing- oder Implementierungsprüfungen zu.
  • Ein aufgezeichneter Effekt soll nachgebildet werdenDie Messskripte bieten einen Weg über das bloße Schätzen einer Feder nach Augenmaß hinaus.

Zu prüfende Grenzen

  • Kein vollständiges visuelles KonzeptPalette, Typografie und übergeordnetes Produktdesign liegen außerhalb des primären Umfangs.
  • Messung braucht AbhängigkeitenDer skriptbasierte Aufnahmeweg nutzt FFmpeg und Python-Pakete für Tracking und Kurvenanpassung.
  • Eine Anpassung beweist keine GleichwertigkeitAusgelassene Frames, variable Bildrate und mehrphasige Bewegung können eine einzelne angepasste Kurve irreführend machen.

Diese Eingaben mitbringen

  • Komponente oder AufnahmeZu verbessernden Code oder einen klaren Clip der Referenzinteraktion bereitstellen.
  • Verhalten und HäufigkeitNutzeraktion, resultierenden Zustand und Wiederholungshäufigkeit beschreiben.
  • ZielplattformImplementierungsstack, Geräte und Anforderungen an Barrierefreiheit festlegen.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Zweck vor Dekoration

    Der Entscheidungsrahmen kann unnötige Animation ablehnen und sinnvolle empfehlen.

  2. Unterbrechungen berücksichtigen

    Schnelles Umschalten deckt Neustart- und Zieländerungsprobleme auf, die bei normaler Wiedergabe unbemerkt bleiben.

  3. Gemessene Übergabe

    Getrennte Eigenschaftszeiten und angepasste Parameter machen die Rekonstruktion präziser.

04 Beispielbriefing

Ein konkretes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Quelle und Einrichtung prüfen

Zu verbessernden Code oder einen klaren Clip der Referenzinteraktion bereitstellen.

Upstream-Quelldatei
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

Der folgende Verweis öffnet die Originalanleitung. Prüfe vor der Nutzung die Einrichtung des Repositorys; dies ist kein Installationsbefehl.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Verwende ui-animation, um die Drawer-Interaktion in meiner Aufnahme und React-Komponente zu diagnostizieren. Miss Öffnen und Schließen getrennt mit der tatsächlichen Bildrate der Aufnahme. Ermittle, ob die wahrgenommene Verzögerung vom Easing, einer frühen Pause oder einer Blockierung des Hauptthreads stammt. Halte den Tastaturfokus unmittelbar und bewahre das bestehende Drawer-Verhalten. Schlage die kleinste Implementierungsänderung vor und teste dann schnelles Umschalten und reduzierte Bewegung. Falls du eine Feder oder Kurve anpasst, nenne die Grenzen der Anpassung und vergleiche eine Aufnahme der überarbeiteten Interaktion mit der Referenz, statt allein anhand der Parameter visuelle Übereinstimmung zu behaupten.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Schnelle Zieländerungen und Zeitlupenwiedergabe in beiden Richtungen testen.
  • Bildraten von Extraktion und Kurvenanpassung abstimmen.
  • Dieselbe Aufgabe mit reduzierter Bewegung und Touch-Eingabe ausführen.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
mblode
Repository
mblode/agent-skills
Skill-Datei
SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-11-02 · 391508702523
Redaktionelle Quellenzusammenfassung
Zweckgerichtete Interface-Bewegung entwickeln, debuggen und messen.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Kann der Skill Stellen für Animationen finden?

Ja. Sein Erkundungsweg berichtet Möglichkeiten anhand von Zweck und Häufigkeit, einschließlich verworfener Vorschläge. Erkundung allein autorisiert keine Implementierung.

Warum Öffnen und Schließen getrennt messen?

Sie unterscheiden sich oft in Timing und Charakter. Die Quelle warnt davor, eine Richtung anzupassen und sie einfach umzukehren.

Deckt eine CSS-Regel für reduzierte Bewegung alles ab?

Nicht unbedingt. Laut Quelle benötigt JavaScript-gesteuerte Bewegung eine eigene Behandlung reduzierter Bewegung und sollte über die tatsächliche Interaktion getestet werden.

OpenDesign

Briefing und Designarbeit an einem Ort.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md