Verified:GitHub

Interaction & Motion Design

Specify timing, easing, spring physics, and reduced-motion behavior for interface motion systems.

35|13|Updated Feb 14, 2026

Search Tags:#loading states #micro-interactions #motion design #haptics #reduced motion #animation timing #easing curves

Ready to run

npx skills add https://github.com/phazurlabs/ux-ui-mastery --skill interaction-motion-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Interaction & Motion Design
Source: https://github.com/phazurlabs/ux-ui-mastery/tree/main/skills/interaction-motion-design
Command: npx skills add https://github.com/phazurlabs/ux-ui-mastery --skill interaction-motion-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams design motion that improves clarity, feedback, and emotional quality instead of adding distracting animation.

Core Features & Use Cases

Micro-interactions: Define button presses, toggles, form validation, and notification behavior with purposeful feedback.
Transitions and Loading: Plan page changes, modal motion, skeleton screens, and progress choreography that feel smooth and informative.
Accessibility and Platform Fit: Align animation with reduced-motion preferences, haptics, and platform-specific motion conventions across web, mobile, and spatial interfaces.
Use Case: Use it when you need to specify how a product should animate, what timing and easing to use, and how motion should support usability without overwhelming users.

Quick Start

Ask for a motion design plan for a specific interface flow, including animation timing, easing, haptics, loading states, and reduced-motion behavior.

Frequently Asked Questions about Interaction & Motion Design

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

FAQPage Schema

How do I design micro-interactions and motion for product screens?▼

You can design micro-interactions and motion by specifying purposeful feedback for button presses, toggles, and form validation across web, iOS, Android, and spatial interfaces to improve clarity and emotional quality without causing distraction.

What is the best way to plan loading states and page transitions?▼

The best way to plan loading states and page transitions is to choreograph skeleton screens, modal motion, and progress indicators that feel smooth and informative to the user during interface changes.

How do I specify animation timing and easing curves for mobile apps?▼

Specify animation timing and easing curves for mobile apps by defining spring physics, sequencing, and performance constraints that align with platform-specific motion conventions across iOS and Android interfaces.

Does motion design work with reduced-motion accessibility preferences?▼

Yes, motion design works with reduced-motion preferences by specifying accessibility safeguards that alter or remove animation timing and haptics to ensure interface motion supports usability without overwhelming users.

Can I use haptics and tactile feedback across spatial and mobile interfaces?▼

Yes, you can use haptics across spatial and mobile interfaces by specifying synchronized tactile feedback that aligns with platform-specific motion conventions and micro-interaction behavior.

When should I not use animation in interface design?▼

You should not use animation in interface design when it fails to provide clarity or purposeful feedback, as motion should support usability rather than adding distracting elements that overwhelm the user experience.