motion-perf-audit

motion-perf-audit

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

En une phrase

Diagnostic ciblé d'une animation qui rame ou d'un scroll saccadé, avec identification de la cause (compositing, layout thrashing, will-change mal posé) et plan de correction priorisé.

Quand l'utiliser

• Quand une animation visiblement saccade ou "lag" sur certains appareils
• Quand le scroll d'une page sent le pâteux et qu'on ne sait pas pourquoi
• 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 en réel
• Pour valider qu'un hero animé est viable avant de le shipper

Comment l'invoquer

• Slash command : /motion-perf-audit
• Auto-invocation : ✅ Oui — pour auditer une animation laggy

Description détaillée

La 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 mémoire GPU sans aider).

Il produit ensuite un tableau symptôme → cause → preuve → fix, un top 5 d'actions priorisées P0/P1/P2 avec snippets de code, 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