gsap-skills：让 AI Agent 帮你写规范的 GSAP 网页动效

如果你经常让 Cursor 或 Claude Code 帮你手搓前端动画，大概率见识过 AI 那些啼笑皆非的「古董代码」。它可能一边教你 import 早就弃用的旧语法，一边在 React 里疯狂漏写内存清理逻辑，最后页面掉帧掉成了幻灯片。

作为网页动效领域的标杆工具，GreenSock 显然也受够了被 AI 乱写代码砸招牌。他们官方推出了开源技能库 gsap-skills，专门用来教各类 AI 编码助手按官方的最佳实践干活。

让 AI 别再背十年前的老教程

大模型训练数据庞杂，写动效时经常混淆 GSAP 各版本的 API。gsap-skills 就是一套标准化的 Agent Skills 规范文件，把官方的核心用法打包喂给 AI。

这套技能拆得非常细致，涵盖了核心 API、时间轴编排、ScrollTrigger 滚动联动，以及各类实用工具函数。甚至连性能优化建议，比如优先使用 transform 别名与 autoAlpha、避免引起布局重排，都写成了规范指令。

针对前端框架的痛点，它还专门给出了 React、Vue 和 Svelte 的编写范式。以 React 为例，AI 会学会主动调用官方提供的 useGSAP 钩子，并加上作用域和清理函数，而不是像以前那样随便甩一个 useEffect 导致重复绑定。

库里还顺带提醒了 AI 一件大事：在 GSAP 被 Webflow 收购之后，以前收费的 Club GSAP 插件比如 SplitText 和 MorphSVG 已经全部免费开放，包括商业用途，直接从公开 npm 安装即可，不需要再折腾私有仓库。

40 多款 Agent 敲一行命令就能装

这套技能并没有局限在某一家编辑器里。它兼容了目前主流的 Agent Skills 体系，支持超过 40 款开发助手，包括 Cursor、Claude Code、OpenAI Codex、Windsurf、GitHub Copilot 以及 Google Antigravity 等。

安装也很简单，终端里敲一行 npx skills add 命令就能自动识别并挂载到当前环境。如果是 Claude Code 用户，直接在插件市场里输入添加命令；在 Cursor 里也可以直接配置远程规则，或者把仓库里的 skills 文件夹直接拷贝到本地目录。

一旦配置好，只要你在提问里提到动效需求，AI 就会按规范生成结构清晰的代码，从插件注册、时间轴序列到清理机制一气呵成。

为什么重要

对于前端开发者来说，这件事最有价值的地方在于省心。动效开发本来就有很多细枝末节的踩坑点，以前让 AI 写动画往往要反复纠错、修补内存泄漏，现在有官方规则兜底，AI 生成的代码基本拿来就能直接跑。

从行业角度看，GreenSock 这一步走得很聪明，也给其他开源库和商业 SDK 打了个样。以往开发者抱怨 AI 乱写代码，厂商只能发博客呼吁；现在直接把官方最佳实践做成 Agent Skills，相当于把文档直接注入到开发者的代码生成环节。

我们认为，未来的框架竞争很可能不仅比拼 API 好不好用，还要比拼谁的 Agent 技能库更完善。当 AI 越来越成为程序员写代码的入口，能让 AI 少犯错的库，自然会最先被开发者留下来。