fixing-motion-performancedi Julien Thibeaut

Fixing Motion Performance Skill.

Una skill per Claude Code e Codex per motion e video: individua e corregge animazioni CSS/JS scattose e movimenti legati allo scroll.

Motion e video
Report di revisione

Scarica OpenDesign Guida all'uso

ibelick/ui-skills · skills/fixing-motion-performance/SKILL.mdSKILL.md

--- name: fixing-motion-performance description: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. --- ## how to use ## when to apply ## rendering steps glossary ## rule categories by priority ## common fixes ## review guidance

Front matter e intestazioni di sezione letti dal file upstream il 14/09/2026 · 5.561 caratteri in tutto

01 Cosa fa

Cosa fa la Skill fixing-motion-performance in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Un playbook di audit e correzione per le performance delle animazioni CSS e JS, pensato per designer e sviluppatori che revisionano o refactorizzano transizioni poco fluide, motion legata allo scroll ed effetti di blur. Viene fornito come slash command: invocato senza argomenti, applica le linee guida a qualsiasi lavoro di animazione presente nella conversazione; se gli si passa un file, segnala le violazioni citando la riga esatta, il motivo per cui è rilevante e una correzione a livello di codice.

Le regole sono ordinate per priorità, dai pattern da evitare sempre, dalla scelta del meccanismo e dai limiti degli strumenti (livello critico), fino a misurazione, scroll, paint, layer e blur, e infine alle view transition. Rifiuta di migrare librerie di animazione se non richiesto esplicitamente, applicando le regole all'interno dello stack esistente.

Che cosa produce

Una breve frase per ogni violazione che spiega perché è rilevante.
Una correzione concreta, a livello di codice, per ogni violazione.
Una motivazione esplicita per qualsiasi scelta non predefinita relativa al lavoro di rendering.

Vedi l'esempio di prompt ↗

Come funziona

01
Invocalo come Slash Command
Esegui /fixing-motion-performance per applicare i vincoli a qualsiasi lavoro sulle animazioni già in discussione nella sessione.
02
Oppure Puntalo su un File
Passando un percorso, la Skill passa in modalità di revisione, verificando quel file rispetto a ogni regola invece di vincolare il lavoro in corso.
03
Riporta in tre parti
Ogni riscontro cita la riga incriminata, fornisce una breve frase sul perché sia rilevante e propone una correzione a livello di codice.
04
Ordina le Proprietà per Fase di Rendering
Il glossario suddivide il lavoro in composite, paint e layout, così chi effettua la revisione sa quali animazioni sono economiche e quali costose.
05
Applica in Ordine di Priorità
Le categorie critiche vengono verificate prima di quelle a impatto minore, così i pattern da evitare sempre e i limiti degli strumenti vengono risolti per primi.
06
Resta All'interno dello Stack Attuale
La migrazione della libreria non fa parte del compito; le regole vengono applicate al sistema di animazione già presente nel codebase.

02 Trova la tua applicazione

Quando usare la Skill fixing-motion-performance

Usa la skill fixing-motion-performance in Claude Code o Codex quando il lavoro riguarda motion and video di questo tipo. Applicabilità e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

Aggiunta o modifica di animazioni UI scritte con CSS, WAAPI, Motion, rAF o GSAP.
Refactoring di interazioni o transizioni che già risultano poco fluide.
Implementazione di movimento legato allo scroll o effetti reveal-on-scroll che attualmente si basano su eventi di scroll.
Animazione di layout, filtri, maschere, gradienti o variabili CSS, dove il profilo di costo è la questione centrale.
Revisione di componenti che si basano su will-change, transform o misurazioni.

Conosci i limiti

Transizioni di visualizzazione oltre ai cambiamenti a livello di navigazione, come UI ricche di interazioni o flussi che devono poter essere interrotti.
Effetti di blur continui o su grandi superfici, che sono esclusi piuttosto che ottimizzati.

Cosa fornire

Il comando slash da soloPer il lavoro live, invocarlo senza argomenti è sufficiente; da quel momento definisce ogni modifica di animazione effettuata nella conversazione.
Un percorso di file per la modalità di revisionePassando un file, la skill lo revisiona rispetto a tutte le regole e produce il report delle violazioni.
Il sistema di animazione esistenteNon si fornisce una libreria di destinazione; il codice così com'è costituisce il punto di riferimento, e le regole vengono applicate al suo interno.

03 Dentro la skill

