motion-design-pro

Make motion that explains the interface: it shows where things come from, confirms that an action worked, and makes a state change legible, and it stays fast, consistent, and comfortable. This is the deep companion to the always-on apple-motion-design.md and android-motion-design.md rules. The rules steer code while it's written; this skill designs the motion system, writes the spec designers and developers share, builds the hard sequences, and audits what exists. It serves designers (the spec and the vocabulary) and developers (the tokens and the code) from the same source.

Sources. Adapted from the LottieFiles motion design skill (MIT, © 2025 LottieFiles; see NOTICE.md): the three pillars, motion layers, personality archetypes, emotion mapping, Disney's principles for UI, timing and easing tables, patterns, and the quality checklist. Rewritten for SwiftUI and Jetpack Compose and checked against Apple's Human Interface Guidelines and Material 3 motion. Thank you to LottieFiles for publishing it openly.

Pick the mode from the request:

• Define the motion system: no motion tokens yet, a rebrand, or "make the app feel more X". Choose a personality with references/principles.md, set tokens with references/timing-and-easing.md, write docs/design/motion.md from references/motion-spec.md, and add the tokens to the DesignSystem / :core:designsystem module.
• Spec or build an interaction: a designer's prototype, or "animate this". Work through the checklist below, pick a recipe from references/patterns.md, and write the spec row before the code.
• Review: existing animation feels slow, cheap, robotic, distracting, or janky, or before a release. Run references/review.md (scan commands, quality checklist, smells and fixes).

If doing a partial task, load only the relevant reference file.

The Checklist (before any animation)

1. Purpose: feedback, orientation, state change, attention, or delight. No purpose, no animation.
2. Feeling: the emotional target (confident, calm, urgent, joyful) within the app's personality.
3. Primary property: position, scale, opacity, color, or rotation, chosen from the purpose; add at most one supporting property.
4. Duration from the element and travel distance; entrances longer than exits.
5. Easing direction: decelerate in, accelerate out, ease both ends on screen, linear only for spinners and progress.
6. Hero: one element leads; others follow 30–60 ms apart, total under ~500 ms.
7. Reduced alternative: what plays under Reduce Motion / "Remove animations" (usually a crossfade, or nothing).
8. Non-motion signal: the text, icon, haptic, or accessibility announcement that carries the same information.