auto-animate
✓经过生产测试的 AutoAnimate 设置 (@formkit/auto-animate) - 零配置、嵌入式动画库 当添加、删除或移动 DOM 元素时，它会自动添加平滑过渡。这个技能应该 在构建需要简单、自动动画的列表、手风琴、toast 或表单验证的 UI 时使用 消息没有完整动画库的复杂性。 使用场合：向动态列表添加平滑的动画、构建过滤/排序界面、创建手风琴组件、 实现 toast 通知、动画表单验证消息、需要简单的过渡而无需动画代码， 使用 Vite + React + Tailwind，部署到 Cloudflare Workers 静态资产，或遇到 SSR 错误 动画库。 关键词：自动动画、@formkit/auto-animate、formkit、零配置动画、自动动画、插入动画、 列表动画、手风琴动画、吐司动画、表单验证动画、轻量级动画、2kb 动画、 喜欢减少运动、可访问的动画、vite 反应动画、cloudflare 工人动画、ssr 安全动画
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 元素时，它会自动添加平滑过渡。这个技能应该 在构建需要简单、自动动画的列表、手风琴、toast 或表单验证的 UI 时使用 消息没有完整动画库的复杂性。 使用场合：向动态列表添加平滑的动画、构建过滤/排序界面、创建手风琴组件、 实现 toast 通知、动画表单验证消息、需要简单的过渡而无需动画代码， 使用 Vite + React + Tailwind，部署到 Cloudflare Workers 静态资产，或遇到 SSR 错误 动画库。 关键词：自动动画、@formkit/auto-animate、formkit、零配置动画、自动动画、插入动画、 列表动画、手风琴动画、吐司动画、表单验证动画、轻量级动画、2kb 动画、 喜欢减少运动、可访问的动画、vite 反应动画、cloudflare 工人动画、ssr 安全动画 来源：jackspace/claudeskillz。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate- 分类
- </>开发工具
- 认证
- ✓
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 auto-animate？
经过生产测试的 AutoAnimate 设置 (@formkit/auto-animate) - 零配置、嵌入式动画库 当添加、删除或移动 DOM 元素时，它会自动添加平滑过渡。这个技能应该 在构建需要简单、自动动画的列表、手风琴、toast 或表单验证的 UI 时使用 消息没有完整动画库的复杂性。 使用场合：向动态列表添加平滑的动画、构建过滤/排序界面、创建手风琴组件、 实现 toast 通知、动画表单验证消息、需要简单的过渡而无需动画代码， 使用 Vite + React + Tailwind，部署到 Cloudflare Workers 静态资产，或遇到 SSR 错误 动画库。 关键词：自动动画、@formkit/auto-animate、formkit、零配置动画、自动动画、插入动画、 列表动画、手风琴动画、吐司动画、表单验证动画、轻量级动画、2kb 动画、 喜欢减少运动、可访问的动画、vite 反应动画、cloudflare 工人动画、ssr 安全动画 来源：jackspace/claudeskillz。
如何安装 auto-animate？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/jackspace/claudeskillz
详情
- 分类
- </>开发工具
- 来源
- skills.sh
- 收录时间
- 2026-02-01