In the Skill's Own Terms
This skill designs and implements microinteractions, motion design, transitions, and user feedback patterns to enhance usability and delight users. It provides specific timing guidelines: 100-150ms for micro-feedback like hovers and clicks, 200-300ms for small transitions such as toggles and dropdowns, 300-500ms for medium transitions including modals and page changes, and 500ms+ for complex choreographed animations.
The skill covers loading states with skeleton screens and progress indicators, gesture-based interactions like swipe-to-dismiss, page transitions, and feedback patterns such as ripple effects. It emphasizes purposeful motion that communicates rather than decorates, using four principles: feedback to confirm actions, orientation to show element movement, focus to direct attention, and continuity to maintain context during transitions.
What it produces
- Button microinteractions with hover, tap, and spring animations
- Skeleton screens with pulsing animation for loading states
- Toggle components with smooth spring-based state transitions
- Page transitions with opacity and vertical movement using AnimatePresence
How It Works
- 01Follow Timing Guidelines by Interaction Scale
Use 100-150ms for micro-feedback like hovers and clicks, 200-300ms for small transitions like toggles, 300-500ms for medium transitions like modals, and 500ms+ for complex animations.
- 02Select Appropriate Easing Functions
Use ease-out (decelerate) for entering elements, ease-in (accelerate) for exiting elements, ease-in-out for moving between states, and spring for playful overshoot effects.
- 03Respect Accessibility Preferences
Check for prefers-reduced-motion media query and reduce animation durations to 0.01ms when users have requested reduced motion, ensuring animations don't cause discomfort.