fixing-motion-performancepar Julien Thibeaut

Fixing Motion Performance Skill.

Un skill Claude Code et Codex pour le motion et la vidéo : détecte et corrige les animations CSS/JS saccadées et le motion lié au scroll.

Mouvement et vidéo
Rapport de revue

Télécharger OpenDesign Voir le guide d'utilisation

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

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 5 561 caractères au total

01 Ce qu'il fait

Ce que fait le skill fixing-motion-performance dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un guide d'audit et de correction pour les performances des animations CSS et JS, destiné aux designers et développeurs qui révisent ou refactorisent des transitions saccadées, des mouvements liés au défilement et des effets de flou. Il se présente sous forme de commande slash : invoquée sans argument, elle applique les directives à tout travail d'animation en cours dans la conversation ; avec un fichier en argument, elle signale les infractions en citant la ligne exacte, en expliquant pourquoi c'est important, et en proposant une correction au niveau du code.

Les règles sont classées par priorité, des schémas à ne jamais utiliser, du choix du mécanisme et des limites d'outils au niveau critique, jusqu'à la mesure, le défilement, le paint, les calques et le flou, pour finir par les transitions de vue. Le skill refuse de migrer les bibliothèques d'animation sauf demande explicite, appliquant les règles dans la pile technique existante.

Ce qu'il produit

Une phrase courte par infraction expliquant pourquoi elle importe.
Une correction concrète, au niveau du code, pour chaque infraction.
Une justification explicite pour tout choix non par défaut de travail de rendu.

Voir l'exemple de prompt ↗

Fonctionnement

01
Invoquez-le comme commande slash
Exécutez /fixing-motion-performance pour appliquer les contraintes à tout travail d'animation déjà en discussion dans la session.
02
Ou pointez-le vers un fichier
Passer un chemin le fait basculer en mode revue, vérifiant ce fichier au regard de chaque règle plutôt que de contraindre un travail en cours.
03
Rendre compte en trois parties
Chaque constat cite la ligne fautive, donne une phrase courte expliquant pourquoi elle importe, et propose une correction au niveau du code.
04
Classer les propriétés par étape de rendu
Le glossaire répartit le travail entre composite, paint et layout afin que le relecteur sache quelles animations sont peu coûteuses et lesquelles sont onéreuses.
05
Appliquer par ordre de priorité
Les catégories critiques sont vérifiées avant celles à faible impact, afin que les schémas à ne jamais utiliser et les limites d'outils soient réglés en premier.
06
Rester dans la pile technique actuelle
La migration de bibliothèque ne fait pas partie de la tâche ; les règles s'appliquent au système d'animation déjà utilisé par la base de code.

02 Trouvez celui qui vous convient

Quand utiliser le fixing-motion-performance Skill

Utilisez le skill fixing-motion-performance dans Claude Code ou Codex lorsque la tâche concerne motion and video de ce type. Les capacités et limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

Ajout ou modification d'animations d'UI écrites avec CSS, WAAPI, Motion, rAF ou GSAP.
Refactorisation d'interactions ou de transitions déjà saccadées.
Implémentation d'animations liées au défilement ou d'effets de révélation au scroll qui reposent actuellement sur des événements de scroll.
Animation de mises en page, filtres, masques, dégradés ou variables CSS, où le coût de performance est la question centrale.
Revue de composants qui s'appuient sur will-change, les transforms ou des mesures.

Connaître les limites

Transitions de vue allant au-delà des changements de niveau navigation, comme une UI riche en interactions ou des flux devant être interruptibles.
Effets de flou continus ou sur de grandes surfaces, qui sont exclus plutôt qu'optimisés.

Quoi fournir

La commande slash seulePour un travail en direct, l'invoquer seule suffit ; elle façonne ensuite toute modification d'animation faite au cours de la conversation.
Un chemin de fichier pour le mode revuePasser un fichier fait examiner ce fichier par le skill au regard de toutes les règles et produit le rapport de violations.
Le système d'animation existantVous ne fournissez pas de bibliothèque cible ; le code dans son état actuel est le cadre de référence, et les règles s'appliquent à l'intérieur de celui-ci.

03 Dans le skill

