Defining or implementing UI motion, transitions, enter/exit behavior, progress feedback, or interaction animation.
Procedure
Identify the functional purpose of each motion: orientation, causality, feedback, continuity, or emphasis.
Reuse motion tokens for duration/easing instead of arbitrary per-component values.
Keep motion proportional to distance and interaction importance.
Ensure interaction remains understandable with motion reduced or removed.
Respect prefers-reduced-motion or the native platform equivalent.
Avoid animations that delay critical actions or conceal content until animation completion.
Verify actual runtime behavior where possible.
Failure conditions
Decorative motion is not a substitute for state communication. Reduced-motion mode must not remove information or make controls unusable.
1---2name: motion-spec3description: Motion Spec4---5# Motion Spec67## Use when89Defining or implementing UI motion, transitions, enter/exit behavior, progress feedback, or interaction animation.1011## Procedure12131. Identify the functional purpose of each motion: orientation, causality, feedback, continuity, or emphasis.142. Reuse motion tokens for duration/easing instead of arbitrary per-component values.153. Keep motion proportional to distance and interaction importance.164. Ensure interaction remains understandable with motion reduced or removed.175. Respect `prefers-reduced-motion` or the native platform equivalent.186. Avoid animations that delay critical actions or conceal content until animation completion.197. Verify actual runtime behavior where possible.2021## Failure conditions2223Decorative motion is not a substitute for state communication. Reduced-motion mode must not remove information or make controls unusable.
Run npx skillmds@latest add devotionn/motion-spec in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Motion Spec It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
devotionn (@devotionn) published this skill. Their other Agent Skills are listed on their SkillMD profile.
devotionn