motion-choreography

Design accessible motion sequences with duration, easing, and reduced-motion alternatives.

234|55|Updated Mar 18, 2026

Search Tags:#performance #accessibility #animation #ux #transitions #motion

Ready to run

npx skills add https://github.com/Owl-Listener/designpowers --skill motion-choreography

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-choreography
Source: https://github.com/Owl-Listener/designpowers/tree/main/skills/motion-choreography
Command: npx skills add https://github.com/Owl-Listener/designpowers --skill motion-choreography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Motion is communication. Every animation answers a question the user didn't know they had. If it doesn't answer one, cut it.

Core Features & Use Cases

Duration guidance per context (micro-interactions, state changes, screen transitions)
Easing and timing presets to ensure smooth, purposeful motion
Reduced-motion support with alternate visuals for users who opt out
Performance focus restricting to transform, opacity, and GPU-friendly properties
Integration with motion-designer, accessibility-reviewer, and design-lead to align with the design system

Quick Start

Define a simple motion sequence for a UI transition that respects reduced-motion preferences.

Frequently Asked Questions about motion-choreography

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design UI transitions that respect reduced-motion accessibility preferences?▼

Accessible UI transitions require alternate visual sequences for reduced-motion users. This skill generates motion choreography that provides static or instant state changes, ensuring accessibility compliance when users opt out of animations.

What is the recommended duration for micro-interactions and screen transitions?▼

Recommended duration depends on context: micro-interactions use shorter timing, while screen transitions allow longer sequences. This skill provides duration guidance per UI context to ensure smooth, purposeful motion without unnecessary delays.

How do I choose the right easing and timing presets for meaningful animation?▼

Meaningful animation uses easing and timing presets that match the physical intent of the UI change. This skill supplies coordinated timing presets to ensure transitions communicate state changes smoothly and purposefully.

What are the performance constraints for GPU-friendly interface motion?▼

Performance-focused interface motion restricts animations to transform and opacity properties to stay GPU-friendly. This skill enforces these performance constraints to prevent jank and maintain smooth frame rates during transitions.

Can I use this to coordinate motion design with existing design system roles?▼

Yes, you can coordinate motion design with existing design system roles. This skill integrates with motion-designer, accessibility-reviewer, and design-lead roles to align all choreographic sequences with your established design system.

When should I not use animation in a user interface?▼

You should not use animation if it fails to communicate a state change or answer a user question. This skill evaluates motion purpose, cutting any animation that lacks functional intent to maintain strict UX clarity.

Related Skills

Explore More Design & Creative Skills→

dylantarre

motion-scale

Generate duration, easing, and delay tokens for UI motion systems.

Community

Advanced

dz07

Animations

Annotates and visualizes GitLab CI/CD runs and provides actionable insights for failures and bottlenecks, accessible via REST API and Python wheelhouse.

Community

Intermediate