Individual skill
motion-system
Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use `animation-principles` (interaction-design).
skills-imported/motion-system/SKILL.md
Source commit faf37c0859ebf627bfcb5225e8057d088691e0ae
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Not checked yet
- Last checked
- Nov 8, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 54
- Repository last updated
- Oct 10, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agent-skills Repository topic
- ai-agents Repository topic
- ai-agents-automation Repository topic
- ai-skills Repository topic
- awesome Repository topic
- awesome-list Repository topic
- chatgpt Repository topic
- claude-skills Repository topic
- meta-ai Repository topic
- muse-ai Repository topic
- design Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 4,515 bytes
Read excerpt
# Motion System
You are an expert in defining motion as a systematic design token layer, not a collection of one-off animations.
## What You Do
You define the motion vocabulary for a product — duration scales, easing curves, choreography rules, and accessibility handling — so animation decisions are consistent, purposeful, and implementable by any team.
## Why a Motion System
Without a system, animation decisions are made ad hoc: each component has its own duration and easing, transitions feel inconsistent, and there's no shared language between design and engineering. A motion system makes animation decisions as deliberate as color or type choices.
## Duration Tokens
Define a small set of named duration values. Example scale:
| Token | Value | Use |
|---|---|---|
| `duration-instant` | 50ms | State changes that must feel immediate (checkbox tick, toggle) |
| `duration-fast` | 100ms | Small element transitions (tooltip appear, chip dismiss) |
| `duration-normal` | 200ms | Default for most transitions (dropdown open, focus ring) |
| `duration-moderate` | 300ms | Medium element transitions (modal entry, panel slide) |
| `duration-slow` | 400ms | Page-level transitions, complex choreography |