Animate
Choose whether to animate, then implement timing, interruption, and reduced motion.
Fixing Motion Performance
Find layout thrashing, costly animated properties, and scroll-linked bottlenecks.
The editorial verdict
Where it earns its place.
The most focused performance repair pass in this catalog for an animation that already exists. It works within the current library and points attention at layout, paint, scroll, and measurement costs. Treat its recommendations as hypotheses to confirm in browser profiling rather than promised frame-rate gains. When pairing it with React View Transitions, account for its stricter navigation-only rule, which can reject the other guide’s list and state transitions.
Reach for it when
- Investigating a stuttering interaction
- Improving motion without migrating animation libraries
Think twice if
- You need a new motion concept or art direction
- You cannot inspect the interaction in a browser
Before you install
Compatibility & contents.
- Claude Code
- partial
- Cursor
- partial
- Codex
- partial
- Gemini CLI
- partial
- GitHub Copilot
- partial
- License
- MIT
- Bundled scripts
- None found
- Hooks
- None found
Native: documented support. Partial: setup or adaptation may be needed. Not verified: the source has not established this fact. “None found” describes the inspected skill, not a security audit. Read the methodology.
Source context
The repository, in numbers.
Source: GitHub / ibelick/ui-skills. Repository totals may be shared by several skills. Snapshot fetched ; these are not live counts. Check the snapshot date for freshness. Popularity is not a measure of design quality.
Watch the overlap.
No conflicts are recorded. This does not establish that every combination has been tested.