interaction-motion

Specify motion timing tokens, feedback states, and reduced-motion alternatives for interface animations.

4|Updated Jun 1, 2026
One-click install
npx skills add https://github.com/vmobifystudio/app-dev-team --skill interaction-motion
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interaction-motion
Source: https://github.com/vmobifystudio/app-dev-team/tree/main/skills/interaction-motion
Command: npx skills add https://github.com/vmobifystudio/app-dev-team --skill interaction-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams design motion and feedback that clarify user actions without wasting battery, degrading performance, or excluding people who use reduced-motion settings.

Core Features & Use Cases

  • Motion Timing: Apply consistent fast, base, and slow duration tokens based on the meaning of an interaction.
  • Interaction Feedback: Define acknowledgement, progress, cancellation, and return paths for operations of different durations.
  • Accessibility and Reliability: Specify interruptible animations, preserved spatial position, reduced-motion alternatives, and safeguards against indefinite loading states.
  • Use Case: Use it while designing a screen transition, gesture, loading state, or animated component so the implementation communicates what changed and remains usable for all users.

Quick Start

Use the interaction-motion skill to specify the motion behavior, timing token, feedback states, and reduced-motion path for every animated component in the app.

Frequently Asked Questions about interaction-motion

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

FAQPage Schema
How do I design loading states and progress indicators for long-running tasks?

Loading states and progress indicators require explicit acknowledgement, progress, and cancellation behavior. You must use tokenized durations, interruptible transitions, and provide clear feedback paths for delayed operations to prevent indefinite loading.

What are reduced motion alternatives for microinteractions and screen transitions?

Reduced motion alternatives ensure animations remain accessible by providing options that preserve spatial position and communicate interface state without unnecessary movement. They require interruptible transitions and tokenized durations that adapt to user accessibility settings.

How do I apply motion timing tokens for consistent interaction feedback?

Motion timing tokens apply consistent fast, base, and slow durations based on interaction meaning. Tokenized durations ensure screen transitions, gestures, and component states communicate user actions clearly while remaining interruptible and performant.

Does this approach to motion design support accessibility and performance constraints?

Motion design accessibility requires reduced-motion alternatives, interruptible animations, and preserved spatial position. It safeguards against indefinite loading states and ensures interaction feedback works without degrading performance or excluding users who use reduced-motion settings.

Why do my animated components cause accessibility issues during product implementation review?

Animated components cause accessibility issues when they lack reduced-motion alternatives, interruptible transitions, or preserved spatial position. Implementation review requires tokenized durations and explicit cancellation behavior to ensure all user actions remain clear and responsive.

What is the best way to specify interaction feedback for component states and gestures?

Specifying interaction feedback for component states and gestures requires defining tokenized durations, interruptible transitions, and explicit progress or cancellation behavior. This ensures every interaction communicates what changed while remaining accessible to all users.