interaction-design

# Interaction Design Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users. ## When to Use This Skill - Adding microinteractions to enhance user feedback - Implementing smooth page and component transitions - Designing loading states and skeleton screens - Creating gesture-based interactions - Building notification and toast systems - Implementing drag-and-drop interfaces - Adding scroll-triggered animations - Designing hover and focus states ## Core Principles ### 1. Purposeful Motion Motion should communicate, not decorate: - **Feedback**: Confirm user actions occurred - **Orientation**: Show where elements come from/go to - **Focus**: Direct attention to important changes - **Continuity**: Maintain context during transitions ### 2. Timing Guidelines | Duration | Use Case | | --------- | ----------------------------------------- | | 100-150ms | Micro-feedback (hovers, clicks) | | 200-300ms | Small transitions (toggles, dropdowns) | | 300-500ms | Medium transitions (modals, page changes) | | 500ms+ | Complex choreographed animations | ### 3. Easing Functions ```css /* Common easings */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */ --spring: cubic-bezier(0...