Le regole che la skill fixing-motion-performance fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Mai Alternare Letture e Scritture
Le letture e le scritture di layout non devono essere mescolate all'interno dello stesso frame, e più sistemi di animazione che misurano o modificano il layout non devono essere eseguiti insieme.
Mai Animare in Base alla Posizione di Scroll
È vietato guidare l'animazione tramite scrollTop, scrollY o eventi di scroll; utilizzare invece Scroll o View Timelines e IntersectionObserver.
Ogni Loop rAF Deve Avere un'Uscita
Un loop requestAnimationFrame senza condizione di arresto è un pattern da evitare sempre, non un compromesso accettabile.
Preferire di Default Transform e Opacity
Queste sono le proprietà del compositor e il punto di partenza per il movimento; l'animazione guidata da JS è riservata alle interazioni che la richiedono.
Limitare il Blur a 8px
L'animazione del blur deve restare contenuta, a 8px o meno, ed è limitata a effetti brevi e occasionali; il blur continuo e il blur su grandi superfici sono esclusi.
Usare will-change in Modo Chirurgico
La promozione dei layer non è automatica, quindi will-change viene applicato in modo temporaneo e circoscritto, senza lasciarlo attivo su molti layer promossi o su layer di grandi dimensioni.
Non animare le variabili CSS per il movimento
Le custom properties che guidano transform, opacity o position non devono essere animate, e le variabili animate ereditate sono vietate senza eccezioni.
Nessuna migrazione a metà
All'interno di un singolo componente, le API non devono essere migrate solo parzialmente e gli stili di animazione non devono essere mescolati.

04 Mettila al lavoro

Installa fixing-motion-performance in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi fixing-motion-performance a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

Forma generica della CLI skills per skills/fixing-motion-performance/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Use /fixing-motion-performance on [path/to/Component.tsx]. The [side panel] transitions width on hover, the reveal-on-scroll is wired to a window scroll listener, and there is a blurred overlay on a full-width section. Report each violation with the exact line, why it matters, and a concrete fix, working within our existing [Motion] setup rather than migrating libraries.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verifichi che la correzione proposta esegua il lavoro di rendering meno costoso che comunque corrisponda all'effetto previsto.
Verifichi che ciò che è stato spostato fuori schermo sia effettivamente in pausa o fermo, e non lasciato in esecuzione.
Dove la promozione dei layer è importante, la verifichi con strumenti adeguati invece di presumere che sia avvenuta.

In OpenDesign importi fixing-motion-performance dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
File della skill: skills/fixing-motion-performance/SKILL.md Checksum del contenuto registrato alla verifica; commit 79081ab
License: MIT Da LICENSE.
Stelle del repository: 8.402 Snapshot GitHub del 14-09-2026 per l'intero repository ibelick/ui-skills, che contiene 5 skill in questo catalogo. Non è una valutazione o un conteggio di utilizzo per fixing-motion-performance.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

come si usaL'invocazione senza argomenti limita la sessione; un argomento file genera un report completo delle violazioni.
quando applicareElenca le cinque situazioni che dovrebbero far scattare queste linee guida durante il lavoro sull'animazione.
glossario dei passaggi di renderingDefinisce composite, paint e layout e le proprietà che ciascuno riguarda.
categorie di regole per prioritàNove categorie classificate con un'etichetta di impatto, da critico a basso.
riferimento rapidoNove categorie numerate di vincoli brevi in forma di elenco, dai pattern da evitare sempre ai limiti degli strumenti.
correzioni comuniSnippet CSS e JS prima/dopo per layout thrashing, movimento legato allo scroll e misurazione FLIP.
guida alla revisioneCome condurre la revisione: prima il critico, il lavoro più economico, le scelte non predefinite giustificate, note concrete.

Descrizione della skill

"Verifica e corregge i problemi di prestazione delle animazioni, inclusi layout thrashing, proprietà compositor, scroll-linked motion ed effetti blur. Da usare quando le animazioni stutterano, le transizioni sono janky o quando si revisiona la performance delle animazioni CSS/JS."

Descrizione front-matter da SKILL.md. Il file completo è di circa 5.561 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla Skill fixing-motion-performance

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Quali librerie di animazione copre?

Cita CSS, WAAPI, Motion, rAF e GSAP nel suo ambito, quindi è ampia piuttosto che legata a un solo framework. Poiché applica le regole all'interno del sistema esistente, si adatta a qualunque di questi lei stia già usando.

Fixing Motion Performance

Esegui fixing-motion-performance su un task reale di Motion e Video.

Scarica OpenDesign, importa fixing-motion-performance dal suo link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

Cosa fa la Skill fixing-motion-performance in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare la Skill fixing-motion-performance

Buona applicazione

Conosci i limiti

Cosa fornire

Le regole che la skill fixing-motion-performance fornisce a Claude Code e Codex

Mai Alternare Letture e Scritture

Mai Animare in Base alla Posizione di Scroll

Ogni Loop rAF Deve Avere un'Uscita

Preferire di Default Transform e Opacity

Limitare il Blur a 8px

Usare will-change in Modo Chirurgico

Non animare le variabili CSS per il movimento

Nessuna migrazione a metà