Add purposeful frontend animations and micro-interactions that improve feedback, transitions, hierarchy, and delight while respecting performance and prefers-reduced-motion.
Installs into .claude/skills of the current project.
Are you the author of Animate?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/agisota-animate)
---
name: animate
description: Add purposeful frontend animations and micro-interactions that improve feedback, transitions, hierarchy, and delight while respecting performance and prefers-reduced-motion.
---
# 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
