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	$0.00051	$0.01486
Sonnet 5	$0.00021	$0.00595
Haiku 4.5	$0.00010	$0.00297

Measured 13d ago against content hash cf60f7daa5df, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-16, 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 13d 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.

13d 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 (5 stars, last pushed 4d ago), licensed MIT. It adds 103 tokens to every session and 2,973 once invoked, about $0.0005 per session on Opus 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

inspecting-hermes-desktop-dom

Read the live Hermes desktop DOM/CSS over CDP.

NousResearch/hermes-agent · 20 tokens

fixing-motion-performance

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

ibelick/ui-skills · 45 tokens

optimize-web-animations

Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations…

MengTo/Skills · 126 tokens

weapp-tailwindcss-troubleshoot

A troubleshooting guide for weapp-tailwindcss and its CLI when generated styles, class conversion, builds, or hot reload do not work as expected.

sonofmagic/weapp-tailwindcss · 130 tokens

Dark Mode Bug Finder

Detect dark mode rendering issues including contrast failures, missing theme tokens, image inversions, and transition glitches across components.

PramodDutta/qaskills · 28 tokens

web-animation-perf

Prevent layout/transition/reflow thrash in JS-driven CSS animations. Use when building or debugging continuous motion (rotation, orbit, parallax, scroll-linked effects, marquee, carousels) and when symptoms appear like jank, stutter, lag, animation drift, ghosting, "elements collapsing toward center", "going slow"…

swyxio/skills · 94 tokens