skills.rest
stolinski
stolinskiCOMMUNITY
Explore all skills by this author →
Website𝕏@stolinskiGitHub

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
One-click install
npx skills add https://github.com/stolinski/s-stack --skill motion-choreography-patterns
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
princejoogieprincejoogie
30

web-animation-design

Designes and implements web animations and motion systems for UI interfaces.

Community
Advanced
nsuberinsuberi

normalize

Audit and realign UI components, spacing, tokens, and accessibility to a design system.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate