micro-interactions
Installation
SKILL.md
Micro-Interactions
The Four Parts
- Trigger: User action or system event
- Rules: What happens
- Feedback: What the user sees/feels
- Loops & Modes: Ongoing behavior
Essential Micro-Interactions
| Interaction | Feedback | Duration |
|---|---|---|
| Button click | Scale down 95%, opacity change | 100ms |
| Toggle switch | Slide + color change | 200ms |
| Checkbox | Scale + checkmark draw | 150ms |
| Like/heart | Scale up + color + particle | 300ms |
| Delete | Slide out + height collapse | 250ms |
| Add to cart | Item flies to cart icon | 400ms |
| Copy to clipboard | Tooltip confirms | 200ms |
| Error shake | Horizontal shake 3x | 300ms |