skills.rest
dotlab-hq
dotlab-hqOFFICIAL
Explore all skills by this author →
GitHub

fixing-motion-performance

Diagnose and fix CSS and JS animation performance issues causing stutter and layout thrashing.

1|Updated Feb 26, 2026
Search Tags:#ui#performance#frontend#animation#transform#scroll#layout-thrashing
One-click install
npx skills add https://github.com/dotlab-hq/storage-platform --skill fixing-motion-performance-dotlab-hq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fixing-motion-performance
Source: https://github.com/dotlab-hq/storage-platform/tree/main/.agents/skills/fixing-motion-performance
Command: npx skills add https://github.com/dotlab-hq/storage-platform --skill fixing-motion-performance-dotlab-hq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and fix animation performance issues to eliminate stutter and layout thrashing across UI.

Core Features & Use Cases

  • Diagnoses common causes of jank: layout thrashing, improper use of will-change, expensive blur effects, and paint-heavy transitions.
  • Provides actionable fixes: prefer transform/opacity, batch measurements, and use compositor-friendly techniques to improve frame smoothness.
  • Use Case: When a list scroll or modal transitions stutter, apply recommended constraints to restore smoothness.

Quick Start

Describe the animation issue in the UI and apply the recommended constraints to improve performance.

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 stuttering in frontend UI animations?▼

Fix layout thrashing by batching layout reads and writes to eliminate forced synchronous reflows. This restores smooth frame rates by preventing the browser from repeatedly recalculating styles during animation loops.

Why does scrolling cause jank and how do I optimize scroll-linked motion?▼

Scroll-linked motion causes jank when it triggers expensive paints. Optimize scroll performance by using compositor-friendly properties like transform and opacity instead of altering layout-affecting attributes.

What is the best way to optimize CSS and JS animations for smooth UI transitions?▼

The best way to optimize CSS and JS animations is preferring transform and opacity properties. These compositor-friendly techniques bypass the main thread's layout and paint stages, ensuring smooth transitions.

When should I use will-change to improve animation performance, and what are its limitations?▼

Use will-change sparingly to hint the browser about upcoming compositor-friendly transforms. Its limitation is that overuse forces excessive layer creation, consuming extra memory and potentially degrading overall performance.

Why do expensive blur effects cause animation stutter and how can I resolve it?▼

Expensive blur effects cause stutter by heavily taxing the browser's paint system. Resolve this animation stutter by reducing blur complexity or replacing it with optimized, compositor-friendly visual techniques.

Can I use this approach to fix modal transitions and list scroll performance in typical frontend projects?▼

Yes, you can apply these animation performance constraints to fix modal transitions and list scroll stutter in typical frontend projects. The approach provides clear guardrails and error handling for both CSS and JS components.

Related Skills

Explore More Software Engineering Skills→
rattamnoonrattamnoon

fixing-motion-performance

Enforce transform and opacity motion rules to reduce UI animation jank.

Community
Intermediate
cwilliams5cwilliams5
1

review-paint

Audit Direct2D paint pipelines for per-frame allocations and redundant API calls.

Community
Advanced
knckknckknckknck

fixing-motion-performance

Audit and fix CSS and JS animation performance issues in UI projects.

Community
Intermediate
deomiarndeomiarn

animation-library

Implement UI animations with Framer Motion, CSS, and scroll-triggered effects.

Community
Intermediate