一、它是什么：GSAP 官方给 AI 智能体做的「动画技能包」

gsap-skills（greensock/gsap-skills，MIT，15,425 星 / 914 fork）不是 GSAP 库本身，而是 GSAP（GreenSock）官方出的一套 Agent Skills 技能包——用一批结构化的 Markdown 文档，教会 AI 编程助手（Codex、Claude Code、Cursor 等）正确、地道地使用 GSAP：核心 API、时间轴（Timeline）、ScrollTrigger、各插件、React/Vue/Svelte 写法、性能要点。你丢给 AI 一句「做个带横向滚动和丝滑过渡的官网」，它能按 GSAP 的最佳实践产出，而不是瞎拼一个 PPT 味儿的动画。

二、一行命令装进你的 AI 智能体

这是口播里那句命令的准确写法（实查 README）：

npx skills add https://github.com/greensock/gsap-skills

这条 npx skills add 来自 Vercel 的 skills CLI，会自动探测你装了哪些智能体，支持 40+ 种：Cursor、Claude Code、Codex、Windsurf、Copilot、Google Antigravity、OpenCode 等。想指定某一个就加 --agent，例如 npx skills add https://github.com/greensock/gsap-skills --agent antigravity。其它装法：

  • Claude Code：/plugin marketplace add greensock/gsap-skills
  • Cursor：Settings → Rules → Add Rule → Remote Rule (Github) 填 greensock/gsap-skills
  • 手动：把 skills/ 目录拷进对应智能体的技能目录（Claude ~/.claude/skills/、Codex ~/.codex/skills/、OpenCode ~/.config/opencode/skills/ 等）

三、里面到底教了 9 类技能

技能包拆成 9 个 skill，覆盖 GSAP 用得最多的面：

  • gsap-core：to/from/fromTo、缓动、时长、stagger、defaults
  • gsap-timeline：时间轴排序、位置参数、标签、嵌套、播放控制
  • gsap-scrolltrigger：滚动驱动动画、pin 钉住、scrub 拖尾、触发与刷新清理
  • gsap-plugins：ScrollTo / ScrollSmoother / Flip / Draggable / Inertia / Observer / SplitText / ScrambleText / SVG & 物理插件 / CustomEase 等
  • gsap-utils：clamp、mapRange、normalize、snap、toArray、wrap、pipe 等工具
  • gsap-react：useGSAP hook、refs、gsap.context()、清理、SSR
  • gsap-performance：优先 transform 不碰布局属性、will-change、批处理、ScrollTrigger 调优
  • gsap-frameworks：Vue / Svelte 等生命周期、选择器作用域、卸载清理

README 还内嵌了一段「给 AI 的标准范式」：注册插件 → 优先用 transform 别名和 autoAlpha → 用时间轴代替链式 delay → ScrollTrigger 布局变了要 refresh() → React 用 useGSAP + scope + 清理。相当于把 GSAP 官方的「怎么写才算对」直接喂给模型。

四、一个重要变化：GSAP 现在 100% 免费（含商用）

README 明写：继 Webflow 收购 GSAP之后，原 Club GSAP 的付费插件（SplitText、MorphSVG 等）现在对所有人免费，包括商用。全部插件都从公共 gsap npm 包安装——不需要 Club 会员、不需要 .npmrc / auth token、不需要私有 registry。这意味着以前「想用高级插件得掏会员费」的门槛没了，AI 生成的动画可以放心用这些插件。

口径说明：本站早前 article-113（8 个高级交互动效）提 GSAP 时写的是「个别高级插件仍需授权」，那是 Webflow 收购前的旧口径；本次按 gsap-skills 仓库 README 现况，GSAP 全插件已免费含商用。

五、口播里的案例与适合谁

作者在演示里用了一个《大都会》电影购票网站当例子（口播转述，非仓库内置 demo），展示丝滑的横向滚动与页面过渡效果，结论是「比 AI 直出的 PPT 风格强太多」。它的定位很清楚：给前端开发者用的「AI 审美增强器」——装上后 AI 产出的 GSAP 动效（时间轴、滚动特效、SVG 动画）质量上一个台阶，兼容 Vue / React / Svelte / 原生 JS。

数据红线：gsap-skills 星标 / 协议 / 日期均以 GitHub API 实查为准（15,425 星 / MIT / 2026-03-04 创建 / 2026-07-29 最后推送，2026-09-18）；安装命令与 40+ 智能体支持、GSAP 全免费均引自仓库 README；《大都会》购票站为视频案例转述，非仓库自带。