motion-system
Define a motion system with duration tokens, easing vocabulary, and reduced-motion handling for consistent animation across a product.
npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill motion-system --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 choreo
- What You Do
- Why a Motion System
- Duration Tokens
- Easing Tokens
- Choreography Rules
- Reduced Motion
- Implementation
- Motion Principles (to define per product)
- Best Practices
What does the motion-system skill do?
Define a motion system with duration tokens, easing vocabulary, and reduced-motion handling for consistent animation across a product.
How do I install it?
Run `npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill motion-system --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Infrasity-Labs/dev-gtm-claude-skills, a repository with 97 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.