UI Motion and Micro-Interaction Polish Pass
Audit a UI component's motion, then get tuned durations, easing curves, state feedback, and reduced-motion code you can paste in.
Before & after
Same prompt, same agent — the only difference is the skill.
Animation is a nice way to make interfaces feel more polished. You could add some hover effects and transitions to buttons. The speed and easing curve matter - you want animations to feel snappy but not jarring. It really depends on your design system and what kind of feel you're going for.
MOTION POLISH: BUTTON COMPONENTS TIMING SCALE • Micro (feedback): 120ms • Macro (navigation): 180ms • Entrances: 220ms BUTTON STATES - ANIMATION CHECKLIST REST → HOVER → Scale: 1.0 to 1.04 (4% growth) → Duration: 120ms → Easing: cubic-bezier(0.34, 1.56, 0.64, 1) [Apple bounce] → Shadow: add 8px blur, rgba(0,0,0,0.12) HOVER → ACTIVE (click) → Scale: 1.04 to 0.96 (press-down feel) → Duration: 60ms → Easing: ease-out → Opacity: text stays 1.0 FOCUS (keyboard) → Outline: 3px solid accent-color → Offset: 2px → No scale change (accessibility requirement) DISABLED → No animations; opacity 0.5, cursor not-allowed → Hover/focus states removed REDUCED MOTION FALLBACK → Detect: prefers-reduced-motion: reduce → Apply: Remove scale animations; keep focus outline only → Duration: 0ms (instant state change) FRAMEWORK: Framer Motion Variants: rest, hover, active Transition: type:"spring", stiffness:300, damping:20 TESTING: Verify smooth at 60fps on mid-range phones; test prefers-reduced-motion in system settings.
About this skill
Your UI works, but it feels cheap. Every element fades with transition: all 0.3s ease, popovers pop out of nowhere, buttons don't react when you press them, and the command palette makes you wait for it to animate. This skill runs a design-engineer polish pass on one component or flow. It decides what should move and what should not, then writes the exact code.
What it does
- Audits pasted components for common motion bugs:
transition: all, entering fromscale(0), wrong transform-origin, ease-in on entrances, animated layout properties, sticky hover on touch - Picks duration and easing by element size and how often it's used, so a frequent keyboard action gets no animation and a rare modal gets a considered one
- Adds explicit hover, press, and focus-visible states that respond immediately and don't fight keyboard users
- Writes interruptible transitions, spring settings for gestures, tooltip delay groups, and capped list staggers
- Adds reduced-motion fallbacks that swap movement for opacity instead of stripping all feedback
- Outputs code for CSS, Framer Motion (Motion), GSAP, or SwiftUI, plus a short checklist for checking it in slow motion
What you get
A motion audit table (element, trigger, current behavior, change, timing, reason), a small set of motion tokens, drop-in code for your framework, and a reduced-motion block.
Best for
Design engineers and front-end developers whose layout and typography are already settled, and who want a component to feel crisp and intentional without going over the top.
SKILL.md preview
---
name: ui-motion-micro-interaction-polish
description: Runs a final motion polish pass on a UI component or flow. Decides what should animate based on how often it's used, then sets durations, custom easing curves, transform origins, press/hover/focus states, interruptibility, and reduced-motion fallbacks, and writes the code in CSS, Framer Motion, GSAP, or SwiftUI. Use when the user says "polish the animations on this", "this feels janky", "add micro-interactions", "my modal just pops in", "my dropdown animation feels slow", "hover states feel cheap", "make this feel like a premium app", or "what easing should I use".
---
# UI Motion and Micro-Interaction Polish Pass
… (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.