纯指令式 skill：让 agent 先调研再提问、先规划再动手、先验证再说「做完了」。
- workflow
- verification
- quality
- skill
reanimate
一个把任意动画逐帧逆向拆解的 Claude Code skill——输入可以是线上站点、屏幕录制、mp4、gif 或 Lottie 文件——拆完还会用同样的方式录下复刻品，用数据证明它动得一样。
reanimate 是一个复刻你喜欢的动画的 Claude Code skill，输入可以是线上站点、屏幕录制、mp4、gif 或 Lottie 文件。它不是一次性生成然后敷衍了事，而是先用无头浏览器录下参考动画（视频、逐帧图片、所有 CSS 与 Web Animations API 动画、每一帧的元素位置），写出每个元素每条属性的规格表（起始、时长、从哪到哪、缓动、错峰），再用项目里已有的东西重建动画——CSS、Framer Motion、GSAP 或 three.js——然后以同样的方式录下复刻品，对比时序、缓动与像素，修掉最大差异后重来，通常 2 到 5 轮；5 轮后仍不一致的部分会连同原因写进报告。匹配标准分三档、且明确写死：默认档只要求动得一样（触发、顺序、错峰、时序误差 80 ms 内、缓动族、距离），pixel-perfect 档再加上字体、尺寸、颜色、间距与素材，平均像素误差上限 2%，clone-and-add 档则把你的新增与复刻部分分开。对 canvas 和 WebGL，--gl 会追踪 GPU 调用——shader、uniform、draw call，以及 three.js、Pixi、PlayCanvas、Babylon、OGL 的场景图——--clock virtual 则让页面跑在一台逐帧步进的虚拟时钟上、Math.random 设定种子，因此不管 GPU 多慢，两次采集结果逐字节一致；在真实的 stripe.com 上，它恢复出了 Stripe Issuing 卡片的四层合成、shader 及 u_twistFrequencyX = 0.059 这类常量，以及倾斜曲线（指针路径上 33 到 1800 ms 之间从 −0.174 → 0.262 rad）。仓库记录了十四个由跑这个 skill 的 agent 复刻的案例，从 Vercel Toolbar（417/417 帧完全一致）到 resend.com 首屏魔方（25 秒内每一帧旋转都精确），多数耗时 30 到 90 分钟。MIT 许可；仓库声明与它所研究的站点无隶属或背书关系。
它做什么
- 测量而非猜测——先录参考、再建复刻、以同样方式录制后对比时序、缓动与像素；通常 2 到 5 轮，仍未对齐的部分连同原因写进报告
- 三档匹配标准明确写死——默认档动得一样即可（时序 80 ms 内、缓动族、距离），pixel-perfect 档平均像素误差上限 2%，clone-and-add 档把你的改动与复刻部分分开
- 看得进 canvas 与 WebGL 内部——--gl 追踪 shader、uniform、draw call 与 three.js、Pixi、PlayCanvas、Babylon、OGL 场景图；在真实 stripe.com 上恢复出了 Stripe Issuing 卡片的 shader 常量
- 虚拟时钟带来逐字节一致的采集——--clock virtual 逐帧步进页面并给随机数设种子，无论 GPU 快慢，结果都精确可复现
- 写进你自己的技术栈——重建的动画用项目已有的东西（CSS、Framer Motion、GSAP、three.js），而不是甩给你一个独立文件
什么时候用
你在 stripe.com、vercel.com 或 resend.com 上看到的心动首屏动画、卡片悬停或加载器，可以变成你自己代码库里的起点：把 URL 交给 skill，页面在登录墙后面时就给它一段带时间戳的录屏或 gif。仓库记录的十四个案例——Vercel Toolbar 的 417/417 帧完全一致、stripe.com 的 Visa 卡片倾斜在 0.4 px 内落定——都出自跑这个 skill 的 agent，多数耗时 30 到 90 分钟。外观也要一致时用 pixel-perfect；默认档只对齐运动、样式留给你自己。
如何上手
npx skills add NiazMorshed2007/reanimate -g # 加 -a claude-code 可跳过 skills CLI 的 agent 询问 /reanimate the hero entrance on https://example.com, into components/Hero.tsx /reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov 需要 Bun 1.1 或更高版本，macOS 或 Linux（Windows 未测试）。首次运行会安装静态 ffmpeg 与 Playwright 的 Chromium，合计约 250 MB。无需 API key。
注意事项
skills CLI 只安装 skills/reanimate/——site/ 是案例展示网站，不会被装进来。登录墙后的页面、YouTube 与 Loom 无法直接录制，改成给它一段屏幕录制。物理弹簧是从过冲与回落时间拟合出来的，不是从源码读出的。默认 GPU 后端是 SwiftShader（较慢但在每台机器上结果一致）；--gpu hardware 在 macOS 上走 Metal、Linux 上走未经测试的 Vulkan。文档案例复刻了 vercel.com、nextjs.org、turborepo.com、stripe.com、workos.com、clerk.com、liveblocks.io、resend.com 与 pro.reactbits.dev 的部分内容，属于技法研究——仓库声明与其无隶属或背书关系，你复制的字体、图片与代码仍归其所有者。2026-10-29 创建，非常新（撰稿时 422 星），工作流预计还会持续变动。
收录日期
地图上的相关资源
归藏的 Agent Skill：把代码库的最近更新做成一支成片宣传片——接真实组件、代码渲染动画、代码写配乐，全程不碰视频剪辑软件。
- agent-skill
- video
- promo
- marketing
一个给「图里没有任何文字线索」的照片做地理定位的 Agent Skill——用 OSM 几何、高程天际线与卫星瓦片，把「这是哪」变成带误差半径的测量答案。
- agent-skill
- geolocation
- osint
- openstreetmap