← ClaudeAtlas

heroicons-animatedlisted

Add a Motion-animated Heroicon to a Next.js app from the heroicons-animated registry instead of hand-animating an SVG. Each icon is a shadcn-registry component installed with `shadcn add @heroicons-animated/<name>`, built on the `motion` runtime. This skill owns the install plus the two things the raw components lack: a `prefers-reduced-motion` guard and timing aligned to the project motion tokens (`lib/motion/`). Use when the user says "animated icon", "animate this icon", "make the bell/heart/menu icon animate on hover", "aggiungi un icona animata", or wants an icon micro-interaction. Refuses outside Next.js web (`stack.framework` next/monorepo) — for React Native use `rn-animations-gestures`. Not for: static icons (use the plain heroicons/lucide set), a whole motion system (use `transitions`), or installing the animation runtime itself (use `module-add motion`).
lukedj78/dev-flow · ★ 6 · Web & Frontend · score 78
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