Skills

Skills give AI assistants like Claude Code, Cursor or Codex project-aware knowledge of Animate UI. The same skill covers React and Vue: in a Vue or Nuxt project, your assistant knows when to run the CLI on your shadcn-vue components, when to swap a reka-ui import, and how to animate a custom component with Motion for Vue and the same motion as every Animate UI primitive.

For example, you can ask your AI assistant to:

• "Animate my shadcn-vue dialog and dropdown menu."
• "Make my save button show it's loading, then a quick Saved."
• "Animate my todo list when I add or remove a task."
• "Add page transitions to my Nuxt app."
• "Turn this Phosphor bell into an animated icon that rings on hover."
• "Make the menu feel snappier." or "Rends les toasts plus doux."
• "Review the animations in my app: what feels slow or janky?"
• "Give me this spring as CSS for my stylesheet."
• "Slow every animation down a little."

The skill reads your project (components.json, package.json and the component's imports) to find what the component is built on: shadcn-vue, reka-ui or plain markup.

InstallCopy Anchor Link

npx skills add imskyleen/animate-ui

pnpm dlx skills add imskyleen/animate-ui

yarn dlx skills add imskyleen/animate-ui

bun x skills add imskyleen/animate-ui

This installs the Animate UI skill in your project. Your AI assistant loads it automatically when you ask it to animate something. Add -g to install it for every project. Learn more about skills at skills.sh.

What's IncludedCopy Anchor Link

The skill gives your AI assistant the following knowledge:

The Right PathCopy Anchor Link

Every component takes the shortest path to its animation:

• shadcn-vue components: runs @animate-ui/cli animate, which swaps their reka-ui imports for @animate-ui/vue and removes the CSS animations Motion replaces. For the Questionnaire and the Sidebar, which have no import to swap, it makes the edits their pages list.
• Built on reka-ui: swaps the import to @animate-ui/vue/primitives/reka-ui, keeping every part, prop and data attribute.
• Anything else: animates it with Motion for Vue, following Animate UI's recipes and tokens, or adds a component from the Vue registry (icons, backgrounds, buttons, the Code Block, the Page Transition) when one already does it.

Motion TokensCopy Anchor Link

The values every Animate UI primitive moves with: springs, tweens and curves by role, scales, blur, shifts, rotations and staggers, plus the tempo of AnimateUIProvider to change the pace of every animation at once.

RecipesCopy Anchor Link

How each kind of component animates: overlays, menus, modals, sheets and drawers, disclosures, moving indicators, presses and swaps, and page transitions with Vue Router or Nuxt. Each recipe shows how to wire Motion for Vue into Reka UI or plain markup.

InteractionsCopy Anchor Link

Ready patterns for what people ask for by name: a button showing loading then success, a list adding and removing items, a drag to reorder, a card opening into a larger view, a skeleton giving way to content, a counting badge, a field shaking on an error, a row swiped away, a grid filtered or sorted, the steps of a form, a banner pushing the page. Each one is written with Motion for Vue in your templates, on your markup and styles, not pasted over them.

Animated IconsCopy Anchor Link

How to turn any icon, from Lucide, Hugeicons, Tabler, Phosphor, Heroicons or your own SVG, into an animated .vue icon that works with AnimateIcon and every trigger (hover, tap, in view, loop, speed). Each part moves like the real object, smooth before literal, inside the icon's grid, whatever the style: outline, solid, duotone, multicolor or pixel.

Feel and LevelsCopy Anchor Link

Words like snappy, calm, bouncy, plus doux or plus vif turn into the same values every time, and "faster" or "bouncier" are steps it can repeat. When you don't say how much motion you want, it asks: subtle (the default), more, or expressive. It can also give any spring or curve as CSS for a stylesheet.

ReproduceCopy Anchor Link

Show it a link, a video or a GIF: it measures the motion (what moves, how far, how long, on which curve or spring) and copies only that onto your component, which keeps its own look.

ReviewCopy Anchor Link

It reviews the motion you already have from facts: npx @animate-ui/cli audit reads your .vue files (their templates' motion.* bindings, their scripts and styles) and lists what moves, what each property costs the browser and the patterns worth a look. The skill then ranks what to fix first and says which facts are fine.

Motion RulesCopy Anchor Link

Quality rules that must pass (reduced motion, keyboard, hover-capable pointers, trigger-anchored origins, performance, interruptions, nothing stretching as it resizes) and style defaults it can tune on purpose.

How It WorksCopy Anchor Link

1. Gate and level: when you ask for an animation, you get one. How often the component is used decides its form, and the level you pick sets how much it moves.
2. Path detection: it finds what the component is built on and picks the CLI, an import swap, a recipe or an interaction pattern, after checking whether an Animate UI component already does the job.
3. Token use: every value comes from @animate-ui/vue/utils/motion, never a hand-typed spring, so your animations stay coherent and follow your tempo.
4. Verification: it runs vue-tsc before and after, checks reduced motion, the keyboard path, interruptions and origins, then tells you the path, the recipe and any default it changed.

Learn MoreCopy Anchor Link

• Installation: set up @animate-ui/vue and the CLI.
• Accessibility: reduced motion in Animate UI.
• Source: the skill's instructions and references.
• skills.sh: discover and install skills for AI assistants.

CreditsCopy Anchor Link

The motion rules build on Emil Kowalski's practical animation tips, with Animate UI's own springs and timing.