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.

Met à niveau et peaufine de manière complète la conception de l'interface utilisateur d'un site Web existant – en améliorant la mise en page, la typographie, l'espacement, la profondeur, la hiérarchie visuelle et le raffinement des composants – tout en préservant la palette de couleurs existante du site. Ajoute également des animations fluides et décalées de flou + diapositive vers le haut à l'aide de Framer Motion (ou CSS si HTML simple) déclenchées lorsque des éléments entrent dans la fenêtre. Utilisez cette compétence chaque fois que l'utilisateur souhaite améliorer, moderniser, peaufiner ou animer un site Web ou une page React/HTML existant. Déclenchez-le même lorsque l'utilisateur mentionne uniquement « l'améliorer », « l'animer », « améliorer le design », « mettre à niveau l'interface utilisateur », « le rendre plus moderne » ou « ajouter des animations de défilement » – cette compétence gère tout cela, pas seulement l'animation. Source : zaaakher/agent-skills.