auto-animate

SKILL.md

Status: Production Ready ✅ Last Updated: 2025-11-07 Dependencies: None (works with any React setup) Latest Versions: @formkit/auto-animate@0.9.0

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:

AutoAnimate 用の実稼働テスト済みセットアップ (@formkit/auto-animate) - 構成不要のドロップイン アニメーション ライブラリ これにより、DOM 要素が追加、削除、または移動されるときにスムーズなトランジションが自動的に追加されます。このスキルは、 リスト、アコーディオン、トースト、またはフォーム検証用の単純な自動アニメーションを必要とする UI を構築するときに使用します。 完全なアニメーション ライブラリの複雑さを排除したメッセージ。 使用場面: 動的リストへのスムーズなアニメーションの追加、フィルター/並べ替えインターフェイスの構築、アコーディオン コンポーネントの作成、 トースト通知の実装、フォーム検証メッセージのアニメーション化、アニメーション コードを使用しない単純な遷移の必要性、 Vite + React + Tailwind での作業、Cloudflare Workers Static Assets へのデプロイ、または SSR エラーの発生 アニメーションライブラリ。 キーワード: 自動アニメーション、@formkit/auto-animate、フォームキット、ゼロ構成アニメーション、自動アニメーション、ドロップイン アニメーション、 リストアニメーション、アコーディオンアニメーション、トーストアニメーション、フォーム検証アニメーション、軽量アニメーション、2kbアニメーション、 優先モーション、アクセシブルなアニメーション、vite 反応アニメーション、cloudflare ワーカー アニメーション、SSR セーフ アニメーション ソース: jackspace/claudeskillz。

原文を見る