What is auto-animate?

A guide for adding AutoAnimate to React, Vue, Solid, Svelte, and Preact applications. It explains how to load the browser-only animation code safely in server-rendered applications.

Use it when implementing or debugging list, accordion, toast, or other automatic interface transitions with @formkit/auto-animate.

It helps prevent documented failures involving server-side rendering, Next.js, React 19 Strict Mode, conditional elements, viewports, dragging, and CSS transforms.

auto-animate — Skill for Claude Code by leecyno1/boutique-skills

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add leecyno1/boutique-skills --skill auto-animate

Clone the repo

git clone --depth 1 https://github.com/leecyno1/boutique-skills

Made for: Claude Code.

Or install auto-animate, the plugin that ships this one along with the rest of its 1 skill.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/leecyno1/boutique-skills/auto-animate/github.svg)](https://agentmods.dev/skills/leecyno1/boutique-skills/auto-animate)

Your own site

<a href="https://agentmods.dev/skills/leecyno1/boutique-skills/auto-animate"><img src="https://agentmods.dev/badge/skills/leecyno1/boutique-skills/auto-animate/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/leecyno1/boutique-skills/auto-animate"><img src="https://agentmods.dev/badge/skills/leecyno1/boutique-skills/auto-animate.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 103 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,973 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00103	$0.02973
Opus 5.5	$0.00041	$0.01189
Sonnet 5.5	$0.00021	$0.00595
Haiku 4.5	$0.00010	$0.00297

Measured 2mo ago against content hash cf60f7daa5df, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

auto-animate scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

The scan reads SKILL.md. This mod also ships 2 executable files (scripts/example-script.sh, scripts/init-auto-animate.sh), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/default/auto-animate/SKILL.md · 355 lines

How it starts

The opening of the file, as written. The whole thing — 355 lines — stays where its author put it; the contents beside it link to each section on GitHub.

AutoAnimate - Error Prevention Guide

Package: @formkit/[email protected] (current) Frameworks: React, Vue, Solid, Svelte, Preact Last Updated: 2026-01-21

SSR-Safe Pattern (Critical for Cloudflare Workers/Next.js)

// Use client-only import to prevent SSR errors
import { useState, useEffect } from "react";

export function useAutoAnimateSafe<T extends HTMLElement>() {
  const [parent, setParent] = useState<T | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined" && parent) {
      import("@formkit/auto-animate").then(({ default: autoAnimate }) => {
        autoAnimate(parent);
      });
    }
  }, [parent]);

  return [parent, setParent] as const;
}

Why this matters: Prevents Issue #1 (SSR/Next.js import errors). AutoAnimate uses DOM APIs not available on server.

Known Issues Prevention (15 Documented Errors)

This skill prevents 15 documented issues:

Issue #1: SSR/Next.js Import Errors

Error: "Can't import the named export 'useEffect' from non EcmaScript module" Source: https://github.com/formkit/auto-animate/issues/55 Why It Happens: AutoAnimate uses DOM APIs not available on server Prevention: Use dynamic imports (see templates/vite-ssr-safe.tsx)

Issue #2: Conditional Parent Rendering

Error: Animations don't work when parent is conditional Source: https://github.com/formkit/auto-animate/issues/8 Why It Happens: Ref can't attach to non-existent element Prevention:

React Pattern:

// ❌ Wrong
{showList && <ul ref={parent}>...</ul>}

// ✅ Correct
<ul ref={parent}>{showList && items.map(...)}</ul>

Vue.js Pattern:

<!-- ❌ Wrong - parent conditional -->
<ul v-if="showList" ref="parent">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

<!-- ✅ Correct - children conditional -->
<ul ref="parent">
  <li v-if="showList" v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

Source: React Issue #8, Vue Issue #193

Read the full file on GitHub · 355 lines

Files

What ships with it

17 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 355 lines · 103 tokens per session scan A cf60f7daa5df

Subscribe to this mod's changes

auto-animate is a skill published in the GitHub repository leecyno1/boutique-skills (6 stars, last pushed 4d ago), licensed MIT. It adds 103 tokens to every session and 2,973 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

CSS and styling Debugging Frontend

auto-animate next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
auto-animateleecyno1/boutique-skills	Skill	6	4d ago	MIT	A	103	Claude Code
inspecting-hermes-desktop-domNousResearch/hermes-agent	Skill	262k	today	MIT	A	20	Claude Code, Codex
a11y-debuggingasgeirtj/system_prompts_leaks	Skill	71k	yesterday	CC0-1.0	A	50	Claude Code, Codex
animation-performancesickn33/agentic-awesome-skills	Skill	50k	today	MIT	A	23	Claude Code
fixing-motion-performanceibelick/ui-skills	Skill	11k	4d ago	MIT	A	45	Claude Code, Codex
optimize-web-animationsMengTo/Skills	Skill	7.4k	3d ago	MIT	A	126	Codex
performance-auditme2resh/apexyard	Skill	544	yesterday	MIT	A	33	Claude Code