motion-system
The motion-system skill defines a structured approach to animation by establishing duration tokens, easing curves, choreography rules, and accessibility guidelines. Use it when building a design system or product that requires consistent, intentional animation behavior across components and teams, ensuring animations feel cohesive and respect user accessibility preferences.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/motion-system && cp -r /tmp/motion-system/design-systems/skills/motion-system ~/.claude/skills/motion-systemSKILL.md
# 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 | | `duration-deliberate` | 600ms | Intentionally paced, high-emphasis moments (onboarding reveal) | Don't create more tokens than you have distinct use cases. 4–6 values is usually enough. ## Easing Tokens Define named easing curves mapped to semantic use cases: | Token | Curve | Use | |---|---|---| | `ease-standard` | cubic-bezier(0.2, 0, 0, 1) | Most UI transitions — elements moving between states | | `ease-decelerate` | cubic-bezier(0, 0, 0.2, 1) | Elements entering the screen | | `ease-accelerate` | cubic-bezier(0.3, 0, 1, 0.3) | Elements leaving the screen | | `ease-spring` | spring / cubic-bezier(0.34, 1.56, 0.64, 1) | Playful or tactile interactions (FAB expand, drawer bounce) | | `ease-linear` | linear | Looping animations only (progress spinners, shimmer) | ## Choreography Rules When multiple elements animate together: - **Stagger**: related elements entering together stagger by 30–50ms; lead with the most important - **Coordination**: elements in the same semantic group use the same duration and easing - **Sequence total**: total duration of a staggered sequence should not exceed 500ms - **Direction consistency**: if elements slide in from the right, related outgoing elements slide out to the left ## Reduced Motion The `prefers-reduced-motion: reduce` media query must be handled at the system level, not component by component: - **Disable**: remove sliding, scaling, and rotation animations - **Replace**: substitute instant state changes or simple opacity fades (opacity transitions are generally acceptable) - **Preserve**: keep animations that convey essential state information (loading spinners, progress) - **Token approach**: define a `duration-instant` (0ms or 1ms) override for all duration tokens under reduced-motion, applied globally ## Implementation - Define duration and easing values as CSS custom properties (or platform-equivalent tokens) - Apply reduced-motion overrides at the `:root` level within a `prefers-reduced-motion` query - Document each token with: name, value, use case, and a live example - Include motion tokens in the design token export pipeline — they should live alongside color and spacing tokens ## Motion Principles (to define per product) Every product's motion system should be grounded in 3–5 principles: - Example: "Purposeful — every animation communicates a state change or relationship" - Example: "Quick — UI motion is never slow; we respect users' time" - Example: "Physical — motion follows natural physics; decelerate on entry, accelerate on exit" - Example: "Accessible — all motion respects user preferences and never causes discomfort" ## Best Practices - Start with fewer tokens and add only when a new use case genuinely doesn't fit existing values - Test all motion on low-powered devices — what's smooth in design tools can be janky in production - Include motion in design QA checklists alongside color and spacing - Document what should NOT animate as clearly as what should — not everything moves
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).