`ui-animation`: stop animating everything — a skill that tells you when not to

Most UI animation bugs aren't missing effects. They're the wrong effects in the wrong places. mblode/agent-skills/ui-animation is a focused Agent Skill that installs a 4-question decision framework, 17 anti-patterns, and 12 ready-made CSS recipes into your agent's context. 1

It's the most-installed skill in the mblode/agent-skills collection — 5,500 installs as of today, the #1 pick out of 25 skills in the collection — and it fills a category this channel hasn't covered yet. 1

What it does and which agents it supports

ui-animation is a pure knowledge skill: no executable scripts, no runtime dependencies. Once installed, your agent gains a structured decision framework for whether to animate, how fast, which easing, and which CSS implementation strategy — before writing a single line of motion code. 2

The skill ships with 9 reference files that load on demand rather than flooding the context window all at once: 3

decision-framework.md — the 4-question framework, easing curves, and timing reference table
spring-animations.md — Framer Motion (a React animation library) spring presets and gesture patterns
component-patterns.md — per-component code for buttons, drawers, modals, tooltips, and more
clip-path-techniques.md — hardware-accelerated clip-path animations for reveals and transitions
gesture-drag.md — drag momentum, swipe-to-close, pointer capture
performance-deep-dive.md — CSS vs. JS animation tradeoffs, will-change pitfalls, off-screen pause patterns
review-format.md — a Before/After/Why table format for animation code review
contextual-animations.md — icon swaps with blur-fade, word-level staggered entrances
transition-recipes.md — 12 ready-made CSS transition recipes added May 27, 2026

Supported agents: Claude Code, OpenCode, Codex CLI, Cursor, and Windsurf. 3

github.com · GitHub リポジトリ

mblode/agent-skills

https://github.com/mblode/agent-skills

コンテンツカードを読み込んでいます…

Install

