What is the ui-animation skill?
The ui-animation skill is a folder in mblode's agent-skills repository that teaches an AI coding agent to design, review and measure interface motion. It covers easing and duration defaults, springs, gestures, scroll effects, a review format with a Block or Approve verdict, and fitting curves to screen recordings.
The ui-animation skill lives at skills/ui-animation in the mblode/agent-skills repository, next to skills for UI design, typography audits and PR review. Its SKILL.md covers designing, implementing, reviewing and debugging motion, plus measuring motion from a recording to emit code.
It states its own boundary. Overall visual direction, palettes and typography belong to the separate ui-design skill, and whole-page audits do too. Named text-effect specs go to an external animate-text skill where one is installed.
Default durations and curves
The SKILL.md carries a table of easing defaults by element. Routine UI stays under 300 ms, and duration scales with distance, so a full-screen slide may run longer while a 6px tooltip shift stays under 150 ms.
| Element | Duration | Easing |
|---|---|---|
| Button press feedback | 100 to 160 ms | cubic-bezier(0.22, 1, 0.36, 1) |
| Tooltips, small popovers | 125 to 200 ms | ease-out or the enter curve |
| Dropdowns, selects | 150 to 250 ms | cubic-bezier(0.22, 1, 0.36, 1) |
| Modals, drawers | 200 to 350 ms | cubic-bezier(0.22, 1, 0.36, 1) |
| Page transitions | 250 to 400 ms | enter or move curve |
| Illustrative or marketing | Up to 1000 ms | Spring or custom |
It also warns against ease-in for UI, because the element lags the user's action and feels sluggish, and prefers custom curves over the built-in ease keywords, whose gentle acceleration reads soft instead of decisive.
Core rules the agent follows
- Animate for feedback, orientation, continuity or deliberate delight. If it only looks cool and the user sees it often, skip it.
- Prefer CSS transitions for interruptible UI, because keyframes restart from zero on interruption while transitions retarget.
- Animate transform and opacity for movement. Never animate width, height, top or left, and never write
transition: all. - Give paired elements, such as a modal and its overlay, the same easing and duration.
- Gate hover motion behind a hover and fine-pointer media query so touch devices do not replay it on tap.
- Keep keyboard focus and repeated navigation immediate.
Measuring motion from a recording
The reverse-engineering path extracts frames from a recording, tracks the moving element and fits curves, then emits code. The reference files cover reading metrics.json, choosing a region of interest, and judging spring against bezier and fit error.
Output targets named in the code-output reference are CSS, Motion or Framer Motion, SwiftUI, React Native and UIKit. A choreography reference handles staggers, blur-before-move and per-edge settling for multi-element motion.
Who the ui-animation skill is for
Best for
- Front-end teams who want motion decisions tied to feedback and orientation instead of decoration.
- Reviewing animation code, where the review reference gives ten standards and a Before, After and Why table ending in a Block or Approve verdict. See also review-animations.
- Matching an effect you saw on another product, by recording it and fitting curves to the frames.
- Sweeping an interface for moments that would genuinely benefit from motion, as covered in find-animation-opportunities.
Not for
- Choosing a visual direction, palette or typography. The skill hands those to ui-design.
- Named text-effect specs, which it sends to an external animate-text skill.
- Teams who want a deep guide to one animation library. For GSAP, see gsap-core.
Use it with UiChemy
The skill emits CSS, Motion and native code, and it does not build WordPress pages. A workable route is to take its CSS transition recipes and apply them to sections you build elsewhere.
UiChemy Composer writes real HTML, CSS and JS inside Elementor or Gutenberg, so a transition can live in that code. Check the result with fixing-motion-performance. Click Get Started on uichemy.com.
How to install UI Animation Skill: Easing, Springs and Motion Review
git clone https://github.com/mblode/agent-skills.gitClone the repository
Run
git clone https://github.com/mblode/agent-skills.git. The skill sits in the skills/ui-animation folder.Copy the skill folder
Copy skills/ui-animation, with its references, evals and scripts folders, to wherever your AI coding agent loads skills from. For Claude Code, use its skills location.
Open the project with motion
Start the agent in the codebase whose animations you want built, reviewed or measured. For a recording, have the file ready.
Ask a motion question
Try requests such as add animation to this dropdown, match this easing, or find animation opportunities in this panel.
Check that it loaded
Ask the agent to animate a dropdown. It should use CSS transitions on transform and opacity, list its properties instead of using transition: all, and pick a duration and curve from the defaults table.
Key features
- Defaults table by elementButton press, tooltip, dropdown, modal, page and marketing motion each get a duration range and an easing curve, with routine UI kept under 300 ms.
- Named curvesEnter, Move, Drawer, Expo out, Press and On-screen move are named cubic-bezier curves, so the agent picks one by the role of the element.
- Installable transition recipesContainer morph, card resize, badge, dropdown, modal with an @starting-style entry, panel, page slide, icon swap and number pop-in are provided as CSS.
- Spring and gesture guidanceSpring physics with Motion useSpring, Apple damping and response values, drag, swipe to dismiss, momentum, pointer capture and velocity handoff.
- Scroll animation rulesScroll-triggered reveals, scrubbed animation with animation-timeline or useScroll, parallax and sticky scrollytelling, plus a note on when a scroll animation should not exist.
- Review formatTen standards with flag-on-sight triggers, a Before, After and Why table and a Block or Approve verdict for animation code.
- Symptom-indexed debuggingTables for sluggish, robotic, cheap, jumpy and misfiring motion help name a cause when an animation feels off.
- Discovery sweepThe decision framework includes a sweep that asks where an interface would genuinely benefit from motion, and why.
- Recording to codeFrames are extracted, tracked and fitted to curves, then emitted as CSS, Motion, SwiftUI, React Native or UIKit code.
- Optional interface soundSparse click sounds are allowed only after a user gesture and only as additive confirmation, with a separate reference for interface audio.
Frequently asked questions
What is the ui-animation skill?
It is a skill in the mblode/agent-skills repository for building, reviewing and measuring interface motion. A SKILL.md sets rules for easing, springs, gestures and scroll effects, then points to reference files for recipes, debugging, review and reverse engineering from recordings.
How do I install the ui-animation skill?
Clone mblode/agent-skills and copy the skills/ui-animation folder, including its references, into the folder your agent loads skills from. Then ask for animation work in plain language, for example add animation, match this easing or reverse engineer this motion.
Which AI coding agents can use the ui-animation skill?
The README install command targets Codex and Claude Code, and the repository topics include claude-code and claude-skills. No other agents are named. Because the skill is a SKILL.md folder, test it in your own agent after copying it.
Does the skill only write CSS?
No. CSS transitions are the first choice for interruptible UI, but the skill also covers Motion and Framer Motion, WAAPI and keyframes. The code-output reference adds SwiftUI, React Native and UIKit targets for motion reverse-engineered from a recording.
What timing and easing does it recommend?
Routine UI stays under 300 ms. Button presses run 100 to 160 ms, dropdowns 150 to 250 ms and modals 200 to 350 ms, mostly on named cubic-bezier curves. It advises against ease-in for UI because the element feels slow to respond.
Can it copy an animation from a screen recording?
Yes, that is the reverse-engineering path. The agent extracts frames, tracks the element, fits curves and judges spring against bezier before emitting code. A measurement guide explains what to measure and when to trust a script over the eye.
How does it review animation code?
The review reference lists ten standards, each with flag-on-sight triggers, and reports findings in a Before, After and Why table with a Block or Approve verdict. For other review angles, browse review-animations in this hub.
What license does the ui-animation skill use?
GitHub lists the mblode/agent-skills repository as MIT, and the README ends with an MIT license line. The license covers the whole repository. Read the LICENSE file before you redistribute the skill folder inside a product.