auto-animate

SKILL.md

Package: @formkit/auto-animate@0.9.0 (Sept 2025) Frameworks: React, Vue, Solid, Svelte, Preact Last Updated: 2025-11-22

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

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)

@formkit/auto-animate を使用した React、Vue、Solid、Svelte、Preact のゼロ構成アニメーション (3.28kb)。 文書化された 10 以上のエラーを防止します: SSR/Next.js インポート、条件付き親、キーの欠落、フレックスボックスの幅、 テーブル表示、Jest/esbuild 設定、CSS 位置の競合、Vue/Nuxt 登録、Angular ESM。 次の場合に使用します: リスト/アコーディオン/トースト/フォームのアニメーション化、SSR アニメーション エラーのトラブルシューティング、必要な場合 アクセシブルなアニメーション (自動優先モーション削減)、またはモーション オーバーヘッドのないドロップイン トランジションが必要な場合。 ソース: ovachiever/droid-tings。

原文を見る