{
  "schemaVersion": "1.0",
  "item": {
    "slug": "auto-animate",
    "name": "Auto Animate",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/Veeramanikandanr48/auto-animate",
    "canonicalUrl": "https://clawhub.ai/Veeramanikandanr48/auto-animate",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/auto-animate",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=auto-animate",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      ".claude-plugin/plugin.json",
      "README.md",
      "SKILL.md",
      "assets/example-template.txt",
      "references/auto-animate-vs-motion.md",
      "references/css-conflicts.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/auto-animate"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/auto-animate",
    "agentPageUrl": "https://openagent3.xyz/skills/auto-animate/agent",
    "manifestUrl": "https://openagent3.xyz/skills/auto-animate/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/auto-animate/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "AutoAnimate - Error Prevention Guide",
        "body": "Package: @formkit/auto-animate@0.9.0 (current)\nFrameworks: React, Vue, Solid, Svelte, Preact\nLast Updated: 2026-01-21"
      },
      {
        "title": "SSR-Safe Pattern (Critical for Cloudflare Workers/Next.js)",
        "body": "// Use client-only import to prevent SSR errors\nimport { useState, useEffect } from \"react\";\n\nexport function useAutoAnimateSafe<T extends HTMLElement>() {\n  const [parent, setParent] = useState<T | null>(null);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\" && parent) {\n      import(\"@formkit/auto-animate\").then(({ default: autoAnimate }) => {\n        autoAnimate(parent);\n      });\n    }\n  }, [parent]);\n\n  return [parent, setParent] as const;\n}\n\nWhy this matters: Prevents Issue #1 (SSR/Next.js import errors). AutoAnimate uses DOM APIs not available on server."
      },
      {
        "title": "Known Issues Prevention (15 Documented Errors)",
        "body": "This skill prevents 15 documented issues:"
      },
      {
        "title": "Issue #1: SSR/Next.js Import Errors",
        "body": "Error: \"Can't import the named export 'useEffect' from non EcmaScript module\"\nSource: https://github.com/formkit/auto-animate/issues/55\nWhy It Happens: AutoAnimate uses DOM APIs not available on server\nPrevention: Use dynamic imports (see templates/vite-ssr-safe.tsx)"
      },
      {
        "title": "Issue #2: Conditional Parent Rendering",
        "body": "Error: Animations don't work when parent is conditional\nSource: https://github.com/formkit/auto-animate/issues/8\nWhy It Happens: Ref can't attach to non-existent element\nPrevention:\n\nReact Pattern:\n\n// ❌ Wrong\n{showList && <ul ref={parent}>...</ul>}\n\n// ✅ Correct\n<ul ref={parent}>{showList && items.map(...)}</ul>\n\nVue.js Pattern:\n\n<!-- ❌ Wrong - parent conditional -->\n<ul v-if=\"showList\" ref=\"parent\">\n  <li v-for=\"item in items\" :key=\"item.id\">{{ item.text }}</li>\n</ul>\n\n<!-- ✅ Correct - children conditional -->\n<ul ref=\"parent\">\n  <li v-if=\"showList\" v-for=\"item in items\" :key=\"item.id\">\n    {{ item.text }}\n  </li>\n</ul>\n\nSource: React Issue #8, Vue Issue #193"
      },
      {
        "title": "Issue #3: Missing Unique Keys",
        "body": "Error: Items don't animate correctly or flash\nSource: Official docs\nWhy It Happens: React can't track which items changed\nPrevention: Always use unique, stable keys (key={item.id})"
      },
      {
        "title": "Issue #4: Flexbox Width and Shaking Issues",
        "body": "Error: Elements snap to width instead of animating smoothly, or container shakes on remove\nSource: Official docs, Issue #212\nWhy It Happens: flex-grow: 1 waits for surrounding content, causing timing issues\nPrevention: Use explicit width instead of flex-grow for animated elements\n\n// ❌ Wrong - causes shaking\n<ul ref={parent} style={{ display: 'flex' }}>\n  {items.map(item => (\n    <li key={item.id} style={{ flex: '1 1 auto' }}>{item.text}</li>\n  ))}\n</ul>\n\n// ✅ Correct - fixed sizes\n<ul ref={parent} style={{ display: 'flex', gap: '1rem' }}>\n  {items.map(item => (\n    <li\n      key={item.id}\n      style={{ minWidth: '200px', maxWidth: '200px' }}\n    >\n      {item.text}\n    </li>\n  ))}\n</ul>\n\nMaintainer Note: justin-schroeder confirmed fixed sizes are required for flex containers"
      },
      {
        "title": "Issue #5: Table Row Display Issues",
        "body": "Error: Table structure breaks when removing rows\nSource: https://github.com/formkit/auto-animate/issues/7\nWhy It Happens: Display: table-row conflicts with animations\nPrevention: Apply to <tbody> instead of individual rows, or use div-based layouts"
      },
      {
        "title": "Issue #6: Jest Testing Errors",
        "body": "Error: \"Cannot find module '@formkit/auto-animate/react'\"\nSource: https://github.com/formkit/auto-animate/issues/29\nWhy It Happens: Jest doesn't resolve ESM exports correctly\nPrevention: Configure moduleNameMapper in jest.config.js"
      },
      {
        "title": "Issue #7: esbuild Compatibility",
        "body": "Error: \"Path '.' not exported by package\"\nSource: https://github.com/formkit/auto-animate/issues/36\nWhy It Happens: ESM/CommonJS condition mismatch\nPrevention: Configure esbuild to handle ESM modules properly"
      },
      {
        "title": "Issue #8: CSS Position Side Effects",
        "body": "Error: Layout breaks after adding AutoAnimate\nSource: Official docs\nWhy It Happens: Parent automatically gets position: relative\nPrevention: Account for position change in CSS or set explicitly"
      },
      {
        "title": "Issue #9: Vue/Nuxt Registration Errors",
        "body": "Error: \"Failed to resolve directive: auto-animate\"\nSource: https://github.com/formkit/auto-animate/issues/43\nWhy It Happens: Plugin not registered correctly\nPrevention: Proper plugin setup in Vue/Nuxt config (see references/)\n\nNuxt 3 Note: Requires v0.8.2+ (April 2024). Earlier versions have ESM import issues fixed by Daniel Roe. See Issue #199"
      },
      {
        "title": "Issue #10: Angular ESM Issues",
        "body": "Error: Build fails with \"ESM-only package\"\nSource: https://github.com/formkit/auto-animate/issues/72\nWhy It Happens: CommonJS build environment\nPrevention: Configure ng-packagr for Angular Package Format"
      },
      {
        "title": "Issue #11: React 19 StrictMode Double-Call Bug",
        "body": "Error: Child animations don't work in React 19 StrictMode\nSource: https://github.com/formkit/auto-animate/issues/232\nWhy It Happens: StrictMode calls useEffect twice, triggering autoAnimate initialization twice\nPrevention: Use ref to track initialization\n\n// ❌ Wrong - breaks in StrictMode\nconst [parent] = useAutoAnimate();\n\n// ✅ Correct - prevents double initialization\nconst [parent] = useAutoAnimate();\nconst initialized = useRef(false);\n\nuseEffect(() => {\n  if (initialized.current) return;\n  initialized.current = true;\n}, []);\n\nNote: React 19 enables StrictMode by default in development. This affects all React 19+ projects."
      },
      {
        "title": "Issue #12: Broken Animation Outside Viewport",
        "body": "Error: Animations broken when list is outside viewport\nSource: https://github.com/formkit/auto-animate/issues/222\nWhy It Happens: Chrome may not run Animation API for off-screen elements\nPrevention: Ensure parent is visible before applying autoAnimate\n\nconst isInViewport = (element) => {\n  const rect = element.getBoundingClientRect();\n  return rect.top >= 0 && rect.bottom <= window.innerHeight;\n};\n\nuseEffect(() => {\n  if (parent.current && isInViewport(parent.current)) {\n    autoAnimate(parent.current);\n  }\n}, [parent]);"
      },
      {
        "title": "Issue #13: Deleted Elements Overlay Existing Content",
        "body": "Error: Removed items overlay other items during fade out\nSource: https://github.com/formkit/auto-animate/issues/231\nWhy It Happens: Exit animation maintains z-index, covering active content\nPrevention: Add explicit z-index handling\n\n// CSS workaround\n<style>{`\n  [data-auto-animate-target] {\n    z-index: -1 !important;\n  }\n`}</style>"
      },
      {
        "title": "Issue #14: Cannot Disable During Drag & Drop",
        "body": "Error: Calling enable(false) doesn't prevent animations during drag\nSource: https://github.com/formkit/auto-animate/issues/215\nWhy It Happens: Disable doesn't work reliably mid-drag\nPrevention: Conditionally remove ref during drag\n\nconst [isDragging, setIsDragging] = useState(false);\nconst [parent] = useAutoAnimate();\n\nreturn (\n  <ul ref={isDragging ? null : parent}>\n    {/* items */}\n  </ul>\n);"
      },
      {
        "title": "Issue #15: CSS Transform Parent Position Bug",
        "body": "Error: Items animate from wrong position after parent transform\nSource: https://github.com/formkit/auto-animate/issues/227\nWhy It Happens: Items remember original position before transform\nPrevention: Delay autoAnimate until transform completes\n\nuseEffect(() => {\n  if (showList && parent.current) {\n    setTimeout(() => {\n      autoAnimate(parent.current);\n    }, 300); // Match CSS transition duration\n  }\n}, [showList]);"
      },
      {
        "title": "Always Do",
        "body": "✅ Use unique, stable keys - key={item.id} not key={index}\n✅ Keep parent in DOM - Parent ref element always rendered\n✅ Client-only for SSR - Dynamic import for server environments\n✅ Respect accessibility - Keep disrespectUserMotionPreference: false\n✅ Test with motion disabled - Verify UI works without animations\n✅ Use explicit width - Avoid flex-grow on animated elements\n✅ Apply to tbody for tables - Not individual rows"
      },
      {
        "title": "Never Do",
        "body": "❌ Conditional parent - {show && <ul ref={parent}>}\n❌ Index as key - key={index} breaks animations\n❌ Ignore SSR - Will break in Cloudflare Workers/Next.js\n❌ Force animations - disrespectUserMotionPreference: true breaks accessibility\n❌ Animate tables directly - Use tbody or div-based layout\n❌ Skip unique keys - Required for proper animation\n❌ Complex animations - Use Motion instead\n\nNote: AutoAnimate respects prefers-reduced-motion automatically (never disable this)."
      },
      {
        "title": "Community Tips (Community-Sourced)",
        "body": "Note: These tips come from community discussions. Verify against your version."
      },
      {
        "title": "Tip: Prevent Test Freezing with Mocked Package",
        "body": "Source: Issue #230 | Confidence: MEDIUM\nApplies to: v0.8.2+\n\nTests may freeze for ~10 seconds when package is mocked. Add ResizeObserver mock:\n\n// jest.setup.js\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n  observe: jest.fn(),\n  unobserve: jest.fn(),\n  disconnect: jest.fn(),\n}));\n\n// __mocks__/@formkit/auto-animate.js\nconst autoAnimate = jest.fn(() => () => {});\nconst useAutoAnimate = jest.fn(() => [null, jest.fn(), jest.fn()]);\nmodule.exports = { default: autoAnimate, useAutoAnimate };"
      },
      {
        "title": "Tip: Memory Leak Prevention",
        "body": "Source: Issue #180 | Confidence: LOW\nApplies to: All versions\n\nFor long-lived SPAs, ensure proper cleanup:\n\nuseEffect(() => {\n  const cleanup = autoAnimate(parent.current);\n  return () => cleanup && cleanup();\n}, []);\n\n// useAutoAnimate hook handles cleanup automatically\nconst [parent] = useAutoAnimate(); // Preferred"
      },
      {
        "title": "Package Versions",
        "body": "Latest: @formkit/auto-animate@0.9.0 (Sept 5, 2025)\n\nRecent Releases:\n\nv0.9.0 (Sept 5, 2025) - Current stable\nv0.8.2 (April 10, 2024) - Fixed Nuxt 3 ESM imports, ResizeObserver guard\n\n{\n  \"dependencies\": {\n    \"@formkit/auto-animate\": \"^0.9.0\"\n  }\n}\n\nFramework Compatibility: React 18+, Vue 3+, Solid, Svelte, Preact\n\nImportant: For Nuxt 3 users, v0.8.2+ is required. Earlier versions have ESM import issues"
      },
      {
        "title": "Official Documentation",
        "body": "Official Site: https://auto-animate.formkit.com\nGitHub: https://github.com/formkit/auto-animate\nnpm: https://www.npmjs.com/package/@formkit/auto-animate\nReact Docs: https://auto-animate.formkit.com/react"
      },
      {
        "title": "Templates & References",
        "body": "See bundled resources:\n\ntemplates/ - Copy-paste examples (SSR-safe, accordion, toast, forms)\nreferences/ - CSS conflicts, SSR patterns, library comparisons"
      }
    ],
    "body": "AutoAnimate - Error Prevention Guide\n\nPackage: @formkit/auto-animate@0.9.0 (current) Frameworks: React, Vue, Solid, Svelte, Preact Last Updated: 2026-01-21\n\nSSR-Safe Pattern (Critical for Cloudflare Workers/Next.js)\n// Use client-only import to prevent SSR errors\nimport { useState, useEffect } from \"react\";\n\nexport function useAutoAnimateSafe<T extends HTMLElement>() {\n  const [parent, setParent] = useState<T | null>(null);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\" && parent) {\n      import(\"@formkit/auto-animate\").then(({ default: autoAnimate }) => {\n        autoAnimate(parent);\n      });\n    }\n  }, [parent]);\n\n  return [parent, setParent] as const;\n}\n\n\nWhy this matters: Prevents Issue #1 (SSR/Next.js import errors). AutoAnimate uses DOM APIs not available on server.\n\nKnown Issues Prevention (15 Documented Errors)\n\nThis skill prevents 15 documented issues:\n\nIssue #1: SSR/Next.js Import Errors\n\nError: \"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)\n\nIssue #2: Conditional Parent Rendering\n\nError: 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:\n\nReact Pattern:\n\n// ❌ Wrong\n{showList && <ul ref={parent}>...</ul>}\n\n// ✅ Correct\n<ul ref={parent}>{showList && items.map(...)}</ul>\n\n\nVue.js Pattern:\n\n<!-- ❌ Wrong - parent conditional -->\n<ul v-if=\"showList\" ref=\"parent\">\n  <li v-for=\"item in items\" :key=\"item.id\">{{ item.text }}</li>\n</ul>\n\n<!-- ✅ Correct - children conditional -->\n<ul ref=\"parent\">\n  <li v-if=\"showList\" v-for=\"item in items\" :key=\"item.id\">\n    {{ item.text }}\n  </li>\n</ul>\n\n\nSource: React Issue #8, Vue Issue #193\n\nIssue #3: Missing Unique Keys\n\nError: Items don't animate correctly or flash Source: Official docs Why It Happens: React can't track which items changed Prevention: Always use unique, stable keys (key={item.id})\n\nIssue #4: Flexbox Width and Shaking Issues\n\nError: Elements snap to width instead of animating smoothly, or container shakes on remove Source: Official docs, Issue #212 Why It Happens: flex-grow: 1 waits for surrounding content, causing timing issues Prevention: Use explicit width instead of flex-grow for animated elements\n\n// ❌ Wrong - causes shaking\n<ul ref={parent} style={{ display: 'flex' }}>\n  {items.map(item => (\n    <li key={item.id} style={{ flex: '1 1 auto' }}>{item.text}</li>\n  ))}\n</ul>\n\n// ✅ Correct - fixed sizes\n<ul ref={parent} style={{ display: 'flex', gap: '1rem' }}>\n  {items.map(item => (\n    <li\n      key={item.id}\n      style={{ minWidth: '200px', maxWidth: '200px' }}\n    >\n      {item.text}\n    </li>\n  ))}\n</ul>\n\n\nMaintainer Note: justin-schroeder confirmed fixed sizes are required for flex containers\n\nIssue #5: Table Row Display Issues\n\nError: Table structure breaks when removing rows Source: https://github.com/formkit/auto-animate/issues/7 Why It Happens: Display: table-row conflicts with animations Prevention: Apply to <tbody> instead of individual rows, or use div-based layouts\n\nIssue #6: Jest Testing Errors\n\nError: \"Cannot find module '@formkit/auto-animate/react'\" Source: https://github.com/formkit/auto-animate/issues/29 Why It Happens: Jest doesn't resolve ESM exports correctly Prevention: Configure moduleNameMapper in jest.config.js\n\nIssue #7: esbuild Compatibility\n\nError: \"Path '.' not exported by package\" Source: https://github.com/formkit/auto-animate/issues/36 Why It Happens: ESM/CommonJS condition mismatch Prevention: Configure esbuild to handle ESM modules properly\n\nIssue #8: CSS Position Side Effects\n\nError: Layout breaks after adding AutoAnimate Source: Official docs Why It Happens: Parent automatically gets position: relative Prevention: Account for position change in CSS or set explicitly\n\nIssue #9: Vue/Nuxt Registration Errors\n\nError: \"Failed to resolve directive: auto-animate\" Source: https://github.com/formkit/auto-animate/issues/43 Why It Happens: Plugin not registered correctly Prevention: Proper plugin setup in Vue/Nuxt config (see references/)\n\nNuxt 3 Note: Requires v0.8.2+ (April 2024). Earlier versions have ESM import issues fixed by Daniel Roe. See Issue #199\n\nIssue #10: Angular ESM Issues\n\nError: Build fails with \"ESM-only package\" Source: https://github.com/formkit/auto-animate/issues/72 Why It Happens: CommonJS build environment Prevention: Configure ng-packagr for Angular Package Format\n\nIssue #11: React 19 StrictMode Double-Call Bug\n\nError: Child animations don't work in React 19 StrictMode Source: https://github.com/formkit/auto-animate/issues/232 Why It Happens: StrictMode calls useEffect twice, triggering autoAnimate initialization twice Prevention: Use ref to track initialization\n\n// ❌ Wrong - breaks in StrictMode\nconst [parent] = useAutoAnimate();\n\n// ✅ Correct - prevents double initialization\nconst [parent] = useAutoAnimate();\nconst initialized = useRef(false);\n\nuseEffect(() => {\n  if (initialized.current) return;\n  initialized.current = true;\n}, []);\n\n\nNote: React 19 enables StrictMode by default in development. This affects all React 19+ projects.\n\nIssue #12: Broken Animation Outside Viewport\n\nError: Animations broken when list is outside viewport Source: https://github.com/formkit/auto-animate/issues/222 Why It Happens: Chrome may not run Animation API for off-screen elements Prevention: Ensure parent is visible before applying autoAnimate\n\nconst isInViewport = (element) => {\n  const rect = element.getBoundingClientRect();\n  return rect.top >= 0 && rect.bottom <= window.innerHeight;\n};\n\nuseEffect(() => {\n  if (parent.current && isInViewport(parent.current)) {\n    autoAnimate(parent.current);\n  }\n}, [parent]);\n\nIssue #13: Deleted Elements Overlay Existing Content\n\nError: Removed items overlay other items during fade out Source: https://github.com/formkit/auto-animate/issues/231 Why It Happens: Exit animation maintains z-index, covering active content Prevention: Add explicit z-index handling\n\n// CSS workaround\n<style>{`\n  [data-auto-animate-target] {\n    z-index: -1 !important;\n  }\n`}</style>\n\nIssue #14: Cannot Disable During Drag & Drop\n\nError: Calling enable(false) doesn't prevent animations during drag Source: https://github.com/formkit/auto-animate/issues/215 Why It Happens: Disable doesn't work reliably mid-drag Prevention: Conditionally remove ref during drag\n\nconst [isDragging, setIsDragging] = useState(false);\nconst [parent] = useAutoAnimate();\n\nreturn (\n  <ul ref={isDragging ? null : parent}>\n    {/* items */}\n  </ul>\n);\n\nIssue #15: CSS Transform Parent Position Bug\n\nError: Items animate from wrong position after parent transform Source: https://github.com/formkit/auto-animate/issues/227 Why It Happens: Items remember original position before transform Prevention: Delay autoAnimate until transform completes\n\nuseEffect(() => {\n  if (showList && parent.current) {\n    setTimeout(() => {\n      autoAnimate(parent.current);\n    }, 300); // Match CSS transition duration\n  }\n}, [showList]);\n\nCritical Rules (Error Prevention)\nAlways Do\n\n✅ Use unique, stable keys - key={item.id} not key={index} ✅ Keep parent in DOM - Parent ref element always rendered ✅ Client-only for SSR - Dynamic import for server environments ✅ Respect accessibility - Keep disrespectUserMotionPreference: false ✅ Test with motion disabled - Verify UI works without animations ✅ Use explicit width - Avoid flex-grow on animated elements ✅ Apply to tbody for tables - Not individual rows\n\nNever Do\n\n❌ Conditional parent - {show && <ul ref={parent}>} ❌ Index as key - key={index} breaks animations ❌ Ignore SSR - Will break in Cloudflare Workers/Next.js ❌ Force animations - disrespectUserMotionPreference: true breaks accessibility ❌ Animate tables directly - Use tbody or div-based layout ❌ Skip unique keys - Required for proper animation ❌ Complex animations - Use Motion instead\n\nNote: AutoAnimate respects prefers-reduced-motion automatically (never disable this).\n\nCommunity Tips (Community-Sourced)\n\nNote: These tips come from community discussions. Verify against your version.\n\nTip: Prevent Test Freezing with Mocked Package\n\nSource: Issue #230 | Confidence: MEDIUM Applies to: v0.8.2+\n\nTests may freeze for ~10 seconds when package is mocked. Add ResizeObserver mock:\n\n// jest.setup.js\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n  observe: jest.fn(),\n  unobserve: jest.fn(),\n  disconnect: jest.fn(),\n}));\n\n// __mocks__/@formkit/auto-animate.js\nconst autoAnimate = jest.fn(() => () => {});\nconst useAutoAnimate = jest.fn(() => [null, jest.fn(), jest.fn()]);\nmodule.exports = { default: autoAnimate, useAutoAnimate };\n\nTip: Memory Leak Prevention\n\nSource: Issue #180 | Confidence: LOW Applies to: All versions\n\nFor long-lived SPAs, ensure proper cleanup:\n\nuseEffect(() => {\n  const cleanup = autoAnimate(parent.current);\n  return () => cleanup && cleanup();\n}, []);\n\n// useAutoAnimate hook handles cleanup automatically\nconst [parent] = useAutoAnimate(); // Preferred\n\nPackage Versions\n\nLatest: @formkit/auto-animate@0.9.0 (Sept 5, 2025)\n\nRecent Releases:\n\nv0.9.0 (Sept 5, 2025) - Current stable\nv0.8.2 (April 10, 2024) - Fixed Nuxt 3 ESM imports, ResizeObserver guard\n{\n  \"dependencies\": {\n    \"@formkit/auto-animate\": \"^0.9.0\"\n  }\n}\n\n\nFramework Compatibility: React 18+, Vue 3+, Solid, Svelte, Preact\n\nImportant: For Nuxt 3 users, v0.8.2+ is required. Earlier versions have ESM import issues\n\nOfficial Documentation\nOfficial Site: https://auto-animate.formkit.com\nGitHub: https://github.com/formkit/auto-animate\nnpm: https://www.npmjs.com/package/@formkit/auto-animate\nReact Docs: https://auto-animate.formkit.com/react\nTemplates & References\n\nSee bundled resources:\n\ntemplates/ - Copy-paste examples (SSR-safe, accordion, toast, forms)\nreferences/ - CSS conflicts, SSR patterns, library comparisons"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/Veeramanikandanr48/auto-animate",
    "publisherUrl": "https://clawhub.ai/Veeramanikandanr48/auto-animate",
    "owner": "Veeramanikandanr48",
    "version": "0.1.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/auto-animate",
    "downloadUrl": "https://openagent3.xyz/downloads/auto-animate",
    "agentUrl": "https://openagent3.xyz/skills/auto-animate/agent",
    "manifestUrl": "https://openagent3.xyz/skills/auto-animate/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/auto-animate/agent.md"
  }
}