motion-design

Evaluate UI animations and recommend easing curves, durations, and implementation guidance.

69|11|Updated Dec 30, 2025

Search Tags:#design #ui #guidance #tokens #motion #easing

Ready to run

npx skills add https://github.com/richtabor/agent-skills --skill motion-design-richtabor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/richtabor/agent-skills/tree/main/skills/motion-design
Command: npx skills add https://github.com/richtabor/agent-skills --skill motion-design-richtabor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps product teams design and tune UI motion to be purposeful, accessible, and consistent across components, reducing jarring transitions and guesswork.

Core Features & Use Cases

Token-guided easing and duration recommendations for enter/exit, morph, and hover interactions.
Transform-origin and spring vs bezier guidance for interruptible motion and native-feel experiences.
Implementation-ready CSS/JS guidance and accessibility considerations, including reduced-motion preferences.

Quick Start

Ask for a motion review of a UI interaction, and the skill will return easing tokens, duration recommendations, and an implementation snippet.

Frequently Asked Questions about motion-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I choose the right easing curves and durations for UI animations?▼

Choosing the right easing curves and durations for UI animations involves evaluating the interaction type, such as enter/exit or morph, to apply predefined motion tokens. This process ensures transitions are purposeful and consistent across components.

What is the best way to handle reduced-motion preferences for web and mobile interfaces?▼

Handling reduced-motion preferences for web and mobile interfaces requires respecting user accessibility settings by adjusting or disabling UI animations. Implementation guidance includes providing alternative transitions that maintain usability without causing motion-induced discomfort.

How do I optimize UI motion performance using transform and opacity properties?▼

Optimizing UI motion performance using transform and opacity properties restricts animations to compositor-friendly operations, avoiding layout thrashing. This approach ensures smooth, interruptible transitions and maintains high frame rates across web and mobile interfaces.

When should I use spring physics versus bezier curves for UI animations?▼

Using spring physics versus bezier curves for UI animations depends on whether you need interruptible, native-feel motion or precise, predictable timing. Spring guidance applies to interactive elements, while bezier curves suit standardized enter and exit transitions.

Does this motion design guidance provide implementation snippets for CSS and JS?▼

Motion design guidance provides implementation-ready CSS and JS snippets, delivering exact easing tokens, duration values, and transform-origin recommendations. This allows developers to directly integrate purposeful UI motion into their components.