Agent skill · design visual · aiskillstore
interaction-design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
Why this skill is useful
Provides specific implementation patterns and code snippets for enhancing UI interactions that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Quick Start: Button Microinteraction Interaction Patterns 1. Loading States Skeleton Screens: Preserve layout while loading Progress Indicators: Show determinate progress 2. State Transitions Toggle with smooth transition: 3. Page Transitions Framer Motion layout animations: 4. Feedback Patterns Ripple effect on click: 5. Gesture Interactions Swipe to dismiss: CSS Animation Patterns Keyframe Animations CSS Transitions Accessibility Considerations Best Practices 1. Performance First: Use transform and opacity for smooth 60fps 2. Reduce Motion Support: Always respect prefers-reduced-motion 3. Consistent Timing: Use a timing scale across the app 4. Natural Physics: Prefer spring animations over linear 5. Interruptible: Allow users to cancel long animations 6. Progressive Enhancement: Work without JS animations 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/interaction-design