heroicons-animatedlisted
Install: claude install-skill lukedj78/dev-flow
# heroicons-animated — Motion-animated Heroicons via the shadcn registry
Adds one **pre-built, Motion-animated Heroicon** to a Next.js app instead of hand-rolling an SVG animation. The [heroicons-animated](https://www.heroicons-animated.com/) registry ships **316 icons** (MIT, by Aniket Pawar, backed by the Vercel OSS program), each a shadcn-registry `registry:ui` component built on `motion` that animates on hover and can be driven imperatively.
This is the **ecosystem-first** move for animated icons — the same rule as everywhere in dev-flow: don't hand-animate a bell/heart/menu SVG when a maintained, tokenizable component exists. This skill owns the **install** plus the two things the raw components *don't* give you: an **accessibility guard** (they animate unconditionally) and **timing aligned to your motion tokens**.
## When this skill applies
- "animated icon", "animate this icon", "make the bell/heart/menu icon animate on hover", "aggiungi un'icona animata", an icon micro-interaction (notification bell shake, menu↔close morph, heart like).
If the user wants a **whole motion system** (durations/easings/tiers), that's `transitions`. If they want a **static** icon, that's the plain heroicons/lucide set from the UI library. If the `motion` runtime isn't wired yet, this skill routes to `module-add motion` first (the components import from `motion/react`).
## Contract
Follows the dev-flow contract — see `references/contracts.md`. Key facts:
- Reads `meta.json#stack.fra