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 가져오기, 조건부 부모, 누락된 키, Flexbox 너비, 테이블 표시, Jest/esbuild 구성, CSS 위치 충돌, Vue/Nuxt 등록, Angular ESM. 사용 시기: 목록/아코디언/토스트/양식 애니메이션, SSR 애니메이션 오류 문제 해결, 필요 액세스 가능한 애니메이션(자동 선호-모션 감소) 또는 모션 오버헤드 없이 드롭인 전환을 원합니다. 출처: ovachiever/droid-tings.

원본 보기