Emilkowalski Skills

skills/skills/animate

Erstelle eine Animation von Grund auf und triff die Entscheidungen in der Reihenfolge, die bestimmt, ob sie sich richtig anfühlt – soll sie überhaupt animieren, welcher Zweck, welches Werkzeug, welche Eigenschaften, welche Kurve und Dauer, wie sie unterbricht, wie sie endet. Schreibt die Implementierung. Verwenden, wenn darum gebeten wird, etwas zu animieren, Bewegung hinzuzufügen, eine Komponente lebendig wirken zu lassen oder einen Übergang zu bauen. Für Kritik an bestehender Bewegung review-animations verwenden; für die Prüfung einer gesamten Codebasis improve-animations verwenden.

skills/skills/animation-vocabulary

Umgekehrtes Nachschlageglossar, das eine vage Beschreibung einer Web-Animation oder Bewegungswirkung in den genauen Begriff umwandelt („das Hüpfende, wenn ein Popover aufgeht“ → Pop in; „das iOS-Gummiband-Scrollen“ → Rubber-banding). Verwenden, wenn der Benutzer fragt: „Wie heißt das, wenn…“ oder eine Bewegungswirkung beschreibt, ohne deren Namen zu kennen, und das richtige Wort für eine KI oder einen Designer benötigt. Zum Benennen einer Wirkung, nicht zum Entwerfen oder Erstellen.

skills/skills/apple-design

Apples Ansatz für Interface-Design und flüssige, physikalische Bewegung, für das Web übersetzt. Verwenden beim Erstellen oder Überprüfen von gestengesteuerten Benutzeroberflächen, Federanimationen, Drag-/Swipe-/Sheet-Interaktionen, Momentum und unterbrechbaren Übergängen, transluzenten Materialien und Tiefe, Typografie (optische Größenanpassung, Laufweite, Zeilenabstand), reduzierter Bewegung oder den Design-Grundlagen (Feedback, räumliche Konsistenz, Zurückhaltung) hinter Apple-ähnlichen Oberflächen.

skills/skills/ask-sonner

Leitfaden für Sonner, die React-Toast-Bibliothek — Installation und Einrichtung des Toasters, Auswahl des richtigen toast()-Aufrufs, Promise- und Lade-Toasts, Aktualisieren, Schließen und Beibehalten von Toasts, Styling, Theming und Icons, Positionierung und mehrere Toaster. Verwenden Sie dies, wenn Sie mit Sonner arbeiten oder Probleme beheben — Toasts, die nicht erscheinen, doppelt erscheinen, ihre Stile verlieren, Tailwind-Klassen ignorieren, hinter einem Modal liegen oder den Dunkelmodus nicht befolgen.

skills/skills/emil-design-eng

Diese Fertigkeit kodiert Emil Kowalskis Philosophie zu UI-Verfeinerung, Komponentendesign, Animationsentscheidungen und den unsichtbaren Details, die Software großartig wirken lassen.

skills/skills/find-animation-opportunities

Durchsuche eine Codebasis oder Benutzeroberfläche nach Stellen, die nicht animiert sind, aber animiert werden sollten, und lehne alles ab, was nicht animiert werden sollte. Nur lesend; es schlägt Bewegung mit exakten Werten vor, implementiert sie aber nicht. Verwende dies, wenn der Benutzer fragt „Was könnte hier animiert werden?“ oder „das lebendiger machen“ möchte. Zum Beheben bestehender Animationen verwende stattdessen improve-animations oder review-animations.

skills/skills/improve-animations

Untersuche die Animations- und Bewegungscodebasis als leitender Bewegungsberater, erstelle dann ein priorisiertes Audit und eigenständige Implementierungspläne für andere Agenten (oder günstigere Modelle) zur Ausführung. Schreibgeschützt für den Quellcode – es plant Verbesserungen, wendet sie aber nicht an. Verwende dies, wenn der Nutzer darum bittet, "die Animationen zu verbessern", "die Bewegung zu prüfen", "diese App besser anfühlen zu lassen" oder eine Roadmap für Animationskorrekturen wünscht, anstatt eine Überprüfung eines einzelnen Diffs.

skills/skills/pick-ui-library

Wähle die richtige Bibliothek für eine bestimmte Frontend-Aufgabe aus einer kuratierten, meinungsstarken Liste — Zahlen, OTP-Eingaben, Diagramme, Befehlsmenüs, Virtualisierung, Drag-and-Drop, Toasts, State, Styling und mehr. Wird nur ausgeführt, wenn explizit aufgerufen; es löst nicht von selbst aus.

skills/skills/prototype

Erstelle mehrere wirklich unterschiedliche Versionen eines von dir beschriebenen UI-Elements, die hinter einem visuellen Auswähler gerendert werden, sodass du live zwischen ihnen wechseln und die passende Version übernehmen kannst. Läuft nur, wenn explizit aufgerufen; es wird nicht von selbst ausgelöst.

skills/skills/review-animations

Überprüft Animations- und Bewegungscode anhand einer hohen handwerklichen Messlatte, die aus Emil Kowalskis Design-Engineering-Philosophie abgeleitet ist. Standardmäßig wird markiert; Zustimmung muss verdient werden.