ui-enhance-animate

This skill performs a full design upgrade of an existing website or component. It is NOT just about adding animations — it is a holistic visual refinement pass that touches typography, spacing, layout, depth, micro-interactions, and motion. The existing color palette is preserved; everything else can and should be improved.

Before writing a single line of code, do a thorough read of the existing code. Extract and note:

Apply ALL of the following improvements that are relevant to the site. Be thorough — don't skip sections because they "look okay". Every part of the site should be elevated.

Aktualisiert und verfeinert das UI-Design einer vorhandenen Website umfassend – verbessert Layout, Typografie, Abstände, Tiefe, visuelle Hierarchie und Komponentenverfeinerung – und behält gleichzeitig die vorhandene Farbpalette der Website bei. Fügt außerdem sanfte, gestaffelte Blur- und Slide-Up-Enthüllungsanimationen mithilfe von Framer Motion (oder CSS bei reinem HTML) hinzu, die ausgelöst werden, wenn Elemente in das Ansichtsfenster gelangen. Verwenden Sie diese Fähigkeit immer dann, wenn der Benutzer eine vorhandene Website oder React/HTML-Seite verbessern, modernisieren, aufpolieren oder animieren möchte. Wird auch dann ausgelöst, wenn der Benutzer nur „es besser aussehen lassen“, „animieren“, „das Design verbessern“, „die Benutzeroberfläche aktualisieren“, „moderner machen“ oder „Bildlaufanimationen hinzufügen“ erwähnt – dieser Skill behandelt all das, nicht nur Animationen. Quelle: zaaakher/agent-skills.