Does this skill migrate my animation library?

No, it is designed to work within your existing stack, such as CSS, Framer Motion, or GSAP, and will not rewrite your library unless explicitly requested.

Can I use this for scroll-linked animations?

Yes, it includes specific rules for using IntersectionObserver and View Timelines to ensure scroll-based motion does not trigger continuous layout cycles.

What are 'never patterns' in motion design?

These are critical performance anti-patterns, such as interleaving DOM reads and writes in the same frame, which this skill actively identifies and resolves.

How does it fix animation 'jank'?

It identifies expensive layout and paint triggers and provides code-level suggestions to replace them with compositor-only properties like transform and opacity.

Motion Performance Optimizer

Name: Motion Performance Optimizer
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

Design Tools

Optimizes web animations by identifying and fixing performance bottlenecks, layout thrashing, and inefficient rendering patterns.

This skill provides a comprehensive framework for diagnosing and repairing UI animation issues across CSS, Motion, GSAP, and WAAPI. It enforces a strict hierarchy of performance rules, prioritizing compositor-only changes (transforms and opacity) over expensive layout and paint triggers. By auditing code against critical patterns like layout thrashing, improper scroll handling, and overused blur effects, it ensures smooth, 60fps interactions while maintaining your existing animation stack and tool preferences.

Key Features

01Audits scroll-linked motion for performance bottlenecks and visibility logic

02Detects and fixes 'never patterns' like layout read/write interleaving

030 GitHub stars

04Optimizes animation mechanisms by prioritizing transform and opacity

05Ensures cross-library compatibility without forcing tool migrations

06Provides specific constraints for paint-heavy properties like blur and filters

Use Cases

01Refactoring janky or stuttering UI transitions for 60fps performance

02Auditing complex component libraries for layout thrashing and paint issues

03Implementing high-performance scroll-reveal effects and parallax motion

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/ai fixing-motion-performance

For use in Claude.ai and ChatGPT

Key Features

01Audits scroll-linked motion for performance bottlenecks and visibility logic

02Detects and fixes 'never patterns' like layout read/write interleaving

030 GitHub stars

04Optimizes animation mechanisms by prioritizing transform and opacity

05Ensures cross-library compatibility without forcing tool migrations

06Provides specific constraints for paint-heavy properties like blur and filters

Use Cases

01Refactoring janky or stuttering UI transitions for 60fps performance

02Auditing complex component libraries for layout thrashing and paint issues

03Implementing high-performance scroll-reveal effects and parallax motion

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/ai fixing-motion-performance

For use in Claude.ai and ChatGPT