# Motion Design

> Design purposeful motion and animation that improves understanding, feedback, and delight without harming usability or accessibility. Use when specifying transitions, micro-interactions, loading patterns, or motion guidelines for a product.

- Skill: `itsual/motion-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add itsual/motion-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/itsual/motion-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: itsual (https://skillmd.com/u/itsual)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/itsual/motion-design

---


# Motion Design

## Overview

Motion should explain, guide, and confirm — not merely decorate. Good motion reduces cognitive load; bad motion distracts or excludes.

## When to Use

- Defining transitions between states or screens
- Designing micro-interactions and feedback
- Creating loading or progress animations
- Establishing motion principles for a design system

## Core Practices

- Tie motion to meaning (cause → effect)
- Keep durations appropriate (snappy for feedback, slightly longer for orientation)
- Respect `prefers-reduced-motion`
- Maintain spatial consistency (elements move logically)
- Document easing, duration, and triggers for engineering

## Principles

- Purpose before polish
- Fast enough to feel responsive; slow enough to be understood
- Never block task completion with non-essential animation
- Accessibility is non-negotiable

## Verification

- [ ] Motion helps users understand what changed
- [ ] Reduced-motion alternatives exist
- [ ] Specs are implementable by engineering