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.

Actualiza y pule de manera integral el diseño de la interfaz de usuario de un sitio web existente (mejora el diseño, la tipografía, el espaciado, la profundidad, la jerarquía visual y el refinamiento de los componentes) al mismo tiempo que preserva la paleta de colores existente del sitio. También agrega animaciones suaves y escalonadas de desenfoque y revelación deslizante usando Framer Motion (o CSS si es HTML simple) que se activa cuando los elementos ingresan a la ventana gráfica. Utilice esta habilidad siempre que el usuario quiera mejorar, modernizar, pulir o animar un sitio web o una página React/HTML existente. Se activa incluso cuando el usuario solo menciona "hacer que se vea mejor", "animarlo", "mejorar el diseño", "actualizar la interfaz de usuario", "hacerlo más moderno" o "agregar animaciones de desplazamiento": esta habilidad se encarga de todo eso, no solo de la animación. Fuente: zaaakher/agent-skills.