PlugWiki

fixing-motion-performance: a skill that audits and fixes janky UI animations

fixing-motion-performance makes your agent review UI animations for jank and fix them with cheaper techniques, without changing your animation library.

Installs
27.6K
on skills.sh
Stars
10.5K
on GitHub
Updated
Nov 2026
last repo commit

You use it in two ways. /fixing-motion-performance applies the rules to any animation work in the conversation. /fixing-motion-performance <file> reviews that file and reports each violation with the exact snippet, one short sentence on why it matters, and a code-level fix.

The rules are ranked from critical to low: never patterns such as interleaving layout reads and writes, choosing transform and opacity for motion, measuring once, scroll-linked motion, paint cost, layers, blur limits and view transitions. It will not migrate your animation library unless you ask. SKILL.md is a single file of rules and bundles no scripts.

Good for

  • Front-end developers whose animations stutter
  • Design engineers reviewing motion before a release
  • Reviewers who want a rule-based check on CSS, WAAPI, Motion, rAF or GSAP code

Install fixing-motion-performance

Claude Code

  1. 1

    Copy this prompt.

    Install the fixing-motion-performance skill in Claude Code. Run this command:

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

  1. how to use
  2. when to apply
  3. rendering steps glossary
  4. rule categories by priority
  5. quick reference
  6. 1. never patterns (critical)
  7. 2. choose the mechanism (critical)
  8. 3. measurement (high)
  9. 4. scroll (high)
  10. 5. paint (medium-high)
  11. 6. layers (medium)
  12. 7. blur and filters (medium)
  13. 8. view transitions (low)
  14. 9. tool boundaries (critical)
  15. common fixes
  16. review guidance

Key facts

Author
ibelick (ibelick/ui-skills)
Repo
ibelick/ui-skills, path skills/fixing-motion-performance
Installs on skills.sh
27,633 (as of Nov 2, 2026)
GitHub stars
10,454 (shared repo, Nov 2, 2026)
License
MIT
Last repo commit
Nov 1, 2026
skills.sh audits
Gen Agent Trust Hub: pass. Socket: pass. Snyk: pass.
Files
1: SKILL.md only

What it includes

  • Applies the rules to animation work in the conversation

    Use it before you write or change animations.

    /fixing-motion-performance

  • Reviews one file against all rules

    Reports violations with the quoted line, why it matters in one sentence, and a concrete fix.

    Read · /fixing-motion-performance <file>

  • No layout read/write interleaving, no scroll-event animation

    Also no requestAnimationFrame loops without a stop condition, and no mixing animation systems that each touch layout.

    1. Never patterns (critical)

  • Default to transform and opacity

    JS-driven animation only when interaction needs it. Paint or layout animation only on small, isolated surfaces.

    2. Choose the mechanism (critical)

  • Measure once, batch reads before writes

    Prefer FLIP-style transitions and Scroll or View Timelines, with IntersectionObserver to pause off-screen motion.

    3. Measurement and 4. Scroll (high)

  • Keep paint small, promote layers sparingly, limit blur

    Blur animation stays at 8px or less and is never continuous or on large surfaces.

    5. Paint, 6. Layers, 7. Blur (medium)

  • Navigation-level changes only

    Avoid for interaction-heavy UI or where interruption is needed.

    8. View transitions (low)

  • Do not migrate animation libraries

    Apply the rules inside the existing system and never partly migrate APIs.

    9. Tool boundaries (critical)

  • Before and after snippets

    Width to transform, scroll listener to scroll-timeline, and a FLIP measurement example.

    Common fixes

From the official docs

Questions

What does fixing-motion-performance do?

It makes your agent review UI animation code for performance problems such as layout thrashing, scroll-driven jank, heavy blur and paint-heavy properties, and suggest fixes.

How do I install it in Claude Code?

Use the install command in the box above. Then run /fixing-motion-performance, or give it a file path to review.

Will it rewrite my animation library?

No. SKILL.md says not to migrate animation libraries unless you ask, and to apply the rules in your existing stack.

Which tools does it cover?

The guidelines apply to CSS, WAAPI, Motion, requestAnimationFrame and GSAP code, and to will-change, transforms and layout measurement.

Is it safe?

It is one SKILL.md file with no bundled scripts. Its slash command with a file path makes the agent read that file and report. Fixes are suggestions in the report, so review any edit your agent then makes.

Does it block all blur and paint animation?

No. It allows paint or layout animation on small, isolated surfaces, and says one-shot effects are acceptable more often than continuous motion. It prefers downgrading a technique over removing the motion.

Is there a similar skill?

ibelick/ui-skills lists other design-engineering skills, for example baseline-ui, in the same repo. This one only covers animation performance.

Information

updated Nov 2, 2026

Repository
ibelick/ui-skills
Folder
skills/fixing-motion-performance

ibelick/ui-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. SKILL.md · github.com
  2. ui-skills README · github.com

Updated Nov 2, 2026.