ui-animation skill from mblode: design, review and measure UI motion

Makes your AI assistant design, review and measure UI motion, from CSS easing to springs and gestures.

Installs: 10.6K; on skills.sh
Stars: 180; on GitHub
Files: 24; besides SKILL.md
Updated: Oct 2026; last repo commit

ui-animation has your assistant decide whether an interaction should animate, pick the easing and duration, and write or review the code. It covers springs, gestures, scroll effects, SVG, performance and reduced motion. A separate branch measures an existing animation from a screen recording with three bundled Python scripts and writes code plus a handoff spec. The recording branch needs ffmpeg, and the fitting steps need Python packages. The skill is by mblode, in a repo of agent skills.

Good for

Front-end developers adding or fixing animation in CSS, WAAPI or Motion
Designers who want to copy a motion from a screen recording into code
Reviewers who want animation code checked against ten standards
Teams deciding where a UI should and should not move

Install ui-animation

Claude Code

1
Download the skill folder from https://github.com/mblode/agent-skills/tree/HEAD/skills/ui-animation.
2
Put it at ~/.claude/skills/ui-animation/ so that SKILL.md sits directly inside.
3
Start a new session; the skill loads when its description matches the task.

For the recording branch, install ffmpeg (brew install ffmpeg) and the Python packages (pip install opencv-python numpy scipy), as SKILL.md lists. Text-only animation advice needs neither.

Built from the package data we hold. Not yet tested by us.

What's in the skill

When it loads

Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound. Use when asked to "add animation", "match this easing", "reverse engineer this motion", "add a click sound", or find animation opportunities.

Sections in SKILL.md

Reference files
Core rules
Motion design principles
What to animate
Easing defaults
Transition decision rules
Spatial and sequencing
Accessibility
Performance
Anti-patterns
Workflow
Validation
Discovery workflow
Reverse-engineer workflow
Related skills

Key facts

Author: mblode (repo owner)
Repo: mblode/agent-skills
License: MIT (README and LICENSE.md)
Installs on skills.sh: 10,607 as of 2026-11-02
GitHub stars: 180 for the whole mblode/agent-skills repo, 2026-11-02
Last repo commit: 2026-10-29
What is inside: 25 files including SKILL.md: 18 reference files, 3 Python scripts, 3 eval files
Needs for recordings: ffmpeg; Python with opencv-python, numpy and scipy

What it includes

When to animate, durations and named cubic-beziers
Animate for feedback, orientation or continuity. A table gives durations and easing for buttons, tooltips, dropdowns, modals, slides and page transitions.
Try: “Add a polished open and close animation to this dropdown.”
Read · Core rules and easing defaults
14 UI patterns mapped to recipes
Notification badge, container morph, menu dropdown, modal, panel reveal, page slides, card resize, text swap, icon swap, number pop-in, odometer roll, success, avatar group hover and error shake.
Write · Transition recipes
Ten standards, a Before/After/Why table and a Block or Approve verdict
Loads references/review-format.md to review animation code strictly.
Try: “Review the animation code in components/Toast.tsx.”
Read · Review mode
Finds where an interface should animate
Reports opportunities with their purpose and how often users hit them, plus the rejected ones. It implements only when asked.
Read · Discovery sweep
Hover gating, reduced motion, will-change, off-screen pausing
Includes reduced-motion handling for Motion and CSS, and advice to animate transform and opacity only.
Read · Accessibility and performance rules
Extracts frames and a contact sheet from a recording
Runs ffmpeg on a video or GIF and writes frames and contact_sheet.png into an output folder.
Runs code · scripts/extract_frames.py
Tracks an element across frames
Uses OpenCV and NumPy to write metrics.json. An optional bounding box isolates one element.
Runs code · scripts/track_motion.py
Fits spring parameters and cubic-bezier curves
Uses SciPy to read metrics.json and report spring parameters, a bezier and fit error. Pass the same fps you extracted with.
Runs code · scripts/fit_curves.py
CSS, Motion, SwiftUI, React Native or UIKit
Fitted values go into templates in references/code-output.md, with separate open and close curves when they differ.
Write · Code output
Sparse, gesture-unlocked click sounds
references/interface-sfx.md: unlock audio from a user gesture, keep it quiet, always pair it with visuals and stay silent for high-frequency actions.
Read · Interface sound rules

From the official docs

Permissions

Low risk

The skill edits your UI code, and the recording branch runs ffmpeg and three Python scripts on files you give it. It tells you to install ffmpeg and Python packages for that branch.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

The recording branch needs installed tools
SKILL.md lists `brew install ffmpeg` and `pip install opencv-python numpy scipy`. Install them yourself or review the command before your assistant runs it. github.com
It edits your UI code
Build and fix modes change your components and CSS. Commit first and review the diff. github.com
Scripts are local file tools
The three scripts import argparse, subprocess, OpenCV, NumPy and SciPy and read or write local files. github.com

Technical details

Turning on read-only	No read-only mode. Review and discovery are analysis only, and you can ask for those.
Scopes	Edits your animation, CSS and component code Runs scripts/extract_frames.py, track_motion.py and fit_curves.py on a recording you supply Writes extracted frames, metrics.json and a contact sheet to an output folder

Questions

What does ui-animation do?

It helps your assistant decide whether and how a UI should move, write the code, review animation code, find places that would benefit from motion, and copy a motion from a screen recording.

How do I install it?

Use the install box at the top for Claude Code, Codex or the skills CLI. The repo README's own command installs every skill in the repo for Claude Code and Codex. The box has no Claude app upload because the recording branch runs scripts on your machine.

Do I need ffmpeg and Python?

Only to measure motion from a recording. SKILL.md says ffmpeg is needed for frame extraction and Python with opencv-python, numpy and scipy for tracking and fitting. With only ffmpeg you can still extract frames.

Does it need an API key?

No key is named. The three scripts work on local files.

Does it work with Motion (Framer Motion) and plain CSS?

Yes. It prefers CSS transitions for interruptible UI and covers the Motion library (the package is now motion, imported from motion/react). It can emit CSS, Motion, SwiftUI, React Native or UIKit code from a recording.

What does it hand off to other skills?

SKILL.md names product-design, ui-design (Direction and Audit modes) and an external animate-text skill as related. They are optional hand-offs, not requirements.

Is it safe?

It edits your UI code and, for recordings, runs ffmpeg and Python scripts on files you provide. Commit first, and install ffmpeg and the Python packages yourself if you prefer.

Information

updated Nov 2, 2026

Repository: mblode/agent-skills
Folder: skills/ui-animation

mblode/agent-skills skills.sh

Sources

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

Show all 6

ui-animation SKILL.md · github.com
review-format.md · github.com
interface-sfx.md · github.com
transition-recipes.md · github.com
code-output.md · github.com
mblode/agent-skills README · github.com