ui-animation
Helps your agent create and analyze visual animations. It can recreate movements and gestures from recordings, useful for making interfaces smoother.
What it does
This tool helps create and improve user interface animations. It can analyze animation recordings to recreate their movements and generate the necessary code.
When to use it
- ✓When you want to add motion to a button or menu.
- ✓When analyzing how an existing animation works to recreate it.
- ✓To adjust the speed and smoothness of an on-screen transition.
Example of what to ask your AI
“Create a smooth animation for a button that appears when the mouse hovers over it.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool analyzes how elements move on screen, either by observing a recording or using built-in tools. It understands spring physics and animation curves to generate the code that makes the animation happen.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill ui-animationOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/ui-animation/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
UI Animation
Open Design execution context
Use this as a functional helper on the user's current interface or accepted brief. Keep the host's task route, current stage, tool availability, and output contract. Planning describes the motion; implementation happens only in the host's authoring stage. Do not add an extra review, recording, rendering, or approval phase when the host disallows it. Reuse the project's existing stack and motion tokens. Companion skills are optional: use them only if installed; otherwise apply the relevant guidance here without inventing a tool invocation. Report measurements only when actually observed; mark visual estimates and checks that could not be performed explicitly.
- IS: designing, implementing, reviewing, debugging UI motion (springs, gestures, drag, easing, CSS transitions, keyframes, Motion), sweeping an interface for the moments that would genuinely benefit from motion, measuring motion from a recording (extract frames, track, fit curves) to emit code plus a handoff spec, naming a described motion effect (reverse-lookup vocabulary), and gating sparse interface sound.
- IS NOT: choosing overall visual direction, palettes, or typography (use
ui-designDirection mode), auditing a whole page's UI quality (useui-designAudit mode), or named text-effect specs (use the externalanimate-textskill where installed).
Reference files
| File | Read when |
|---|---|
| references/decision-framework.md | Default: deciding whether/why to animate, picking easing character; also the Discovery sweep ("where should this animate") |
| references/spring-animations.md | Spring physics, Motion useSpring, configuring spring params, Apple damping/response values, asymmetric open/close character, interruption mechanics |
| references/component-patterns.md | Buttons, toasts, crossfades, list stagger and removal, hover, step forms, Motion layout morphs and auto height, 3D |
| references/clip-path-techniques.md | clip-path for reveals, tabs, hold-to-delete, comparison sliders |
| references/gesture-drag.md | Drag, swipe-to-dismiss, momentum, pointer capture, velocity handoff, momentum projection, rotary/knob drag, detents, carousel touch-action |
| references/scroll-animations.md | Scroll-triggered reveals, scrubbed/scroll-driven animation (animation-timeline, useScroll), parallax, sticky scrollytelling, and when a scroll animation shouldn't exist |
| references/performance-deep-dive.md | Jank, CSS vs JS, WAAPI, CSS variables trap, Framer Motion caveats |
| references/debugging-symptoms.md | An animation feels off and the cause isn't named: symptom-indexed tables for sluggish, robotic, cheap, jumpy, and misfiring motion |
| references/svg-animation.md | Animating vector art: line drawing (stroke-dashoffset), SVG transform-origin traps, path morphing, shakes, ambient life |
| references/review-format.md | Reviewing animation code: ten standards (each with flag-on-sight triggers), Before/After/Why table, Block/Approve verdict |
| references/contextual-animations.md | Contextual icon swaps, word-level stagger entrances, peripheral de-emphasis, fixed-offset exits |
| references/transition-recipes.md | Installing a CSS transition: container morph, card resize, badge, dropdown and tooltip (with library origin variables), modal (with @starting-style entry), panel and drawer, page slide, icon swap, number pop-in, odometer roll, text swap, success, avatar hover, error shake |
| references/measurement-guide.md | Reverse-engineer: what to measure, eye vs script, reading metrics.json, choosing an ROI |
| references/curve-fitting.md | Reverse-engineer: reading fit_curves.py output, spring vs bezier, judging fit error, asymmetric open/close |
| references/code-output.md | Reverse-engineer: emitting code for CSS, Motion/Framer Motion, SwiftUI, React Native, UIKit |
…
FAQ
What are 'easing' and 'springs'?
'Easing' refers to how an animation speeds up and slows down (like a car braking or accelerating). 'Springs' simulate the behavior of a spring, creating more realistic and dynamic movements.
Can I use this for any type of animation?
It's focused on user interface (UI) animations, such as screen transitions, button movements, and gestures. It's not for complex visual effects like those in movies.
Does the tool create the code for me?
Yes, it can generate the code needed to implement the animation, whether in CSS or other programming languages used in web and mobile development.
Details
Original description by the author
Implement, review, and measure UI motion. Reconstruct easing, springs and gestures from a recording using bundled frame extraction, tracking and curve-fitting tools when available.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #781
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC