fixing-motion-performance

Audit and fix 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.

1.23x

Quality

96%

Does it follow best practices?

Impact

96%

1.23x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

38%

Sidebar Animation Performance Review

Layout thrashing and FLIP measurement

Criteria

Without context

With context

No layout-write interleave

100%

Reads batched before writes

100%

Transform used for motion

100%

No layout property animation on large surface

100%

FLIP technique or measure-once

33%

100%

No repeated layout reads during animation

100%

No layout-triggering rAF loop

100%

Opacity or transform default

100%

Violations identified

100%

Concrete fixes provided

100%

91%

18%

Scroll-Reveal Section Performance Fix

Scroll-linked animation mechanism

Criteria

Without context

With context

No scroll event listener for animation

33%

66%

No scrollTop/scrollY polling

33%

58%

Scroll/View Timeline or IntersectionObserver used

71%

100%

No rAF loop without stop

100%

IntersectionObserver for pause/visibility

100%

No layout/paint on large surface during scroll

30%

100%

Transform/opacity for reveal motion

100%

Violations identified

100%

No polling in setInterval

100%

Concrete code fixes

100%

98%

-1%

Product Card Hover Effect Performance Audit

Blur animation and layer promotion

Criteria

Without context

With context

Blur capped at 8px

100%

No continuous blur animation

100%

No blur on large surfaces

100%

Opacity/translate preferred over blur

100%

will-change used temporarily

90%

80%

No many/large promoted layers

100%

No inherited CSS variable animation

100%

No CSS variable driving transform/opacity

100%

Paint-triggering props on small elements only

100%

Violations identified with quotes

100%

Concrete code alternatives

100%

Repository: ibelick/ui-skills
Commit: 95d0e08

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Sidebar Animation Performance Review Scroll-Reveal Section Performance Fix Product Card Hover Effect Performance Audit

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.