motion-perf-audit

motion-perf-audit

Catalogue généré le 2026-05-11

En une phrase

AuditerDiagnostic desciblé animationsd'une (jank,animation qui rame ou d'un scroll saccadé, CPUavec haut)identification etde produirela un plan correctif priorisécause (compositing, layout thrashing, batching,will-change will-change).mal posé) et plan de correction priorisé.

Quand l'utiliser

• VoirQuand laune descriptionanimation ci-dessusvisiblement saccade ou "lag" sur certains appareils

Quand le scroll d'une page sent le pâteux et laqu'on sectionne «sait Pourpas allerpourquoi Si le CPU s'envole pendant une animation (ventilateur du laptop qui démarre) Après une mise en prod où une animation tournait bien en dev mais plus loinen ».réel Pour valider qu'un hero animé est viable avant de le shipper

Comment l'invoquer

• Slash command : /motion-perf-audit (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— pour auditer une animation laggy

PourDescription aller plus loin

Motion Performance Audit

Objectifdétaillée

IdentifierLa performance motion est un sujet contre-intuitif : ce n'est pas le nombre d'animations qui pose problème, c'est le type de propriétés animées. Animer transform et opacity, c'est gratuit (le navigateur délègue au GPU). Animer top, left, width ou height, c'est cher (chaque frame relance un calcul de layout).

Ce skill commence par classer le symptôme observé (jank ponctuel, scroll lourd, jank permanent, CPU haut), puis enquête sur les causes probables : propriétés animées qui forcent du layout, "thrashing" où on lit et écrit le DOM en boucle, plusieurs requestAnimationFrame qui se marchent dessus, observers (IntersectionObserver, ResizeObserver) qui se déclenchent en cascade, ou will-change posé partout "au cas où" (ce qui consomme de la causemémoire duGPU janksans et prescrire des correctifs concrets.aider).

Procédure

Il

produit Classerensuite un tableau symptôme Vérifier propriétés animées, thrashing, rAF multiples, observers, will-change Proposer fixes P0/P1/P2 Définir DoD mesurable

Outputs attendus

Symptôme → cause → preuve → fixfix, Topun top 5 d'actions priorisées P0/P1/P2 +avec snippets Checklistde re-testcode, et une Definition of Done mesurable (par exemple "scroll à 60fps sur Chrome desktop, 30fps minimum sur mobile mid-range"). Pour Thymon : c'est l'enquêteur à appeler quand un truc rame sans raison apparente, avant de jeter l'animation entière.

Source

• Plugin : perso (standalone)
• Nom interne : motion-perf-audit
• Fichier : /home/thymon/.claude/skills/motion-perf-audit/SKILL.md