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.

Comprehensively upgrades and polishes an existing website's UI design — improving layout, typography, spacing, depth, visual hierarchy, and component refinement — while preserving the site's existing color palette. Also adds smooth, staggered blur+slide-up reveal animations using Framer Motion (or CSS if plain HTML) triggered when elements enter the viewport. Use this skill whenever the user wants to improve, modernize, polish, or animate an existing website or React/HTML page. Trigger even when the user only mentions "make it look better", "animate it", "improve the design", "upgrade the UI", "make it more modern", or "add scroll animations" — this skill handles all of those, not just animation. Source: zaaakher/agent-skills.