Règles que le skill fixing-motion-performance donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Ne jamais entrelacer lectures et écritures
Les lectures et écritures de layout ne doivent pas être mélangées dans la même frame, et plusieurs systèmes d'animation qui mesurent ou modifient chacun le layout ne doivent pas s'exécuter ensemble.
Ne jamais animer à partir de la position de scroll
Piloter une animation à partir de scrollTop, scrollY ou d'événements de scroll est interdit ; utilisez plutôt les Scroll ou View Timelines et IntersectionObserver.
Chaque boucle rAF a besoin d'une sortie
Une boucle requestAnimationFrame sans condition d'arrêt est un motif à ne jamais utiliser, pas un compromis acceptable.
Privilégier par défaut transform et opacity
Ce sont les propriétés du compositeur et le point de départ pour le mouvement ; l'animation pilotée par JS est réservée aux interactions qui l'exigent.
Limiter le flou à 8px
L'animation de flou doit rester faible, à 8px ou moins, et se limite à de courts effets ponctuels ; le flou continu et le flou sur de grandes surfaces sont exclus.
Utiliser will-change avec précision
La promotion de calque n'est pas automatique, donc will-change est appliqué temporairement et de façon ciblée plutôt que laissé sur des calques promus nombreux ou volumineux.
Ne pas animer les variables CSS pour le mouvement
Les propriétés personnalisées pilotant transform, opacity ou position ne doivent pas être animées, et les variables animées héritées sont totalement interdites.
Pas de migrations à moitié faites
Au sein d'un même composant, les API ne doivent pas être migrées partiellement et les styles d'animation ne doivent pas être mélangés.

04 Mettez-le en pratique

Installer fixing-motion-performance dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter fixing-motion-performance à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Forme générique de la CLI skills pour skills/fixing-motion-performance/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de motion et vidéo

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Vérifiez que la correction proposée effectue le travail de rendu le moins coûteux tout en respectant l'effet visé.
Vérifiez que tout ce qui est déplacé hors écran est bien mis en pause ou arrêté plutôt que laissé en cours d'exécution.
Lorsque la promotion de calque est importante, vérifiez-la avec des outils plutôt que de supposer qu'elle a eu lieu.

Dans OpenDesign, importez fixing-motion-performance depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branche main
Fichier du skill: skills/fixing-motion-performance/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 79081ab
License: MIT Depuis LICENSE.
Étoiles du dépôt: 8 402 GitHub snapshot taken 2026-09-14 for the whole ibelick/ui-skills repository, which contains 5 skills in this catalog. Not a rating or usage count for fixing-motion-performance.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

mode d'emploiL'invocation seule limite la session ; un argument de fichier déclenche un rapport complet des violations.
quand l'appliquerListe les cinq situations qui devraient déclencher ces consignes lors du travail d'animation.
glossaire des étapes de renduDéfinit composite, paint et layout, ainsi que les propriétés que chacun couvre.
catégories de règles par prioritéNeuf catégories classées avec un niveau d'impact, de critique à faible.
référence rapideNeuf catégories numérotées de contraintes brèves, des motifs à ne jamais utiliser aux limites des outils.
corrections courantesExtraits CSS et JS avant/après pour le layout thrashing, le mouvement lié au scroll et la mesure FLIP.
guide de revueComment mener la revue : le critique en premier, le travail le moins coûteux, les choix non par défaut justifiés, des notes exploitables.

Description du skill lui-même

« Auditer et corriger les problèmes de performance d'animation : layout thrashing, propriétés compositor, mouvement lié au défilement et effets de flou. À utiliser lorsque les animations saccadent, les transitions sont hachées ou pour examiner les performances d'animation CSS/JS. »

Description du front-matter dans SKILL.md. Le fichier complet fait environ 5 561 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill fixing-motion-performance

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quelles bibliothèques d'animation couvre-t-il ?

Il mentionne CSS, WAAPI, Motion, rAF et GSAP dans son périmètre, il est donc large plutôt que lié à un seul framework. Comme il applique des règles au sein du système existant, il s'adapte à celui que vous utilisez déjà.

Fixing Motion Performance

Exécuter fixing-motion-performance sur une vraie tâche Motion et Video.

Téléchargez OpenDesign, importez fixing-motion-performance depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

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

Ce que fait le skill fixing-motion-performance dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le fixing-motion-performance Skill

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill fixing-motion-performance donne à Claude Code et Codex

Ne jamais entrelacer lectures et écritures

Ne jamais animer à partir de la position de scroll

Chaque boucle rAF a besoin d'une sortie

Privilégier par défaut transform et opacity

Limiter le flou à 8px

Utiliser will-change avec précision

Ne pas animer les variables CSS pour le mouvement

Pas de migrations à moitié faites