fixing-motion-performance
تحسين أداء الرسوم المتحركة
الرسوم المتحركة البطيئة تزعج المستخدمين وتضر بالتفاعل. توفر هذه المهارة إرشادات مثبتة لتحقيق رسوم متحركة سلسة بسرعة 60 إطاراً في الثانية من خلال الاستفادة من طبقات compositor للمتصفح وتجنب عمليات التخطيط المكلفة.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "fixing-motion-performance". Code that animates height and width continuously on a large container
Resultado esperado:
VIOLATION: Animating layout properties (height, width) continuously on a large surface causes expensive reflow.
WHY IT MATTERS: Layout operations trigger the browser's most expensive rendering phase, blocking the main thread.
FIX: Replace with transform: scale() which runs on the compositor thread. If layout effect is required, measure once with getBoundingClientRect(), then animate using FLIP technique.
Usando "fixing-motion-performance". requestAnimationFrame loop without stop condition
Resultado esperado:
VIOLATION: Animation loop has no stop condition, running continuously.
WHY IT MATTERS: Infinite animation loops consume CPU and battery indefinitely, degrading performance.
FIX: Add requestAnimationFrame loop with clear stop conditions: when animation completes, element is removed, or page visibility changes.
Auditoría de seguridad
SeguroAll 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.
Puntuación de calidad
Lo que puedes crear
مطور الواجهة الأمامية يراجع المكونات
مطور الواجهة الأمامية يريد التأكد من أن الرسوم المتحركة الجديدة تلبي معايير الأداء قبل دمج الكود.
إعادة هيكلة التفاعلات المتقطعة
تحديد فريق للرسوم المتحركة المرتبطة بالتمرير التي تسبب تقطع ويحتاجون إرشادات حول أساليب التحسين.
تعلم أفضل ممارسات الرسوم المتحركة
مطور جديد في رسوم المتحركة على الويب يريد تعلم أساسيات عرض المتصفح وال حركة الفعالة.
Prueba estos prompts
Apply the fixing-motion-performance skill to review my animation code in {file}. Identify any violations of performance guidelines and suggest specific fixes.Using fixing-motion-performance guidelines, review my scroll-linked animation. Check that it uses appropriate mechanisms like Scroll Timelines or IntersectionObserver, and verify it does not trigger continuous layout or paint.
Review my use of animated CSS variables against fixing-motion-performance rules. Ensure variables are scoped locally, not inherited, and do not trigger paint on large surfaces.
Apply fixing-motion-performance to analyze my layer usage. Validate that will-change is used surgically, layers are not over-promoted, and compositor animations respect layer boundaries.
Mejores prácticas
- فضل دائماً التحويل والعتامة على خصائص التخطيط أو تشغيل الرسوم البيانية للحركة المستمرة.
- قم بقياس تخطيط DOM مرة واحدة قبل التحريك، ثم اكتب جميع التغييرات دفعة واحدة لتجنب التناوب بين القراءات والكتابات.
- استخدم Scroll Timelines أو IntersectionObserver بدلاً من استطلاع موقف التمرير للرسوم المتحركة المرتبطة بالتمرير.
Evitar
- قيادة الرسوم المتحركة مباشرة من أحداث التمرير أو قيم scrollTop/scrollY.
- خلط أنظمة رسوم متحركة متعددة تقيس أو تعدل التخطيط في نفس الإطار.
- تحريك متغيرات CSS للتحويل أو العتامة أو الموقف دون فهم آثار الوراثة.