What problem does it solve?
This Skill eliminates the risk of inconsistent, clunky, or inaccessible interactive UI elements that create poor user experiences and fail to meet accessibility standards, ensuring all user interactions feel intentional and polished.
Core Features & Use Cases
- Micro-interaction framework: Applies Dan Saffer's trigger-rules-feedback-loops model to structure all interactive element behavior.
- Component state machine template: Provides a standardized 8-state template (idle, hover, focus, active, loading, success, error, disabled) with defined transition rules for every interactive component.
- Timing and easing guidelines: Includes purpose-built duration ranges and easing recommendations for different interaction types to avoid sluggish or glitchy feel.
- Loading and transition pattern library: Offers pre-vetted patterns for skeleton screens, spinners, progress bars, page transitions, modals, toasts, and drawers.
- Use Case: When building a user login form, this Skill ensures you define all 8 button states, use appropriate 100-200ms timing for press feedback, implement focus management for keyboard users, and add accessible loading indicators for async submission.
Quick Start
Use the interaction-design skill to define the complete state machine and transition rules for the new user profile edit form component.
