auto-animate

Name: auto-animate
Author: jackspace

15stars7forks

How to install auto-animate?

jackspace/claudeskillz/auto-animate

$npx -y skills add jackspace/ClaudeSkillz --skill auto-animate

Installs into the current project.

Summary

Production-tested setup for AutoAnimate (@formkit/auto-animate) - a zero-config, drop-in animation library that automatically adds smooth transitions when DOM elements are added, removed, or moved. This skill should be used when building UIs that need simple, automatic animations

Files · 1

View on GitHub

SKILL.md

1	# AutoAnimate
2
3	Status: Production Ready ✅
4	Last Updated: 2025-11-07
5	Dependencies: None (works with any React setup)
6	Latest Versions: @formkit/auto-animate@0.9.0
7
8	---
9
10	## Quick Start (2 Minutes)
11
12	### 1. Install AutoAnimate
13
14	```bash
15	pnpm add @formkit/auto-animate
16	```
17
18	Why this matters:
19	- Only 3.28 KB gzipped (vs 22 KB for Motion)
20	- Zero dependencies
21	- Framework-agnostic (React, Vue, Svelte, vanilla JS)
22
23	### 2. Add to Your Component
24
25	```tsx
26	import { useAutoAnimate } from "@formkit/auto-animate/react";
27
28	export function MyList() {
29	const [parent] = useAutoAnimate(); // 1. Get ref
30
31	return (
32	<ul ref={parent}> {/* 2. Attach to parent */}
33	{items.map(item => (
34	<li key={item.id}>{item.text}</li> {/* 3. That's it! */}
35	))}
36	</ul>
37	);
38	}
39	```
40
41	CRITICAL:
42	- ✅ Always use unique, stable keys for list items
43	- ✅ Parent element must always be rendered (not conditional)
44	- ✅ AutoAnimate respects `prefers-reduced-motion` automatically
45	- ✅ Works on add, remove, AND reorder operations
46
47	### 3. Use in Production (SSR-Safe)
48
49	For Cloudflare Workers or Next.js:
50
51	```tsx
52	// Use client-only import to prevent SSR errors
53	import { useState, useEffect } from "react";
54
55	export function useAutoAnimateSafe<T extends HTMLElement>() {
56	const [parent, setParent] = useState<T \| null>(null);
57
58	useEffect(() => {
59	if (typeof window !== "undefined" && parent) {
60	import("@formkit/auto-animate").then(({ default: autoAnimate }) => {
61	autoAnimate(parent);
62	});
63	}
64	}, [parent]);
65
66	return [parent, setParent] as const;
67	}
68	```
69
70	---
71
72	## Known Issues Prevention
73
74	This skill prevents 10+ documented issues:
75
76	### Issue #1: SSR/Next.js Import Errors
77	Error: "Can't import the named export 'useEffect' from non EcmaScript module"
78	Source: https://github.com/formkit/auto-animate/issues/55
79	Why It Happens: AutoAnimate uses DOM APIs not available on server
80	Prevention: Use dynamic imports (see `templates/vite-ssr-safe.tsx`)
81
82	### Issue #2: Conditional Parent Rendering
83	Error: Animations don't work when parent is conditional
84	Source: https://github.com/formkit/auto-animate/issues/8
85	Why It Happens: Ref can't attach to non-existent element
86	Prevention:
87	```tsx
88	// ❌ Wrong
89	{showList && <ul ref={parent}>...</ul>}
90
91	// ✅ Correct
92	<ul ref={parent}>{showList && items.map(...)}</ul>
93	```
94
95	### Issue #3: Missing Unique Keys
96	Error: Items don't animate correctly or flash
97	Source: Official docs
98	Why It Happens: React can't track which items changed
99	Prevention: Always use unique, stable keys (`key={item.id}`)
100
101	### Issue #4: Flexbox Width Issues
102	Error: Elements snap to width instead of animating smoothly
103	Source: Official docs
104	Why It Happens: `flex-grow: 1` waits for surrounding content
105	Prevention: Use explicit width instead of flex-grow for animated elements
106
107	### Issue #5: Table Row Display Issues
108	Error: Table structure breaks when removing rows
109	Source: https://github.com/formkit/auto-animate/issues/7
110	Why It Happens: Display: table-row conflicts with animations
111	Prevention: Apply to `<tbody>` instead of individual rows, or use div-based layouts
112
113	### Issue #6: Jest Testing Errors
114	Error: "Cannot find module '@formkit/auto-animate/react'"
115	Source: https://github.com/formkit/auto-animate/issues/29
116	Why It Happens: Jest doesn't resolve ESM exports correctly
117	Prevention: Configure `moduleNameMapper` in jest.config.js
118
119	### Issue #7: esbuild Compatibility
120	Error: "Path '.' not exported by package"
121	Source: https://github.com/formkit/auto-animate/issues/36
122	Why It Happens: ESM/CommonJS condition mismatch
123	Prevention: Configure esbuild to handle ESM modules properly
124
125	### Issue #8: CSS Position Side Effects
126	Error: Layout breaks after adding AutoAnim

