Apply this skill when the request involves:
-
Animation, interaction, motion design, transitions, scroll effects, micro-UX, immersive experience
-
アニメーション、インタラクション、表現、演出、マイクロUX、没入感、スクロール、トランジション
-
Any visual expression or timing-based UI behavior
Core Principles
-
Experience is state transitions and timing, not just visuals. Design how things change over time.
-
Constraints first. Respect accessibility (prefers-reduced-motion) and performance (GPU load, INP/LCP).
-
Start minimal. Prototype small, keep only animations that add value.
Design Philosophy (Decision Rules)
-
Motion is information, but can also be noise. Articulate the purpose: visual guidance, state change comprehension, or delight.
-
Don't animate everything. Only animate important moments (create contrast).
-
Never break a11y. Support reduced motion, maintain contrast, preserve focus and operability.
-
Performance IS the experience. Avoid layout thrashing; prefer lightweight techniques.
-
Make it reversible. Implement animations as toggleable features.
Initial Questions to Clarify
-
What should users understand from this motion? (Purpose)
-
What environment is expected? (Mobile / low-spec / slow network)
-
What triggers this? (Hover / click / scroll / route change)
-
Is reduced motion support required? (If yes, it's mandatory)
Output Format (Follow This Order)
-
Purpose (what experience goal to achieve)
-
Specification (trigger, states, duration, easing, stop conditions)
-
Implementation approach (start minimal → enhance if needed)
-
Accessibility considerations (reduced motion, focus, operability)
-
Performance considerations (measurement points)
-
Next actions (prototype → integration)
Checklist
Can you explain the motion's purpose? (Not just "looks cool")
Does it respect prefers-reduced-motion?
Are keyboard/focus operations unobstructed?
Does it avoid layout recalculations? (Prefer transform/opacity)
No negative impact on INP/LCP?
Common Pitfalls
-
Over-animating everything, reducing information density
-
Ignoring reduced motion, causing discomfort or danger
-
Heavy implementations (scroll handler abuse) degrading INP