interaction-design

The Interaction Design skill provides a comprehensive framework for building high-quality, professional user interfaces. It focuses on the intersection of motion design, user feedback patterns, and state-driven UI logic. This skill is intended for frontend developers and UI engineers looking to bridge the gap between static design and interactive, polished applications. It is particularly valuable during the final phases of feature development where user experience refinement and accessibility are top priorities.

• Advanced micro-interaction implementation using modern libraries like Framer Motion to create natural-feeling button hovers, taps, and gesture-based interactions.

• Sophisticated state transition management, including skeleton screens, progress indicators, and smooth layout changes to maintain user context during asynchronous operations.

• Timing and easing best practices, utilizing specific cubic-bezier configurations (ease-in, ease-out, spring physics) to ensure motion feels purposeful and not purely decorative.

• Accessibility-first development, including respecting user motion preferences (prefers-reduced-motion) and implementing standard focus/hover state patterns for screen reader and keyboard compatibility.

• CSS animation architectural patterns, providing reusable keyframe definitions for fades, pulses, and spins, as well as high-performance transition strategies for transforms and box-shadows.

• Use this skill to implement loading states, toast notifications, drag-and-drop interfaces, or complex page transitions.

• Input for this skill involves UI component specifications, design systems, and interaction requirements; output consists of clean, performant React/CSS/TypeScript code.

• Follow the core timing guidelines: 100-150ms for micro-feedback, 200-300ms for UI toggles, and 300-500ms for modal or view-level transitions.

• Always prioritize perceived performance; use skeleton screens to keep the layout stable and provide immediate visual confirmation of user input to reduce perceived latency.

• Ensure that all motion maintains continuity—users should always understand where new elements originate and where they exit.