Motion Systemby Owl-Listener

Motion System Skill.

Make animation decisions reusable across components and teams.

Design Systems
Motion

Source Review · Motion SystemSKILL.md

Task Design Systems Produces • Named duration and easing tokens with intended uses. • Choreography rules for groups, stagger, and direction. • Reduced-motion overrides and documentation requirements. Before You Start Requires a token implementation or platform equivalent; the source does not mandate an animation framework.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Create a Shared Motion Vocabulary

Define shared motion tokens, coordination rules and reduced-motion alternatives for the whole product.

Source-based workflowNot an execution benchmark

The Working Approach

Motion System treats movement as a design-token layer rather than a series of unrelated component choices. It defines a small duration scale, semantic easing roles, and coordination rules for elements entering, leaving, or moving together.

The source also puts reduced-motion handling at the system level. That is a meaningful distinction from adjusting one animation after it has shipped: token overrides and replacement behaviors can apply consistently across the product. The example timings are a starting vocabulary, not proof that every interface should use the same values.

Expected Deliverables

Named duration and easing tokens with intended uses.
Choreography rules for groups, stagger, and direction.
Reduced-motion overrides and documentation requirements.

See the Example Brief

From Brief to Review

01
Inventory Motion Roles
Identify immediate state changes, entries, exits, and larger transitions. Create only enough tokens to cover distinct needs.
02
Define Coordination
Specify shared timing within semantic groups, stagger limits, and consistent movement directions.
03
Build the Accessible Variant
Document which motion disappears, what replaces it, and how essential state information remains visible.

02 When to Use It

When to Use It

Requires a token implementation or platform equivalent; the source does not mandate an animation framework.

A Good Fit

Inconsistent Component MotionUseful when different teams have accumulated incompatible animation timings.
Token-System ExpansionAdds motion to the same shared pipeline that already manages color and spacing.

Limits to Check

Not a Finished AnimationIndividual interactions still require composition and implementation.
Examples Need TestingSource durations and curves need validation against the product, devices, and accessibility requirements.

Bring These Inputs

Component InventoryList the existing animations and what each communicates.
Motion PrinciplesDescribe the intended product character and interactions that should not animate.
Platform and AccessibilityProvide implementation targets and reduced-motion expectations.

03 Decisions That Matter

Decisions That Matter

Small Vocabulary
Fewer semantic choices make it easier to spot an unnecessary exception than a large catalogue of arbitrary timings.
Global Accessibility
System-level overrides reduce the chance that one component forgets the motion preference.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md

Requires a token implementation or platform equivalent; the source does not mandate an animation framework.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use motion-system to unify our tooltips, drawers, dialogs, and page transitions. Propose a small token scale and entry/exit easing roles, define stagger limits, and write reduced-motion behavior that preserves status information. Include cases that should not animate and mark timings as proposals for device testing.

Inspect the Result

Check the actual output against these observable criteria.

Each token has a distinct role and concrete value.
Grouped elements follow the same documented choreography rules.
Reduced-motion behavior is specified at the system level.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: design-systems/skills/motion-system/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

Define shared motion tokens, coordination rules and reduced-motion alternatives for the whole product.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

How many duration tokens should there be?

The source recommends a small set, typically four to six, and adding values only for genuinely different cases.

Does reduced motion remove all feedback?

No. Essential state communication should remain, with movement disabled or replaced where appropriate.

Which implementation does it target?

It describes CSS custom properties or equivalent platform tokens and inclusion in an existing token export pipeline.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills