UI Animation Review and Tuning
Diagnose UI animations that feel off and get drop-in CSS or Motion fixes for easing, duration, origin, and interruptibility.
Before & after
Same prompt, same agent — the only difference is the skill.
A hover state for a button should provide visual feedback that it's interactive. You could add a color change, maybe a slight scale effect, or an underline. There are lots of ways to approach it depending on your design system. Subtle animations are good practice. You might want to consider things like duration and easing to make it feel polished. Would you like some examples of common hover patterns?
MICRO-INTERACTION SPEC: Button Hover REST STATE - Background: #0066FF (solid blue) - Text: white, weight 500 - Scale: 1.0 - Opacity: 1.0 HOVER STATE (on mouseenter) - Background: #0052CC (darker blue, 10% shift) - Scale: 1.04 (4% enlarge, from center point) - Opacity: 0.95 (slight transparency) - Duration: 140ms - Easing: cubic-bezier(0.34, 1.56, 0.64, 1) // overshoot for delight - Shadow: 0 8px 24px rgba(0,0,0,0.12) // lift off page ACTIVE STATE (on mousedown) - Scale: 0.98 (press inward) - Duration: 60ms - Easing: ease-out - Shadow: 0 2px 8px rgba(0,0,0,0.08) // settle down EXIT (on mouseleave) - Animate all properties back to rest - Duration: 200ms - Easing: ease-out (gentle deceleration) TOUCH FALLBACK - Skip hover on mobile (no :hover) - Active state on tap, hold 100ms, then reset - No shadow on touch (reduce motion overload) PRINCIPLE: Movement originates from button center, uses tension curves for anticipation, then ease-out for satisfaction.
About this skill
Your dropdown feels sluggish, your modal pops in from nowhere, and your toasts glitch when someone clicks twice. You can tell the motion is wrong but not why. AI-generated UI makes this worse because it defaults to ease-in-out, 300ms everywhere, and scale(0) entrances. This skill names the exact problem and hands you corrected code.
What it does
- Decides whether an interaction should animate at all, based on how often people trigger it
- Replaces weak built-in easing with strong custom ease-out curves, and uses springs for drag and gestures
- Fixes transform origin so popovers grow from their trigger and modals stay centered
- Catches interruptibility bugs, such as keyframe animations that restart or jump when toggled quickly
- Moves animations onto transform, opacity, and clip-path so they stay smooth, and adds proper reduced-motion and touch-hover handling
- Tunes drag-to-dismiss with velocity thresholds and rubber-banding instead of distance-only cutoffs
What you get
A per-animation verdict (keep, fix, or cut) with the specific defect, the reason it feels wrong, and drop-in CSS, Tailwind, or Motion (Framer Motion) code you can paste in.
Best for
Frontend engineers and design engineers polishing React or web component UIs, and designers reviewing AI-built prototypes whose motion feels cheap or slow.
SKILL.md preview
---
name: ui-animation-review-and-tuning
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.