motion-design

The motion-design skill applies structured motion design principles to create emotionally driven and technically coherent UI animations and transitions. It focuses on bridging visual storytelling with interaction design by incorporating timing, easing, choreography, and adapted Disney animation principles. The goal is to ensure that motion is not purely decorative but serves a meaningful role in guiding attention, providing feedback, and reinforcing product behavior in user interfaces.

This skill provides a comprehensive framework for designing animations, including decision logic for when and how to apply motion. It defines motion personality archetypes (such as Playful, Premium, Corporate, and Energetic), structured duration and easing guidance, and a three-pillar system covering emotional intent, visual narrative, and motion craft. It also introduces layered animation design (primary, secondary, and ambient motion), a quick 8-step checklist for consistency, and property selection guidelines for translating design intent into motion behaviors such as position, scale, opacity, and rotation.

It is intended for designers and developers working on UI systems, including micro-interactions, loading states, page transitions, scroll-based effects, and complex multi-element choreography. The skill is compatible with modern animation ecosystems such as CSS-based animations and libraries like Framer Motion, GSAP, Lottie, and spring-based systems. It is especially useful for product designers, front-end engineers, and design system teams aiming to establish consistent motion identity and improve user experience through structured animation logic.