工具集

用 GSAP 做代码驱动的网页动效：时间线编排、ScrollTrigger 滚动触发、固定与横向滚动、SplitText 文字拆分动画、Flip 布局过渡，以及与 Lenis、Locomotive 平滑滚动同步时常见的抖动与固定错位问题。

把 After Effects 导出的 Lottie 动画接入网页、iOS、Android 与 React Native：优先用 dotLottie 运行时，控制播放、片段与速度，做滚动或悬停驱动的交互，运行时换色，并附 AE 导出检查清单。

给界面加功能性的微动效：悬停与按下反馈、开关、点赞按钮、提示条、抽屉、弹窗、列表增删与排序、共享元素过渡，规定 100–250ms 的时长、进入慢退出快的节奏与缓动曲线，只动 transform 与 opacity，并尊重减少动态效果设置。基于 Framer Motion（motion/react）与现代 CSS。

在 Next.js App Router 里实现页面切换动画，并解决 Framer Motion 的 AnimatePresence 退出动画在路由跳转时不触发的问题：用 template.tsx、按路径设置 key 的 AnimatePresence 加 FrozenRouter，或改用 View Transitions API（原生或 next-view-transitions）。

给 SVG 做动画：描边逐步绘制、路径变形（GSAP MorphSVG 或 Flubber）、沿路径运动、图标状态切换，以及渐变与滤镜动画，按任务在 CSS、SMIL 与 GSAP 之间选择实现方式。

Twelve Data 官方 MCP，让 agent 查询股票、ETF、外汇、加密资产的实时与历史价格、60 多种技术指标，以及财报、分红、基金持仓、公司新闻和 SEC 文件。连上官方托管服务后在浏览器用 Twelve Data 账号登录授权即可，无需复制 API Key。

SimpleLocalize 官方命令行：上传、下载多语言翻译文件，一键发起机器翻译与 AI 自动翻译，把译文发布到 CDN 托管，还能从源码中抽取待翻译的文案键，适合放进 CI 自动跑本地化流程。需要 SimpleLocalize 账号与项目 API Key，平台为付费服务，可免费试用 14 天。

Prisma 官方技能合集：Prisma ORM 命令行、Client 查询 API、各类数据库连接配置、v6 升级 v7 的迁移指南，以及 Prisma Postgres 与 Compute 部署流程。

Zendesk 官方命令行：在本地预览、导入并发布帮助中心（Help Center）主题，也能创建、打包、部署 Zendesk 应用（如工单侧边栏应用），适合维护帮助中心页面的客服管理员。需要 Zendesk 账号、Node.js 20.17 以上与 yarn，改主题需懂一些 HTML/CSS，先用 zcli login 在浏览器里登录。

AWS 官方医疗与生命科学技能合集：42 个技能覆盖医学编码与术语映射、FHIR / HL7 病历解析、医保理赔与事前授权规则、医学影像、药物流行病学与基因组分析，以美国规范为准；分析类技能需本地装相应软件。仅供参考，不可用于临床决策，结果需专业人员复核。

Locize 官方命令行：在本地多语言文件与 Locize 翻译平台之间同步，增删查翻译条目、下载已发布译文、管理版本与分支，可导出 JSON、XLIFF、PO、CSV、Excel 等格式交给译员处理。需要 Locize 账号、项目 ID 与 API Key，有免费套餐。

只读审查 Figma 页面或组件与设计系统脱节的地方：用普通框架手搭的共享组件、本应合并的重复结构、未绑定变量的硬编码颜色与间距、变体走样等，每条发现都要有 Figma 结构上的证据，可附建议替换的组件，输出 Markdown 或 JSON。需要 Figma MCP。

Pinecone 官方插件：内置 Pinecone MCP 服务器与一组 /pinecone 技能命令，在 Claude Code 里创建向量索引、写入数据、用自然语言检索，或搭建带引用的文档问答助手。需要 Pinecone API Key（可免费注册），Assistant 功能还需安装 uv。

指导 agent 构建能在任意两个图标之间变形过渡的 SVG 图标组件：每个图标固定由三条线段组成，用不到的线段收缩到中心点，同组的旋转变体用弹簧动画转动，并遵守统一 viewBox、圆角线头、减弱动效偏好与 aria-hidden 等规则。示例基于 React 与 Motion。

审查 CSS 与 JavaScript 中伪元素和 View Transitions API 的用法：::before／::after 的 content、定位与层级，用伪元素代替多余的 DOM 节点、扩大点击区域，view-transition-name 的命名与清理，以及 ::backdrop 等原生样式，按「文件:行号」列出问题。

按改编到网页的迪士尼动画 12 原则审查动效代码，分时长、缓动、物理、编排四类规则检查，例如用户触发的动画须在 300ms 内完成、入场用 ease-out、按压要有缩放反馈，以 file:line 格式输出问题。

审查 Web Audio API 的程序化音效代码：复用单个 AudioContext 并在挂起时恢复、播放后断开节点、用指数衰减包络、点击类音效用滤波噪声而非振荡器等，按规则以 file:line 格式输出问题，适合检查界面音效。

按规则审查 Motion（Framer Motion）代码里的 AnimatePresence 用法：条件渲染的退场是否有包裹、exit 与 key 是否齐全、useIsPresent 与 usePresence 钩子的用法、mode 的选择和嵌套退场的协调，按「文件:行号」列出问题。适用于 React 项目。

审查界面代码里的声音反馈：每个音效都要有对应的视觉反馈，可在设置中关闭并调节音量，尊重减弱动效偏好；只在确认、错误等重要时刻发声，不给打字等高频操作和装饰性交互加音效；还检查音频预加载、默认音量和音效轻重是否与操作相称。按「文件:行号」列出问题。

审查动画代码的时间函数选择：手势拖拽和可被打断的动画用弹簧，系统状态变化用缓动曲线，进度类用线性，打字等高频交互不加动画；同时检查弹簧参数与时长是否合理，按「文件:行号」列出问题。示例基于 Motion。

CoinGecko 官方 MCP，让 agent 查询上万种加密资产的价格、市值、交易所与历史行情，以及链上 DEX 数据。可直接连接官方免 Key 的公共托管服务（共享调用额度），需要更高额度和完整工具时改用 Pro API Key；数据仅供研究参考，不构成投资建议。

帮 agent 为应用接入 Auth0 身份认证：自动识别 35+ 种框架，覆盖登录、MFA、SSO、RBAC、JWT 校验、从其他认证服务迁移与租户安全审计。Auth0 官方维护，需 Auth0 账号（可免费注册）。

阿里云官方 MCP 服务器，通过 DataWorks Open API 让 agent 管理数据开发节点与工作流、运维调度实例、查询数据地图元数据与血缘、配置数据质量规则。需要阿里云 AccessKey。

微信小程序官方的 Skyline 渲染引擎技能：帮助评估迁移成本，并覆盖 JSON 配置、组件开发、WXSS 兼容性、Worklet 动画、自定义路由转场与滚动控制 API。