fixing-motion-performance
Optimiser les performances des animations
Les animations lentes frustrent les utilisateurs et nuisent à l'engagement. Cette compétence fournit des lignes directrices éprouvées pour atteindre des animations fluides à 60fps en tirant parti des couches de composition du navigateur et en évitant les opérations de mise en page coûteuses.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"fixing-motion-performance" 사용 중입니다. Code qui anime la hauteur et la largeur de manière continue sur un grand conteneur
예상 결과:
VIOLATION : Animer les propriétés de mise en page (height, width) de manière continue sur une grande surface entraîne une reflow coûteuse.
POURQUOI C'EST IMPORTANT : Les opérations de mise en page déclenchent la phase de rendu la plus coûteuse du navigateur, bloquant le thread principal.
CORRECTION : Remplacez par transform: scale() qui s'exécute sur le thread de composition. Si un effet de mise en page est requis, mesurez une fois avec getBoundingClientRect(), puis animez en utilisant la technique FLIP.
"fixing-motion-performance" 사용 중입니다. boucle requestAnimationFrame sans condition d'arrêt
예상 결과:
VIOLATION : La boucle d'animation n'a pas de condition d'arrêt et s'exécute de manière continue.
POURQUOI C'EST IMPORTANT : Les boucles d'animation infinies consomment le CPU et la batterie indéfiniment, dégradant les performances.
CORRECTION : Ajoutez une boucle requestAnimationFrame avec des conditions d'arrêt claires : lorsque l'animation se termine, l'élément est supprimé, ou la visibilité de la page change.
보안 감사
안전All 7 static findings are false positives. The scanner misidentified slash command documentation as external commands, CSS performance terminology as system reconnaissance, and YAML field names as cryptographic patterns. This is a documentation-only skill containing 128 lines of markdown guidelines for animation performance optimization. No code execution, network calls, file operations, or script execution occurs.
품질 점수
만들 수 있는 것
Développeur frontend révisant des composants
Un développeur frontend veut s'assurer que les nouvelles animations respectent les normes de performance avant la fusion du code.
Réécriture d'interactions irrégulières
Une équipe identifie des animations liées au défilement causant des irrégularités et a besoin de conseils sur les approches d'optimisation.
Apprentissage des meilleures pratiques d'animation
Un développeur nouveau dans l'animation web veut apprendre les fondamentaux du rendu du navigateur et du mouvement efficace.
이 프롬프트를 사용해 보세요
Appliquez la compétence fixing-motion-performance pour examiner mon code d'animation dans {file}. Identifiez toute violation des directives de performance et suggérez des correctifs spécifiques.En utilisant les directives fixing-motion-performance, examinez mon animation liée au défilement. Vérifiez qu'elle utilise des mécanismes appropriés comme les Scroll Timelines ou IntersectionObserver, et assurez-vous qu'elle ne déclenche pas de layout ou de peinture continus.
Examinez mon utilisation des variables CSS animées selon les règles fixing-motion-performance. Assurez-vous que les variables sont définies localement, non héritées, et ne déclenchent pas de peinture sur de grandes surfaces.
Appliquez fixing-motion-performance pour analyser mon utilisation des couches. Validez que will-change est utilisé de manière ciblée, que les couches ne sont pas sur-promues et que les animations du compositeur respectent les limites des couches.
모범 사례
- Privilégez toujours transform et opacity pour le mouvement continu, par rapport aux propriétés de mise en page ou déclenchant la peinture.
- Mesurez la mise en page DOM une fois avant d'animer, puis regroupez toutes les écritures pour éviter les lectures et écritures intercalées.
- Utilisez les Scroll Timelines ou IntersectionObserver au lieu de sonder la position de défilement pour les animations liées au défilement.
피하기
- Piloter les animations directement à partir d'événements de défilement ou de valeurs scrollTop/scrollY.
- Mélanger plusieurs systèmes d'animation qui mesurent ou mutent la mise en page dans le même cadre.
- Animer des variables CSS pour transform, opacity ou position sans comprendre les implications d'héritage.