motion-choreography-patterns

Coordinate multi-element UI motion sequences across primary, supporting, and environment actors.

63|2|Updated Mar 23, 2026

Search Tags:#a11y #pattern #choreography #design-system #motion #stagger #ui-animation

Ready to run

npx skills add https://github.com/stolinski/s-stack --skill motion-choreography-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-choreography-patterns
Source: https://github.com/stolinski/s-stack/tree/main/skills/motion-choreography-patterns
Command: npx skills add https://github.com/stolinski/s-stack --skill motion-choreography-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Orchestrating coordinated motion across multiple UI elements can be error-prone and hard to maintain. This skill provides a repeatable model for designing, documenting, and implementing motion patterns that communicate interaction intent across complex interfaces.

Core Features & Use Cases

Choreography model: split interactions into primary, supporting, and environment actors to preserve hierarchy.
Timing architecture: define lead, primary, follow, and settle beats with consistent durations.
Pattern library integration: reference choreographic patterns for stagger, modal/overlay stacks, and route changes.
Input-to-motion mapping: map user input types (tap, drag, keyboard) to reliable motion responses.
Accessibility & fallbacks: support reduced-motion and non-motion alternatives without losing state clarity.

Quick Start

Describe a basic staggered reveal for a modal with a scrim and a card.

Frequently Asked Questions about motion-choreography-patterns

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

FAQPage Schema

How do I coordinate multi-element UI motion sequences across complex interfaces?▼

Coordinate multi-element UI motion by splitting interactions into primary, supporting, and environment actors, preserving hierarchy and communicating interaction intent across complex interfaces.

What is the best way to design staggered reveals and modal stacks in a design system?▼

Design staggered reveals and modal stacks by applying a choreography model that defines lead, primary, follow, and settle beats with consistent timing durations for reliable UI animation.

How does UI choreography handle accessibility and reduced-motion fallbacks?▼

UI choreography supports accessibility by providing reduced-motion alternatives and non-motion fallbacks, ensuring state clarity is maintained without relying on animation for users with motion sensitivities.

Can I map user input types like tap and drag to specific motion responses?▼

Map user input types including tap, drag, and keyboard to reliable motion responses using an input-to-motion mapping architecture that ensures consistent interaction feedback.

What documentation is generated for UI animation patterns to ensure QA readiness?▼

QA-ready documentation for UI animation patterns includes a storyboard, timeline, implementation plan, accessibility notes, and validation steps to define a repeatable output contract.