Micro-Interaction Adder

This skill layers production-grade CSS micro-interactions onto frontend code — new or existing. The goal: every element a user touches should respond, making the interface feel alive, crafted, and trustworthy.

Philosophy

Micro-interactions are not decoration. They:

• Confirm intent — "yes, I saw you click that"
• Communicate state — loading, disabled, selected, error
• Reward attention — subtle delight for the observant
• Establish hierarchy — animated elements feel more important

Rules of thumb:

1. Duration: 150–300ms for most UI. 400–600ms for entrances. Never over 800ms for interactive feedback.
2. Easing: prefer cubic-bezier curves over ease-in-out defaults. Use spring-feel curves for scale.