Micro-interactions Designer

This skill focuses on the small but crucial details that provide feedback and delight during user interactions (clicks, hovers, swipes).

Instructions

1. Identify key user actions (e.g., button press, file upload, form submission).
2. Define the visual feedback (e.g., button scale-down, loading spinner, success checkmark).
3. Set timing (e.g., 200ms) and easing for snappy feedback.
4. Ensure the interaction communicates the state clearly (Success, Error, Processing).
5. Use code or motion descriptions to guide implementation.

Examples

• "Design a micro-interaction for a 'Like' button."
• "Describe the hover state animation for these navigation menu items."