ui-animation
ui animation
What it does
- Animate for feedback, orientation, continuity, or deliberate delight. If it's just "it looks cool" and the user sees it often, don't.
- Never animate keyboard-initiated actions (shortcuts, arrow navigation, tab/focus); they repeat constantly and animation makes them feel slow.
- Prefer CSS transitions for interruptible UI: keyframes restart from zero on interruption, transitions retarget. Use keyframes only for predetermined sequences.
- Implementation priority: CSS transitions > WAAPI > CSS keyframes > JS (requestAnimationFrame); under load CSS stays smooth while JS drops frames.
- Use @starting-style for DOM entry; fall back to a data-mounted attribute where unsupported.
- A small filter: blur(2px) hides rough crossfades between swapped content.
- Directional motion matches position. Tab and carousel transitions animate in the direction matching spatial layout (left-to-right forward, right-to-left back).
Requirements & configuration
- Prefer lower-overhead transitions (CSS-only) unless the design requires JS orchestration.
- Every animation needs a prefers-reduced-motion: reduce path: disable transform/keyframe motion, keep instant state changes or opacity-only fades. All recipes include the guard.
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
ui-animation FAQ
What does the ui-animation skill do?
>- Designs, implements, reviews, debugs, and reverse-engineers UI motion: CSS transitions, keyframes, springs, gestures, drag, easing, timing, framer-motion, and animation curves from screen recordings. Use when asked to "add animations", "make this feel smooth", "review my animations", "add a swipe gesture", "match this easing", "reverse engineer this animation", "extract the animation curve", or "what's it called when..." to name a motion effect from a vague description. For visual direction use ui-design; for page-level UI audit use ui-audit. Animate for feedback, orientation, continuity, or deliberate delight. If it's just "it looks cool" and the user sees it often, don't. Never animate keyboard-initiated actions (shortcuts, arrow navigation, tab/focus); they repeat constantly and animation makes them feel slow.
What does ui-animation require?
Prefer lower-overhead transitions (CSS-only) unless the design requires JS orchestration. Every animation needs a prefers-reduced-motion: reduce path: disable transform/keyframe motion, keep instant state changes or opacity-only fades. All recipes include the guard.
How do I install ui-animation?
Run: npx -y skills add https://github.com/mblode/agent-skills --skill ui-animation --agent claude-code — the source lives at github.com/mblode/agent-skills.
Maintain ui-animation?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/mblode-agent-skills-ui-animation?ref=badge) npx agentictools info skills/mblode-agent-skills-ui-animation The second line is the CLI lookup for this page — handy in READMEs and docs.
Related skills
parallel-deep-research Exhaustive research with configurable depth, latency, and cost trade-offs for complex topics.
parallel-web-search Fast web search for current information, research, and fact-finding across the internet.
parallel-data-enrichment Bulk enrichment of company, people, or product data with web-sourced fields like CEO names, funding, and contact info.
status status
flutter-animations Comprehensive guide for implementing animations in Flutter with decision trees and patterns for every animation type.
magicpath magicpath