i-animate_skill

Overview

This skill reviews a feature and enhances it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. I focus on a single high-impact experience, add clear feedback and transitions, and ensure performance and accessibility constraints are respected. The workflow begins with a contextual audit and ends with testable implementation recommendations.

How this skill works

I follow the Context Gathering Protocol from the i-frontend-design skill before any design work; if no context exists, I stop and run teach-impeccable to collect requirements. I inspect UI code and runtime behavior to identify missing feedback, jarring transitions, unclear relationships, and missed delight opportunities. Then I create a prioritized animation plan (hero, feedback, transition, delight layers) and provide concrete CSS/JS snippets, timing, and accessibility fallbacks.

When to use it

• When interactions lack clear visual feedback (buttons, form submissions).
• When state changes feel abrupt or users lose spatial context (show/hide, route changes).
• When a single hero animation can clarify purpose and brand personality.
• When micro-interactions can speed task flow or reduce errors (validation, toggles).
• When performance budget and motion preferences need explicit consideration.

Best practices

• Always run the Context Gathering Protocol first and collect performance constraints.
• Prioritize one well-orchestrated hero moment; avoid animating everything.
• Use transform and opacity for GPU-accelerated motion; avoid animating layout properties.
• Respect prefers-reduced-motion and provide non-animated alternatives.
• Use recommended durations and easing curves; keep feedback <300ms and entrances 500–800ms.
• Test at 60fps on target devices and verify reduced-motion behavior.

Example use cases

• Add a dramatic yet quick hero entrance on primary landing content with staggered reveals.
• Turn a silent form submit into a clear sequence: loading skeleton → success check mark → subtle celebration.
• Improve navigation with crossfade route transitions and a shared element animation for continuity.
• Make toggles, checkboxes, and buttons feel responsive with subtle scale, ripple, and color transitions.
• Smooth complex layout changes (accordions, modals) with height-safe transitions and focus management.