Single skill only (recommended if you don't need the full collection):

npx skills add mblode/agent-skills --skill ui-animation -y

Full 25-skill collection:

npx skills add mblode/agent-skills -g --all -y

Cursor installs to .cursor/skills/ui-animation/, accessible via /ui-animation. Claude Code installs to ~/.claude/skills/ui-animation/. 4 Prerequisites: Node.js 16+, npm, and your target agent already set up.

For local development with instant hot-reloading:

ln -s /path/to/agent-skills/skills/ui-animation ~/.claude/skills/ui-animation

The framework in practice

SKILL.md concept — a knowledge file ready to be loaded into your agent — A SKILL.md is a knowledge file your agent loads on demand — not a script that runs at install time. 5

The core heuristic from SKILL.md: "Animate for feedback, orientation, continuity, or deliberate delight." If none of those four apply, don't animate. 2

The 4-question framework runs in order: 6

Should this even animate? Keyboard shortcuts, arrow-key navigation, and Tab/focus traversal — never animate them. Actions repeated 100+ times a day must be instant. "If the purpose is just 'it looks cool' and the user will see it often, don't animate."
What's the purpose? Feedback (confirm an action), orientation (show spatial relationship), continuity (maintain context across a state change), or delight (add personality — only for rare interactions).
Which easing? Entrances use cubic-bezier(0.22, 1, 0.36, 1). Exits use the same curve at half the duration. Slides use cubic-bezier(0.25, 1, 0.5, 1). Hover uses ease. Anything gesture-driven uses spring physics.
How long? Keep everything under 300ms for routine UI. The specific table:

Interaction	Duration
Button press feedback	100–160ms
Tooltip appear	125–200ms
Dropdown / select	150–250ms
Modal / drawer	200–350ms
Page transition	250–400ms

The easing and duration are inseparable. A steep curve like Vaul's drawer cubic-bezier(0.32, 0.72, 0, 1) can run for 500ms without feeling slow — because most of the travel happens in the first 200ms. 6

The 17 anti-patterns

These are the hardcoded bans your agent will flag when reviewing animation code: 7

transition: all — triggers layout recalculation and animates properties you didn't intend to touch. ease-in on entrances — objects shouldn't start slow; that registers as sluggish. scale(0) as a starting value — nothing in the real world appears from nothing; scale(0.88–0.95) with opacity: 0 is the correct floor. Symmetric enter/exit durations — exits should be faster than entrances. Mounting animations without a user trigger — if no one clicked anything, the screen shouldn't move. Permanent will-change — it creates a compositing layer permanently; toggle it only during active animation.

The implementation priority rule: CSS transitions > WAAPI (Web Animations API) > CSS keyframes > JS (requestAnimationFrame). CSS animations stay smooth during heavy rendering; JS-driven animations drop frames under load. 8

User feedback

Reviews across three marketplaces give the skill a 4.5/5 average from 42 ratings. 4 The consistent themes across visible reviews:

Liam Choi (Dec 2024): "ui-animation fits our agent workflows well — practical, well scoped, and easy to wire into existing repos." 4

Kofi Huang (Dec 2024): "Useful defaults in ui-animation — fewer surprises than typical one-off scripts, and it plays nicely with npx skills flows." 4

Liam Park (Nov 2024): "The kind of skill you can hand to a new teammate without a long onboarding doc." 4

skills.shhttps://skills.sh/mblode/agent-skills/ui-animation外部リンク

コンテンツカードを読み込んでいます…

Caveat on the reviews: explainx.ai's pagination is broken — only 10 of the 42 reviews are actually readable, all 5-star, all from Oct–Dec 2024. Six reviewers share the first name "Liam." There's no Reddit thread, no X discussion, no GitHub issue filed. The 5,500 installs are real (cross-confirmed via claudemarketplaces.com at 5,300), but the social proof is thin. Treat the rating as "no red flags" rather than "community-validated." 9

Known limitations and when NOT to use

prefers-reduced-motion support was removed on May 19, 2026. 10 The commit message: "Remove reduced motion references." The current skill retains only a touch-device hover guard (@media (hover: hover) and (pointer: fine)). If your product has accessibility requirements, you'll need to add prefers-reduced-motion handling yourself — the skill won't prompt you to.

Technology scope is intentionally narrow. The skill covers CSS transitions, CSS keyframes, Framer Motion (spring physics and gestures), and clip-path. It does not cover GSAP (GreenSock Animation Platform), React Spring, Motion One, anime.js, scroll-driven animations (CSS or JS), or SVG SMIL. If your stack depends on any of those, the skill's code examples won't map directly. 11

Bus factor is 1. Matthew Blode (a Linktree AI engineer, Forbes 30 Under 30) is the sole active maintainer. 4 The repo has zero open issues, no releases, no changelog. Active commits — six key pushes since January 2026, with transition-recipes.md added as recently as May 27 — show the project is alive, but there's no succession plan and no organizational backing. 10

No before/after verification data exists. There are no Lighthouse scores, FPS measurements, or benchmark comparisons with and without the skill installed. The performance guidance is principled and correct, but "how much better will my actual app animate" has no quantified answer here.

When not to use

Skip this skill when you're building complex timeline-orchestrated animations (GSAP territory), working with SVG path animations, need scroll-driven CSS animations via the @scroll-timeline spec, or need React Spring's physics model specifically. The skill's review-format.md is still useful for code audits even if you're outside its primary stack, but the implementation examples won't transfer. As Claude Code Marketplaces puts it: "This is the skill to pull in when you're adding motion to buttons, building a drawer, or reviewing someone's animation code." 9 Outside that scope, look elsewhere.

The bottom line

ui-animation works best as an anti-slop filter for your agent's motion code — a checklist your agent runs through before committing to any animation. The value isn't the recipes (those you can write yourself); it's the 4-question framework that tells the agent when a button press deserves 100ms vs. when something should just switch instantly with no motion at all.

Pair it with the companion skill reverse-engineer-animation (in the same repo) to extract easing curves and spring parameters from screen recordings and output working CSS or Framer Motion code. 3 That two-skill combination covers the full loop: audit what you have → decide what to keep → implement what's missing.

The prefers-reduced-motion gap is a real omission for accessibility-conscious teams. Add a base

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

to your global stylesheet and the skill's guidance applies cleanly to the rest.

Cover: skills.sh listing card for ui-animation — mblode/agent-skills.