skills.rest
richtabor
richtaborCOMMUNITY
Explore all skills by this author →
Website𝕏@richtaborGitHub

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
One-click install
npx skills add https://github.com/richtabor/agent-skills --skill motion-design-richtabor
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
hwatkinshwatkins

animation-transitions

Coordinate CSS, LiveView JS, and Svelte transitions with shared timing tokens.

Community
Advanced
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
chetan2921chetan2921

flutter-animating-apps

Implement Flutter animations using controllers, tweens, curves, and simulations.

Community
Intermediate