interaction-design
Installation
Summary
Microinteractions, motion design, and state transitions that enhance UI polish and user feedback.
- Covers timing guidelines (100ms to 500ms+), easing functions, and purposeful motion principles for feedback, orientation, and focus
- Includes patterns for loading states, skeleton screens, progress indicators, toggles, page transitions, ripple effects, and swipe gestures
- Provides CSS keyframe animations and transition examples alongside Framer Motion implementations for React
- Built-in accessibility support with
prefers-reduced-motiondetection and guidance on performance optimization usingtransformandopacity
SKILL.md
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