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.

Aggiorna e perfeziona in modo completo il design dell'interfaccia utente di un sito Web esistente, migliorando layout, tipografia, spaziatura, profondità, gerarchia visiva e perfezionamento dei componenti, preservando la tavolozza dei colori esistente del sito. Aggiunge anche animazioni fluide e sfalsate di sfocatura+rivelazione di scorrimento verso l'alto utilizzando Framer Motion (o CSS se HTML semplice) attivate quando gli elementi entrano nel viewport. Utilizza questa abilità ogni volta che l'utente desidera migliorare, modernizzare, perfezionare o animare un sito Web esistente o una pagina React/HTML. Si attiva anche quando l'utente menziona solo "rendilo migliore", "animalo", "migliora il design", "aggiorna l'interfaccia utente", "rendilo più moderno" o "aggiungi animazioni di scorrimento": questa abilità gestisce tutti questi, non solo l'animazione. Fonte: zaaakher/agent-skills.