In den eigenen Worten des Skills
Diese Skill vermittelt Coding-Agenten Emil Kowalskis Urteilsvermögen als Design Engineer für Interface-Arbeit: wie entschieden wird, ob etwas animiert werden soll, welches Easing und welche Dauer verwendet werden, und wie Komponenten gebaut werden, die responsiv wirken. Sie setzt feste Vorgaben — UI-Animationen unter 300ms, benutzerdefinierte Cubic-Bezier-Kurven statt eingebauter CSS-Easings, niemals ease-in, niemals scale(0)-Eingänge, Popovers, die von ihrem Trigger aus skalieren.
Sie behandelt außerdem Springs, Clip-Path-Techniken, Drag- und Gesture-Handling, GPU-Performance-Regeln, reduzierte Bewegung und eine erforderliche Vorher/Nachher-Markdown-Tabelle für Code-Reviews. Sie richtet sich an Designer und Entwickler, die geschmacksgeleitete Interface-Entscheidungen statt generischer Animationsratschläge wünschen.
Was er erzeugt
- Eine Markdown-Review-Tabelle mit den Spalten Vorher, Nachher und Warum, eine Zeile pro gefundenem Problem
- Fertig zum Einfügen: CSS-Variablen mit den empfohlenen benutzerdefinierten Easing-Kurven
- Spring-Konfigurationsobjekte, entweder im Apple-Stil oder mit klassischen Physikparametern
- Eine priorisierte Fix-Liste, abgeleitet aus den Kategorien der Review-Checkliste
So funktioniert es
- 01Die Animation nach Häufigkeit steuern
Bevor Sie Animationscode schreiben, entscheiden Sie, wie oft Nutzer mit der Interaktion in Berührung kommen.
- 02Den Zweck benennen
Jede Animation muss beantworten, warum sie animiert, aus der gültigen Liste: räumliche Konsistenz, Zustandsanzeige, Erklärung, Feedback oder das Vermeiden abrupter Änderungen.
- 03Eine benutzerdefinierte Kurve wählen
Wählen Sie das Easing danach, ob das Element eintritt, austritt, sich bewegt oder nur die Farbe ändert, und ersetzen Sie dann die eingebauten Kurven durch stärkere benutzerdefinierte Cubic-Beziers.
- 04Legen Sie die Dauer fest
Passen Sie die Dauer an den Elementtyp aus der Tabelle an – Button-Klick 100–160 ms, Dropdowns 150–250 ms, Modals 200–500 ms – und bleiben Sie mit der UI unter der Obergrenze von 300 ms.
- 05Wenden Sie die Standardwerte für Komponenten an
Buttons skalieren bei :active auf 0,97, Einblendungen starten ab 0,95 mit Opacity statt scale(0), und Popover skalieren von ihrem Trigger aus, während Modals zentriert bleiben.
- 06Setzen Sie Springs dort ein, wo sie sich lohnen
Springs eignen sich für Drag mit Schwung, für Gesten, die unterbrochen werden können, und für bewusst dekorative Interaktionen.