People who liked this also viewed

6 picks

Type

auto-animate

15stars7forks

View on GitHub

How to install auto-animate?

jackspace/claudeskillz/auto-animate

$npx -y skills add jackspace/ClaudeSkillz --skill auto-animate

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# AutoAnimate
2
3	Status: Production Ready ✅
4	Last Updated: 2025-11-07
5	Dependencies: None (works with any React setup)
6	Latest Versions: @formkit/auto-animate@0.9.0
7
8	---
9
10	## Quick Start (2 Minutes)
11
12	### 1. Install AutoAnimate
13
14	```bash
15	pnpm add @formkit/auto-animate
16	```
17
18	Why this matters:
19	- Only 3.28 KB gzipped (vs 22 KB for Motion)
20	- Zero dependencies
21	- Framework-agnostic (React, Vue, Svelte, vanilla JS)
22
23	### 2. Add to Your Component
24
25	```tsx
26	import { useAutoAnimate } from "@formkit/auto-animate/react";
27
28	export function MyList() {
29	const [parent] = useAutoAnimate(); // 1. Get ref
30
31	return (
32	<ul ref={parent}> {/* 2. Attach to parent */}
33	{items.map(item => (
34	<li key={item.id}>{item.text}</li> {/* 3. That's it! */}
35	))}
36	</ul>
37	);
38	}
39	```
40
41	CRITICAL:
42	- ✅ Always use unique, stable keys for list items
43	- ✅ Parent element must always be rendered (not conditional)
44	- ✅ AutoAnimate respects `prefers-reduced-motion` automatically
45	- ✅ Works on add, remove, AND reorder operations
46
47	### 3. Use in Production (SSR-Safe)
48
49	For Cloudflare Workers or Next.js:
50
51	```tsx
52	// Use client-only import to prevent SSR errors
53	import { useState, useEffect } from "react";
54
55	export function useAutoAnimateSafe<T extends HTMLElement>() {
56	const [parent, setParent] = useState<T \| null>(null);
57
58	useEffect(() => {
59	if (typeof window !== "undefined" && parent) {
60	import("@formkit/auto-animate").then(({ default: autoAnimate }) => {
61	autoAnimate(parent);
62	});
63	}
64	}, [parent]);
65
66	return [parent, setParent] as const;
67	}
68	```
69
70	---
71
72	## Known Issues Prevention
73
74	This skill prevents 10+ documented issues:
75
76	### Issue #1: SSR/Next.js Import Errors
77	Error: "Can't import the named export 'useEffect' from non EcmaScript module"
78	Source: https://github.com/formkit/auto-animate/issues/55
79	Why It Happens: AutoAnimate uses DOM APIs not available on server
80	Prevention: Use dynamic imports (see `templates/vite-ssr-safe.tsx`)
81
82	### Issue #2: Conditional Parent Rendering
83	Error: Animations don't work when parent is conditional
84	Source: https://github.com/formkit/auto-animate/issues/8
85	Why It Happens: Ref can't attach to non-existent element
86	Prevention:
87	```tsx
88	// ❌ Wrong
89	{showList && <ul ref={parent}>...</ul>}
90
91	// ✅ Correct
92	<ul ref={parent}>{showList && items.map(...)}</ul>
93	```
94
95	### Issue #3: Missing Unique Keys
96	Error: Items don't animate correctly or flash
97	Source: Official docs
98	Why It Happens: React can't track which items changed
99	Prevention: Always use unique, stable keys (`key={item.id}`)
100
101	### Issue #4: Flexbox Width Issues
102	Error: Elements snap to width instead of animating smoothly
103	Source: Official docs
104	Why It Happens: `flex-grow: 1` waits for surrounding content
105	Prevention: Use explicit width instead of flex-grow for animated elements
106
107	### Issue #5: Table Row Display Issues
108	Error: Table structure breaks when removing rows
109	Source: https://github.com/formkit/auto-animate/issues/7
110	Why It Happens: Display: table-row conflicts with animations
111	Prevention: Apply to `<tbody>` instead of individual rows, or use div-based layouts
112
113	### Issue #6: Jest Testing Errors
114	Error: "Cannot find module '@formkit/auto-animate/react'"
115	Source: https://github.com/formkit/auto-animate/issues/29
116	Why It Happens: Jest doesn't resolve ESM exports correctly
117	Prevention: Configure `moduleNameMapper` in jest.config.js
118
119	### Issue #7: esbuild Compatibility
120	Error: "Path '.' not exported by package"
121	Source: https://github.com/formkit/auto-animate/issues/36
122	Why It Happens: ESM/CommonJS condition mismatch
123	Prevention: Configure esbuild to handle ESM modules properly
124
125	### Issue #8: CSS Position Side Effects
126	Error: Layout breaks after adding AutoAnim

People who liked this also viewed

6 picks

Type