motion-designlisted

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
leobbaroni/maestro · ★ 1 · Web & Frontend · score 70

Install: claude install-skill leobbaroni/maestro

# Motion Design Skill ## When to Apply Use this skill when: - Creating UI animations (buttons, cards, modals, page transitions) - Designing micro-interactions and feedback animations - Building loading, success, or error states - Animating illustrations or decorative elements - Planning scroll-triggered or progress-based animations - Establishing brand motion identity - Choreographing multi-element sequences **Decision tree:** 1. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness 2. Does it express brand personality? → Motion Personality archetypes 3. Does it tell a story or guide attention? → Disney principles + choreography 4. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns --- ## Quick Reference: 8-Step Checklist Before creating any animation: 1. **Emotional target?** — joy, calm, urgency, elegance 2. **Motion Personality?** — Playful, Premium, Corporate, Energetic 3. **Primary property?** — position, scale, rotation, opacity 4. **Duration?** — see duration table below 5. **Easing family?** — entrance=decelerate, exit=accelerate 6. **Hero element?** — apply staging principles 7. **Secondary + ambient layers?** — add richness 8. **1/3 rules?** — motion distance, simultaneous elements --- ## Three Pillars (CRITICAL) Every animation must satisfy three pillars before any technical decisions: | Pillar | Question | Drives | |--------|----------|--------| | **Emotional Intent** | What should the viewer FEEL?