From design-skills
Audits and fixes UI animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
npx claudepluginhub master5d/claude-design-skillsThis skill uses the workspace's default tool permissions.
Fix animation performance issues.
Audits and fixes animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use for stuttering animations, janky transitions, or CSS/JS animation reviews.
Creates, reviews, and debugs UI animations including springs, gestures, drag interactions, clip-path reveals, easing, timing, CSS transitions, keyframes, and Framer Motion. Use for motion design, smooth implementations, or reviews.
Explains browser paint and compositing pipeline to achieve 60fps animations, identify repaint triggers, use compositor-only CSS properties, and manage GPU layers without memory exhaustion. Use for poor animation performance or high layer counts in DevTools.
Share bugs, ideas, or general feedback.
Fix animation performance issues.
/fixing-motion-performance
Apply these constraints to any UI animation work in this conversation.
/fixing-motion-performance <file>
Review the file against all rules below and report:
Do not migrate animation libraries unless explicitly requested. Apply rules within the existing stack.
Reference these guidelines when:
| priority | category | impact |
|---|---|---|
| 1 | never patterns | critical |
| 2 | choose the mechanism | critical |
| 3 | measurement | high |
| 4 | scroll | high |
| 5 | paint | medium-high |
| 6 | layers | medium |
| 7 | blur and filters | medium |
| 8 | view transitions | low |
| 9 | tool boundaries | critical |
/* layout thrashing: animate transform instead of width */
/* before */ .panel { transition: width 0.3s; }
/* after */ .panel { transition: transform 0.3s; }
/* scroll-linked: use scroll-timeline instead of JS */
/* before */ window.addEventListener('scroll', () => el.style.opacity = scrollY / 500)
/* after */ .reveal { animation: fade-in linear; animation-timeline: view(); }
// measurement: batch reads before writes (FLIP)
// before — layout thrash
el.style.left = el.getBoundingClientRect().left + 10 + 'px';
// after — measure once, animate via transform
const first = el.getBoundingClientRect();
el.classList.add('moved');
const last = el.getBoundingClientRect();
el.style.transform = `translateX(${first.left - last.left}px)`;
requestAnimationFrame(() => { el.style.transition = 'transform 0.3s'; el.style.transform = ''; });