What is the motion-system skill?
The motion-system skill sits in the design-systems plugin of Owl-Listener's designer-skills pack. It makes your agent define duration tokens, easing curves, choreography rules and reduced-motion handling as one system, so animation across a product follows shared values instead of per-component guesses.
Motion-system is one skill inside the design-systems plugin from Owl-Listener's designer-skills. The SKILL.md frames the agent as an expert in motion design systems and asks it to define animation tokens, easing curves, choreography and reduced-motion handling.
The description sends individual interaction work elsewhere. For animation principles at the interaction level, it points to animation-principles in the interaction-design plugin, so this skill stays focused on shared tokens.
The token values it names
- Duration: instant 50ms, fast 100ms, normal 200ms, moderate 300ms, slow 400ms and deliberate 600ms.
- Easing: standard cubic-bezier(0.2, 0, 0, 1), decelerate (0, 0, 0.2, 1), accelerate (0.3, 0, 1, 0.3) and spring (0.34, 1.56, 0.64, 1).
- Linear easing is kept for looping animations only.
The skill adds that four to six duration values are usually enough, so a scale does not need to grow past what a product actually uses.
Choreography rules
- Stagger sibling items by 30 to 50ms.
- Give elements in the same group the same duration and easing.
- Keep a full sequence to 500ms or less.
- Keep direction consistent, so similar things move the same way.
Reduced motion at system level
Reduced motion is handled once, not per component. The skill disables slide, scale and rotate, swaps them for an instant change or an opacity fade, preserves essential loaders, and sets a global duration override at the :root level.
Who the motion-system skill is for
Best for
- Teams defining motion as CSS custom properties alongside other tokens.
- Products that need one reduced-motion policy instead of many local ones.
- Designers who want to document what should not animate.
Not for
- Tuning one interaction. The description points to animation-principles instead.
- Fixing slow animations in running code. Related: fixing-motion-performance.
- Programming timelines in a library. Related: gsap-core.
Use it with UiChemy
Motion tokens are values you can carry into a build. Composer writes real HTML, CSS and JS inside Elementor or Gutenberg, so duration and easing variables can live in the stylesheet it produces. Click Get Started on uichemy.com. Related: animation-vocabulary.
How to install Motion System Skill: Duration and Easing Tokens
/plugin marketplace add Owl-Listener/designer-skillsAdd the marketplace
Run the command above in the agent. It registers the repository as a source and installs nothing.
Install the plugin
Run
/plugin install design-systems@designer-skills, or choose it on the Discover tab of /plugin. motion-system ships inside.Gemini CLI route
The README describes copying the repository's .gemini/extensions contents into a .gemini/extensions folder in your project.
Ask for a motion system
Describe your product and ask for a motion token set with reduced-motion handling. Mention if you want CSS custom properties.
Check that it loaded
Ask for motion tokens for one product. The reply should list named durations and easing curves, stagger and sequence limits, and a reduced-motion override.
Key features
- Duration scaleSix named durations from instant at 50ms to deliberate at 600ms give every animation a shared timing vocabulary.
- Easing curvesStandard, decelerate, accelerate and spring are given as cubic-bezier values, with linear reserved for loops.
- Stagger guidanceSiblings are offset by 30 to 50ms so a group reads as one movement.
- Group consistencyElements in the same group share duration and easing, and similar things move in the same direction.
- Sequence ceilingA full choreographed sequence stays within 500ms.
- System-level reduced motionSlide, scale and rotate are disabled, replaced by instant changes or opacity fades, with essential loaders kept.
- Global duration overrideA :root override lets one switch change timing across all components.
- CSS custom propertiesImplementation guidance uses custom properties, and motion tokens join the token export pipeline.
- Principles and exclusionsThree to five motion principles per product, plus a written list of what should not animate.
Frequently asked questions
What does the motion-system skill do?
It instructs an AI agent to define motion as a system: duration tokens, easing curves, choreography rules and reduced-motion handling. It belongs to the design-systems plugin in Owl-Listener's designer-skills pack and produces values you can store as CSS custom properties.
How do I install motion-system?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install design-systems@designer-skills. Gemini CLI users follow the README and copy the repository's .gemini/extensions contents into their project. Motion-system arrives with the design-systems plugin, so there is no separate install.
Which duration values does it define?
It names six: instant at 50ms, fast at 100ms, normal at 200ms, moderate at 300ms, slow at 400ms and deliberate at 600ms. The skill also says four to six values are usually enough, so you can trim the scale to fit.
How does it handle reduced motion?
As a system-level rule. Slide, scale and rotate are disabled and replaced by an instant change or an opacity fade, essential loaders are preserved, and a global duration override at :root can adjust everything at once, instead of each component carrying its own logic.
Which agents does motion-system work with?
The README lists Claude Code and Gemini CLI as the target agents for the pack. It names no other agents. The skill is plain instructions, so other agents that read skill folders may use it, but the README does not claim that.
Does it write animation code?
Its guidance covers implementation with CSS custom properties and exporting motion tokens with your other tokens. It defines duration scales, easing curves, choreography rules and accessibility handling as a token layer, not as one-off animations. It is not an animation library. Related: gsap-core.
What should I use for performance problems?
Motion-system defines the values, not the rendering cost. The skill suggests testing on low-powered devices. Its scope is duration scales, easing curves, choreography rules and accessibility handling, so every animation decision shares one vocabulary. Related: fixing-motion-performance.
Is the skill free to use?
The designer-skills repository carries an MIT license according to GitHub, so you can read and reuse the skill text under that license. Check the repository for the full terms before copying files into a commercial product.