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 정적 자산에 배포하거나, SSR 오류가 발생하는 경우 애니메이션 라이브러리. 키워드: 자동 애니메이션, @formkit/auto-animate, formkit, 제로 구성 애니메이션, 자동 애니메이션, 드롭인 애니메이션, 목록 애니메이션, 아코디언 애니메이션, 토스트 애니메이션, 양식 유효성 검사 애니메이션, 경량 애니메이션, 2kb 애니메이션, 선호 감소 모션, 액세스 가능한 애니메이션, vite 반응 애니메이션, cloudflare 작업자 애니메이션, ssr 안전 애니메이션 출처: jackspace/claudeskillz.

원본 보기