Motion Performance Fixer
Auditer et corriger la performance des animations — layout thrashing, règles du compositeur, motion liée au scroll, flou
- Quoi
- Auditer et corriger la performance des animations — layout thrashing, règles du compositeur, motion liée au scroll, flou
- Coût
- Gratuit
- Prérequis
- aucun — une interface avec des animations à auditer ou corriger
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — un skill d'audit de performance des animations : neuf catégories de règles classées par priorité — motifs interdits (pas d'entrelacement lecture/écriture de layout dans une frame, pas d'animation pilotée par `scrollTop`/`scrollY`, pas de boucles rAF sans fin), choix du mécanisme (transform et opacity par défaut, dégrader la technique plutôt que supprimer le mouvement), discipline de mesure (regrouper les lectures avant les écritures, transitions FLIP), scroll (Scroll/View Timelines plutôt que polling JS, pause du travail hors écran), budgets de peinture et de couches, flou petit et bref uniquement (jamais animé en continu ni sur de grandes surfaces), retenue sur les view transitions, et frontières d'outillage (jamais migrer de bibliothèque d'animation sans demande, appliquer les règles dans la stack existante). Livré avec des corrections CSS/JS concrètes, un glossaire des étapes de rendu (composite vs peinture vs layout), et un mode revue qui cite la ligne fautive avec une correction au niveau du code. Distinct de `addyosmani-performance` du catalogue (lot 30 : Core Web Vitals et performance web générale) : celui-ci vise spécifiquement les saccades d'animation et de rendu. Crédit : @ibelick. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : aucun — une interface avec des animations à auditer ou corriger Installe-moi « Correcteur de performance d'animations ». Auditer et corriger la performance des animations — layout thrashing, règles du compositeur, motion liée au scroll, flou Dépôt : https://github.com/ibelick/ui-skills/blob/main/skills/fixing-motion-performance/SKILL.md 1. Récupère le fichier SKILL.md du skill ibelick-ui-skills-fixing-motion-performance depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « ibelick-ui-skills-fixing-motion-performance ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. tout compte, clé API ou outil CLI mentionné dans les prérequis ci-dessus). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, tu peux l'utiliser ; sinon, l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Ne me demande jamais de coller des secrets dans le chat ; les identifiants passent par le coffre sécurisé ou des variables d'environnement. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.