How does the Motion Design skill determine animation speed?

It evaluates the frequency of interaction; high-frequency tasks get near-instant transitions (120-240ms), while rare interactions allow for slower, richer motion.

What frameworks does the Motion Design skill support?

While it provides standard CSS transitions by default, you can specify frameworks like Framer Motion, GSAP, or React Spring for specialized implementation.

Does it provide code I can use immediately?

Yes, it generates specific CSS or framework-specific code snippets based on the evaluated component and standardized easing tokens.

Can this skill help fix 'janky' or unnatural animations?

Absolutely. It is specifically designed to refine easing curves and durations when triggered by requests like 'this feels too slow' or 'clean up this motion'.

Motion Design & UI Animation

Name: Motion Design & UI Animation
Author: richtabor

byrichtabor

•

Herramientas de Diseño

Optimizes user interfaces with intentional, purpose-driven motion design guidance and production-ready animation implementation.

The Motion Design skill empowers Claude to act as a specialized motion engineer, providing precise guidance on UI transitions, easing curves, and micro-interactions. It evaluates animation requests based on interaction frequency and purpose—ensuring every movement serves a functional role rather than being purely decorative. By referencing standardized easing tokens and a structured decision tree, it generates implementation details that prioritize performance, spatial continuity, and user delight across various web frameworks.

Características Principales

01Standardized easing tokens and cubic-bezier curve recommendations

02Production-ready CSS and JavaScript implementation snippets

03Guidance on transform origins, springs, and bounce physics

04Intelligent evaluation of animation purpose, frequency, and pattern

05Context-aware duration values for snappy or illustrative motion

0633 GitHub stars

Casos de Uso

01Creating spatial continuity for layout shifts and expanding UI components

02Refining transition timing for complex dropdowns, modals, and menus

03Polishing micro-interactions and hover states to feel more natural and responsive

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add richtabor/agent-skills motion-design

For use in Claude.ai and ChatGPT

Download Skill