1. Habit
  2. Skills
  3. UI Animation skill
mblode · 10K installs

UI Animation skill
Runs by itself, PR touches animation code.

Smooth motion in every PR.

Install the UI Animation skill and make it a habit: follow https://gethabit.dev/skills/mblode/ui-animation.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

10K installs151 starsMIT licenceSource on GitHub ↗

UI Animation

by mblode · 10K installs

The skill

The ui animation skill helps frontend developers build, review and measure interface motion: springs, gestures, scroll effects, easing curves fitted from recordings and sparse interface sound.

Only when you ask.

The habit

Smooth motion in every PR.

↻ Runs by itselfPR touches animation code

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

PR touches animation code. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR touches animation code
  • pull_request.opened or synchronize with CSS or Motion changes

02

It checks its work

diff grep, review verdict. If a check fails, it tells you.

  • ✓no transition on width, height, top or left in the diff
  • ✓no transition: all in the diff
  • ✓no new framer-motion import for new work
  • ✓will-change is not set permanently

03

It remembers

animation review log. The next run reads it first: patterns flagged in earlier reviews.

loops/ui-animation-review-loop/log.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run, with no retries.

  1. 01

    Read the diff

    A pull request that changes motion code starts the run.

  2. 02

    Grep the diff

    The agent flags transitions on width, height, top or left and any transition: all.

  3. 03

    Check core rules

    It checks will-change use, reduced motion handling and new framer-motion imports.

  4. 04

    Review the motion

    It applies the ten standards in references/review-format.md and fills the Before/After/Why table.

  5. 05

    Give a verdict

    The review ends with a Block or Approve decision.

  6. 06

    Log the run

    The log keeps flagged patterns so repeat issues stand out next time.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the UI Animation skill helps.

Use it when

  • ✓ You add or tune UI motion
  • ✓ You review animation code in a PR
  • ✓ You copy easing from a screen recording

Skip it when

  • – You pick palettes or typography
  • – You audit a whole page's UI quality

Questions

UI Animation skill, answered.

Does the loop change my code?

No. It reviews the diff and writes a verdict to its own log. Fixes stay with you.

Why does transition: all fail the check?

The skill says it animates properties you did not mean and picks up new ones later, so each property should be listed.

Can the loop measure motion from a video?

The skill can, with its reverse-engineer scripts. This loop only covers the review branch.

How do I install the UI Animation skill?

Copy the prompt at the top into your agent. It installs the skill from mblode/agent-skills and sets up the habit. Or run npx skills add mblode/agent-skills --skill ui-animation.

Is the UI Animation skill free?

Yes. It is published under MIT. Habit is free too.

UI Animation. Now as a habit.

Install the UI Animation skill and make it a habit: follow https://gethabit.dev/skills/mblode/ui-animation.md

  • Free
  • No account
  • Undo in one line

All mblode skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by mblode, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.