skills.rest
santanapol
santanapolCOMMUNITY
Explore all skills by this author →
GitHub

fixing-motion-performance

Fix CSS, WAAPI, Motion, rAF, or GSAP animation performance issues.

Updated May 27, 2026
Search Tags:#css animations#layout thrashing#ui jank#animation performance#scroll-linked motion#compositor properties#motion optimization
One-click install
npx skills add https://github.com/santanapol/agent-skills --skill fixing-motion-performance-santanapol
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fixing-motion-performance
Source: https://github.com/santanapol/agent-skills/tree/main/.cursor/skills/fixing-motion-performance
Command: npx skills add https://github.com/santanapol/agent-skills --skill fixing-motion-performance-santanapol

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates frustrating UI animation issues like stuttering transitions, janky scroll-linked motion, and slow blur effects that degrade user experience and make interfaces feel unpolished.

Core Features & Use Cases

  • Performance Auditing: Identifies critical animation violations such as layout thrashing, compositor property misuse, and inefficient paint/layout animations.
  • Concrete Fixes: Provides code-level suggestions for common issues, including replacing layout animations with transform/opacity, using Scroll Timelines for scroll-linked motion, and optimizing blur effect usage.
  • Use Case: If your e-commerce product's product card hover animations stutter on low-end devices, use this Skill to audit the animation code, identify layout thrashing, and implement transform-based animations for smooth 60fps performance.

Quick Start

Use the fixing-motion-performance skill to review the animation code in your product's onboarding flow and get actionable fixes for all performance violations.

Frequently Asked Questions about fixing-motion-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix layout thrashing and CSS animation jank in my web UI?▼

Fix CSS animation jank by auditing for layout thrashing and replacing layout animations with transform and opacity properties. This Skill provides concrete code-level suggestions to batch measurements and optimize the rendering path.

What's the best way to optimize scroll-linked motion for 60fps performance?▼

Optimize scroll-linked motion by using Scroll Timelines instead of scroll event listeners. This Skill reviews scroll animation code and enforces best practices to eliminate scroll jank without requiring library migrations.

Why does my UI animation stutter on low-end devices, and how can I optimize it?▼

UI animations stutter due to compositor property misuse and inefficient paint animations. This Skill identifies performance violations like inefficient blur effects and suggests layer promotion to deliver smooth motion.

Can I use this to audit animations built with GSAP, WAAPI, or the Motion library?▼

Yes, you can audit animations built with CSS, WAAPI, Motion, rAF, or GSAP. This Skill reviews animation code across these libraries to identify rendering bottlenecks and enforce measurement batching rules.

Do I need to migrate my animation library to improve motion performance?▼

No, you do not need to migrate your animation library to improve motion performance. This Skill refactors janky interactions and enforces rendering path optimization within your existing CSS, WAAPI, or GSAP setup.

Related Skills

Explore More Software Engineering Skills→
marchattonmarchatton
5

fixing-motion-performance

Audit and refactor UI animation performance across CSS, WAAPI, Motion, rAF, and GSAP.

Community
Intermediate
MaggieAppletonMaggieAppleton
160

fixing-motion-performance

Audit UI animations and optimize transforms to reduce layout thrashing.

Community
Advanced
mohamedgshoaibmohamedgshoaib
5

fixing-motion-performance

Identify and resolve UI animation performance issues in CSS, WAAPI, and JS-driven systems.

Community
Intermediate
FutureAtomsFutureAtoms
1

ui-ux-react-native-performance

Optimize React Native UI performance for 60fps rendering and memory management.

Community
Advanced