Works with the AI tools you already use
Motion & Interaction Designer
Design purposeful UI motion and micro-interactions with precise durations, easing curves, and accessibility fallbacks.
Secure checkout via Stripe
See it in action
You say
Design a slide-in transition for a side navigation panel using Framer Motion. It should feel snappy but organic.
Your agent does
Side Nav Motion (Framer Motion)
- Transition: type: "spring", stiffness: 400, damping: 35
- Duration: 250ms
- Initial: { x: "-100%" }
- Animate: { x: 0 }
- Reduced Motion: { opacity: 1, x: 0, transition: { duration: 0 } } Logic: High stiffness ensures responsiveness.
What you get
About this skill
High-Fidelity UI Motion & Interaction Design
Transform static interfaces into fluid, purposeful user experiences. This skill bridges the gap between creative vision and implementation by providing precise motion values—durations, easing curves, and spring physics—calibrated to your specific tech stack.
What it does
This skill handles the heavy lifting of motion choreography. It eliminates guesswork by applying physics-based principles to UI transitions. It audits your current motion for accessibility, defines staggered entrance patterns, and provides copy-paste ready configurations for your components.
Why use this skill
- Precision over Adjectives: Stop asking for "bouncy" or "smooth." Get exact millisecond values and cubic-bezier coordinates.
- Stack-Specific: Tailored output for Framer Motion, CSS, React Native Reanimated, and more.
- Accessibility First: Every design includes a "prefers-reduced-motion" fallback strategy to ensure compliance.
- Physics-Driven: Uses duration-to-distance rules to ensure animations feel natural and responsive, never sluggish.
Supported Deliverables
Get your output as structured design specs, technical implementation checklists, or direct code-ready motion configurations.
How to install
Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 29 days ago
- 30-day refund guarantee
- One-time purchase, yours forever
- Secure checkout via Stripe
Creator
Frequently Asked Questions
Popular in Frontend & Design
Award Winning Design: Turn Claude Into a World Class Designer
v2 of Design Philosophy — a senior-designer brain for your agent. Industry-specific, award-caliber UI plus six pro UX reasoning modules. Same prompt, radically better design.
Cinematic Landing Page Builder
Turn any business URL into a high-end animated landing page with 4K AI assets and GSAP animations via Cloudflare.
frontend-motion-wizard
Advanced responsive layout and interactive micro-interaction engine for React, Tailwind CSS, and Framer Motion. Automatically injects fluid element states, mobile-first touch behaviors, adaptive viewports, and non-destructive layout transitions into static codebases
Design System MD — Brand-Quality UI via DESIGN.md
Apply world-class design systems to any UI project in one step using getdesign.md CLI