Motion Design

Overview

Design intentional, purposeful motion for product UI. This skill evaluates animation needs and recommends specific easing curves, durations, and implementation approaches based on interaction frequency and purpose.

Every animation needs a job. If it has no job, don't animate.

Process

Phase 1: Load References (Required)

Before any recommendations, read both reference files:

1. Decision Tree (references/decision-tree.md) - Which easing category to use based on the interaction type, plus scale/origin/hover guidance
2. Easing Tokens (references/easing-tokens.md) - Specific curves, duration values, and performance guidelines

Phase 2: Evaluate the Animation