motion-behavior-planner

Plans UI motion behavior including triggers, timing, interruption rules, and reduced-motion alternatives.

Updated Jul 7, 2026

Search Tags:#performance #animation #interaction design #motion design #microinteractions #reduced motion #ui planning

Ready to run

npx skills add https://github.com/vmitsaras/Agent-Skills --skill motion-behavior-planner-vmitsaras

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-behavior-planner
Source: https://github.com/vmitsaras/Agent-Skills/tree/main/skills/ui-ux-polish/motion-behavior-planner
Command: npx skills add https://github.com/vmitsaras/Agent-Skills --skill motion-behavior-planner-vmitsaras

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams often jump straight into writing animation code without defining why motion exists, when it starts, or how it behaves under interruption, leading to inconsistent, inaccessible, or performance-heavy UI motion. ## Core Features & Use Cases - Motion Intent Planning: Define the user-facing purpose of each animation, its triggers, start and end states, and sequencing relationships before implementation. - Accessibility & Performance Boundaries: Specify reduced-motion alternatives, interruption behavior, and compositor-friendly performance constraints. - Use Case: Before building a new checkout flow, use this Skill to produce a motion plan covering page transitions, button feedback, loading states, and reduced-motion fallbacks that engineers can implement directly. ## Quick Start Plan the motion behavior for my app's onboarding flow, including transitions, microinteractions, and reduced-motion alternatives.

Frequently Asked Questions about motion-behavior-planner

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

FAQPage Schema

How do I plan UI animations before writing code?▼

Define each motion's user-facing purpose, trigger, start and end states, duration tier, and easing intent before implementation. This Skill guides that process and outputs a structured motion inventory and timing table ready for engineering handoff.

How to design motion for reduced-motion accessibility preferences?▼

Replace large movements with opacity changes, instant state changes, or shorter durations while preserving the meaning the motion communicated. Critical state changes should always include a non-motion cue as well.

What should a motion design specification include?▼

A complete spec covers motion purpose, triggers, start and end states, duration tiers, easing intent, sequencing, interruption behavior, reduced-motion alternatives, and performance boundaries such as compositor-friendly properties and concurrency limits.

When should I not add animation to a UI?▼

Avoid motion that lacks a clear user-facing purpose, hides a usability or information-architecture problem, or runs on dense repeated surfaces where it harms performance. Motion should never block interaction or comprehension.

How do I handle animation interruption and rapid re-triggering?▼

Define explicit rules for reversing, cancellation, debouncing, or state snapping when users navigate away, scroll, or repeat an action mid-motion. This prevents visual glitches and keeps the interface responsive.