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

•

デザインツール

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.

主な機能

Standardized easing tokens and cubic-bezier curve recommendations
Production-ready CSS and JavaScript implementation snippets
Guidance on transform origins, springs, and bounce physics
Intelligent evaluation of animation purpose, frequency, and pattern
Context-aware duration values for snappy or illustrative motion
33 GitHub stars

ユースケース

Creating spatial continuity for layout shifts and expanding UI components
Refining transition timing for complex dropdowns, modals, and menus
Polishing micro-interactions and hover states to feel more natural and responsive

概要

主な機能

Standardized easing tokens and cubic-bezier curve recommendations
Production-ready CSS and JavaScript implementation snippets
Guidance on transform origins, springs, and bounce physics
Intelligent evaluation of animation purpose, frequency, and pattern
Context-aware duration values for snappy or illustrative motion
33 GitHub stars

ユースケース

Creating spatial continuity for layout shifts and expanding UI components
Refining transition timing for complex dropdowns, modals, and menus
Polishing micro-interactions and hover states to feel more natural and responsive