motion-choreography-patterns
Motion Choreography Patterns
Overview
This skill focuses on choreography: how multiple moving parts coordinate in time and space to communicate interaction intent.
Use it alongside foundational motion guidance to create motion systems that are legible, consistent, and production-ready across complex UI flows.
When to Use
- Designing sequences with more than one animated element
- Building staggered reveals, list transitions, and layout mode changes
- Implementing modal, drawer, popover, and overlay interaction stacks
- Handling add/remove/reorder scenarios in dense interfaces
- Mapping user input (tap, drag, scroll) to motion responses
- Auditing whether motion hierarchy matches product hierarchy
Choreography Model
More from stolinski/s-stack
html
Writes and reviews semantic, accessible HTML and template markup that stays readable and low-noise. Use when creating or refactoring HTML or Svelte templates, cleaning up div soup, choosing better elements, improving form markup, fixing heading or landmark structure, or replacing custom controls with native HTML.
9css-motion-systems
Use when designing or implementing motion for web interfaces, including CSS transitions and keyframes, `linear()` easing design, transform strategy (`translate`/`rotate` vs `transform`/`translate3d()`), and deep View Transitions API patterns for route and state continuity.
9ux-interface-design
Designs or reviews user interfaces that are self-evident, low-friction, and easy to understand with minimal explanation. Use when simplifying UI text, removing helper copy, improving affordances, tightening hierarchy, making forms more obvious, or evaluating whether an interface works without instructions.
7typography
Master typographer specializing in font pairing, typographic hierarchy, OpenType features, variable fonts, and performance-optimized web typography. Use for font selection, type scales, web
5copywriting
When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," or "CTA copy." For email copy, see email-sequence. For popup copy, see popup-cro.
4dex
Use when tracking complex multi-step tasks, creating task hierarchies, maintaining persistent task state across sessions, building backlogs, or when the user explicitly asks to "use dex" for task management. Dex provides persistent memory for AI agents with GitHub/Shortcut sync capabilities.
3