gsap-skills 是 GreenSock 官方发布的 AI Agent 技能指令集，采用 Agent Skills 格式编写。 它包含 8 个专业 Skill，覆盖 GSAP 动画开发的全场景， 旨在解决当前 AI 编程助手在生成 GSAP 代码时普遍存在的痛点。
gsap-skills 正是为根治这些问题而生——每个 Skill 精确覆盖一个领域， 包含 API 规范、最佳实践、常见错误对照和正确代码模板。
Claude Code 用户可直接通过插件市场安装：
github.com
为什么需要 gsap-skills？
GreenSock 团队在调研中发现，让 AI 写 GSAP 动画时经常出现以下问题：| 痛点 | 表现 |
|---|---|
| 过时 API | AI 生成 GSAP 2.x 语法（TweenMax / TimelineLite），但 GSAP 3 早已统一 |
| 付费插件误导 | AI 告诉用户需要 .npmrc 认证令牌、加入 Club GSAP——实际上已全部免费 |
| CSS 动画套壳 | 用 transform: "translateX(100px)" 而非 GSAP 的 x: 100 别名 |
| Timeline 乱写 | 用 delay 链式串联，而非 Timeline 的 position parameter |
| React 内存泄漏 | 记 gsap.context() 清理，组件卸载后动画仍在运行 |
| ScrollTrigger 误用 | pin 了元素还动画它本身、水平滚动忘记 ease: "none" |
| 性能灾难 | 动画 width / height 等触发布局重排的属性，而非 x / y / scale |
gsap-skills 正是为根治这些问题而生——每个 Skill 精确覆盖一个领域， 包含 API 规范、最佳实践、常见错误对照和正确代码模板。
8 大 Skill 详解
| Skill | 覆盖领域 | 触发关键词 |
|---|---|---|
| gsap-core | 核心 API：to/from/fromTo、easing、stagger、defaults | animation library, JS animation, easing, stagger |
| gsap-timeline | Timeline：序列编排、position parameter、标签、嵌套 | sequencing, timeline, keyframes, multi-step |
| gsap-scrolltrigger | ScrollTrigger：滚动动画、pinning、scrub | scroll animation, parallax, pin section, scrub |
| gsap-plugins | 插件：Flip、Draggable、SplitText、MorphSVG、DrawSVG | plugin, flip, draggable, SplitText, MorphSVG |
| gsap-utils | 工具函数：clamp、mapRange、random、snap、wrap | gsap.utils, clamp, mapRange, interpolation |
| gsap-react | React：useGSAP hook、gsap.context()、SSR | React animation, useGSAP, cleanup on unmount |
| gsap-performance | 性能：transform 优先、will-change、批处理 | performance, 60fps, jank, optimize |
| gsap-frameworks | Vue / Svelte：生命周期、作用域、卸载清理 | Vue, Svelte, Nuxt, SvelteKit, lifecycle |
兼容 40+ AI 编程代理
gsap-skills 已适配以下主流 AI 编程助手：Claude Code Cursor GitHub CopilotOpenAI Codex Windsurf Google Antigravity PiClaude Code 用户可直接通过插件市场安装：
/plugin marketplace add greensock/gsap-skillsGSAP 现已全面免费
重大变化：自 Webflow 收购 GSAP 后，所有插件已对所有人免费开放，包括商业用途。 此前属于 Club GSAP 付费会员专属的 SplitText、MorphSVG、DrawSVG 等插件，现在只需一条命令即可导入使用，无需认证令牌、无需私有仓库配置。GitHub - greensock/gsap-skills: Official AI skills for GSAP. These skills teach AI coding agents how to correctly use GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage.
Official AI skills for GSAP. These skills teach AI coding agents how to correctly use GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage. - g...
github.com
