Use Case
Auto Animate is a powerful AI agent skill that extends your assistant with new capabilities. Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bugs, SSR imports, conditional parents, viewport issues, drag & drop conflicts, and CSS transform bugs. Use when: animating lists/accordions/toasts, troubleshooting SSR animation errors, React 19 StrictMode issues, or need accessible drop-in transitions with auto prefers-reduced-motion. This guide walks you through installing Auto Animate, configuring it for your setup, and running your first commands β so you can start getting value in minutes.
Install Auto Animate: npx clawhub@latest --dir ~/.claude/skills install auto-animate
Restart your AI client (Claude Code, Cursor, Gemini CLI, or OpenClaw)
Type a natural language request related to design & creative to trigger Auto Animate
Review the output and refine your prompt for better results
Combine Auto Animate with other skills to build multi-step workflows
Copy these prompts and use them with your AI agent after installing Auto Animate
Help me get started with Auto Animate
What can Auto Animate do for my design & creative workflow?
Show me an example of using Auto Animate
Select your agent
Option 1: Install via CLI (recommended)
Recommended (no pre-install needed)
npx clawhub@latest --dir ~/.claude/skills install auto-animateOr via clawhub CLI (if already installed)
clawhub --dir ~/.claude/skills install auto-animateβ οΈ Requires Node.js 18+. No Node? Use Option 2 below to download the ZIP instead. Install Node.js β
Option 2: Manual install (no Node required)
Download the ZIP, extract it, and place the folder at the path below. Restart your agent to activate.
Install path
~/.claude/skills/auto-animate/π‘Extract and place the folder at the path above, then restart your agent.