Nelle parole della skill
Questo skill fornisce agli agenti di codice il giudizio di design engineering di Emil Kowalski per il lavoro sull'interfaccia: come decidere se qualcosa deve animarsi, quale easing e durata usare, e come costruire componenti che risultino reattivi. Stabilisce default rigidi — animazioni UI sotto i 300ms, curve cubic-bezier personalizzate invece degli easing CSS predefiniti, mai ease-in, mai entrate con scale(0), popover che si scalano dal proprio trigger.
Copre anche spring, tecniche di clip-path, gestione di drag e gesture, regole di performance GPU, reduced motion, e una tabella markdown Before/After obbligatoria per le code review. È pensato per designer e sviluppatori che vogliono decisioni sull'interfaccia guidate dal gusto piuttosto che consigli generici sull'animazione.
Che cosa produce
- Una tabella markdown di review con colonne Before, After e Why, una riga per ogni problema trovato
- Variabili CSS pronte da incollare contenenti le curve di easing personalizzate consigliate
- Oggetti di configurazione spring, con parametri in stile Apple o parametri fisici tradizionali
- Un elenco di correzioni prioritizzato ricavato dalle categorie della Review Checklist
Come funziona
- 01Filtrare l'Animazione in Base alla Frequenza
Prima di scrivere qualsiasi codice di animazione, decidere quanto spesso gli utenti incontreranno l'interazione.
- 02Definire lo Scopo
Ogni animazione deve rispondere al perché si anima, scegliendo dall'elenco valido: coerenza spaziale, indicazione di stato, spiegazione, feedback o prevenzione di cambiamenti bruschi.
- 03Scegliere una Curva Personalizzata
Scegliere l'easing in base al fatto che l'elemento entri, esca, si muova o cambi solo colore, poi sostituire le curve predefinite con cubic-bezier personalizzate più marcate.
- 04Impostare la Durata
Fate corrispondere la durata al tipo di elemento indicato nella tabella — pressione di un pulsante 100-160ms, dropdown 150-250ms, modali 200-500ms — e mantenete la UI sotto il tetto dei 300ms.
- 05Applicare i Valori Predefiniti dei Componenti
I pulsanti si scalano a 0.97 su :active, gli ingressi partono da 0.95 con opacità piuttosto che da scale(0), e i popover si scalano a partire dal loro trigger mentre i modali restano centrati.
- 06Usare le Molle Dove Se Le Meritano
Le molle sono adatte al drag con momentum, ai gesti che possono essere interrotti e alle interazioni deliberatamente decorative.