motion-design

Standardize UI motion with token-based easings, durations, and stagger patterns.

Updated May 6, 2026

Search Tags:#accessibility #react #page transitions #easing #prefers-reduced-motion #ui motion #animation tokens

Ready to run

npx skills add https://github.com/shipiit/shipit-ui-design --skill motion-design-shipiit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/shipiit/shipit-ui-design/tree/main/skills/motion-design
Command: npx skills add https://github.com/shipiit/shipit-ui-design --skill motion-design-shipiit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Motion-design prevents inconsistent, janky, or inaccessible UI animations by standardizing easings, durations, stagger, and page-transition recipes around your existing token system.

Core Features & Use Cases

Token-first motion specs: Ensures durations, easings, and interactive state transitions come from tokens.css rather than hardcoded values.
Accessible animation behavior: Covers hover, active, focus-visible, disabled states and requires motion to respect prefers-reduced-motion.
Page-transition and advanced patterns: Provides default crossfade/slide/shared-element approaches and guidance for scroll-driven reveals, layout transitions, counters, tickers, and other motion motifs.

Quick Start

Use the motion-design skill to pick consistent transition defaults (duration, easing, and stagger) for your UI and page route changes while ensuring reduced-motion fallbacks are included.

Frequently Asked Questions about motion-design

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

FAQPage Schema

How do I standardize UI animation tokens for React and Svelte page transitions?▼

Standardize UI animation tokens by defining token-based easings, durations, and stagger patterns for page transitions. This approach applies across React, Svelte, and Vue, preventing inconsistent hardcoded values and ensuring consistent motion specs.

What is the best way to make UI motion respect prefers-reduced-motion?▼

To make UI motion respect prefers-reduced-motion, mandate compliant fallback behavior across all interactive states. This ensures accessible animation behavior by providing safe transitions for hover, active, focus, and disabled interactions.

How do I set up entrance and exit choreography without hardcoding milliseconds?▼

Set up entrance and exit choreography by using token-based durations and easings rather than raw milliseconds. This standardizes animation timing across your component UIs and prevents janky, inconsistent motion design.

Does this UI motion approach require a specific animation library to work?▼

This UI motion approach does not require a specific animation library, using existing motion libraries only when already present. It standardizes easings and transitions around your existing token system rather than adding new dependencies.

Can I use token-based easings for scroll-driven reveals and layout transitions?▼

You can use token-based easings for scroll-driven reveals, layout transitions, counters, and tickers. The system provides default crossfade and slide approaches along with guidance for these advanced motion motifs.