animate

Add purposeful frontend animations and micro-interactions that improve feedback, transitions, hierarchy, and delight while respecting performance and prefers-reduced-motion.

SKILL.md

GitHub

Animate

This is the Impeccable animate mode alias.

Use the installed impeccable skill as the design context first, then focus only on motion that improves usability or feel.

Workflow

  1. Identify where motion would clarify feedback, smooth a transition, explain hierarchy, or add a high-value delight moment.
  2. Pick one coherent motion strategy before adding individual effects.
  3. Implement with transform and opacity where possible. Avoid animating layout properties such as width, height, top, and left.
  4. Respect prefers-reduced-motion and keep interaction feedback fast.
  5. Verify motion is smooth, purposeful, non-blocking, and not exhausting.

Source: https://skills.sh/pbakaus/impeccable/animate