gsap-skills：GSAP AI 官方技能库

1. 平台与项目简介

greensock/gsap-skips 是 GSAP（GreenSock Animation Platform）官方推出的核心扩展包，旨在作为 AI 编程助手的专用知识库。

• 项目定位：它是专为解决现代前端开发中的动效痛点而设计的开源资源库，属于官方的 AI Coding Agent Skills。
• 核心目标：为各类主流 AI Agent（如 Cursor、Claude Code、GitHub Copilot 等）提供 GSAP 动画的最佳实践规则集。旨在确保 AI 生成的代码具备高性能、无 Bug 且符合最新 API 标准的特点，避免生成过时的语法或存在内存泄漏的代码。

2. 主要功能与技能模块 (Skills)

该库涵盖了从核心 API 到复杂滚动触发的全生态规范，具体包含以下 8 个关键模块：

1. gsap-core

• 内容说明：核心 API 规范化。定义了标准的使用方式（如 to()、from(), fromTo()），涵盖缓动函数配置以及交错动画 (stagger)。确保 AI 知道如何正确设置默认值及执行基础动画逻辑。

1. gsap-timeline

• 内容说明：时间轴控制规范。涉及时间链管理、Position 参数定位、标签系统应用，以及嵌套播放与循环控制的规则设定。

1. gsap-scrolltrigger

• 内容说明：滚动联动开发指南。详细规定 Pin (钉住) 策略的使用、Scrub (滚动触发) 顺滑效果的处理，包括滚动触发的注册设置及自动清理机制的规范。

1. gsap-plugins

• 内容说明：高级插件标准库。包含对官方所有免费与付费插件（如 ScrollTo, ScrollSmoother）的统一使用方式，以及 Flip、Draggable、Inertia、SplitText、MorphSVG 等特定功能的代码规范。

1. gsap-react

• 内容说明：React 最佳实践方案。强制推广 useGSAP() Hook 的使用模式，规定 Ref 结合方式、作用域隔离 (scope)、SSR（服务端渲染）处理及组件销毁时的 Cleanup 流程。

1. gsap-frameworks

• 内容说明：框架适配策略。专门针对 Vue、Svelte 等非 React 生态的框架，提供生命周期钩子的结合点与选择器作用域的隔离规则。

1. gsap-utils

• 内容说明：工具函数规范集合。定义了常用辅助函数的使用标准（如 clamp, mapRange, normalize, interpolate, toArray），确保数据映射的高效性。

1. gsap-performance

• 内容说明：性能优化指南。重点教导 GPU 硬件加速利用、will-change CSS 策略的时机，以及批量处理动画时的性能损耗控制方法。

3. 适用人群建议

该技能库主要服务于以下三类开发者群体：

• 前端开发工程师在日常工作中使用 Cursor、Claude Code 或 Copilot 等 AI 工具辅助编写 GSAP 代码，需要确保生成的逻辑无 Bug。
• 动效与 UI 设计师/工程师负责复杂交互场景构建的团队，急需让 AI 快速生成符合现代性能标准的交错动画 (Stagger) 及滚动联动特效。
• AI Agent 开发者正在搭建自定义工作流或需要集成专业动效生成能力的开发团队，希望为其模型注入权威的 GSAP 知识。

4. 免费与付费政策说明

GSAP 的授权体系近期经历了重大调整，目前的开源策略如下：

• 协议开放gsap-skills 本身采用严格的 MIT 开源免费协议。所有用户均可直接下载并使用其中的知识库规则。
• 插件费用免除GSAP 原 Club GSAP 付费插件（包括 SplitText, MorphSVG, ScrollSmoother 等）现已全部转为免费。这意味着商业项目无需额外购买授权，可直接通过 npm 安装使用。
• 官方查询渠道所有最新的定价政策、企业级授权变动及详细的许可信息均可查阅官方网址：https://gsap.com/pricing

5. 使用方法指南

您可以通过以下两种主流方式将技能库集成到您的 AI Agent 中：

1. CLI 一键安装（推荐通用方案）

• 此方法适配 Cursor、Claude Code、Windsurf、Copilot 等 40+ 种 AI 编程助手，无需手动复制文件。直接运行以下终端命令即可自动拉取配置：
• bash

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

• 若需为特定 Agent（如 Antigravity）定制安装参数，可附加指定 flag：
• bash

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

1. 按平台配置与手动导入

• 不同 IDE/Agent 具有特定的插件或指令通道，请按对应说明执行：
• Claude Code：运行 /plugin marketplace add greensock/gsap-skills。
• Cursor 用户：进入 Settings (设置) -> Rules (规则) -> Add Rule (添加) -> 选择 Remote Rule，输入仓库名并确认拉取。
• GitHub Copilot：获取仓库根目录下的 .github/copilot-instructions.md 文件内容，并将其复制到项目的同层级目录下。
• 手动迁移路径：克隆整个仓库到本地，并将 skills/ 文件夹直接剪切至 AI 工具的配置文件目录（例如 Windows/Mac 用户可尝试放置于 ~/.claude/skills/ 或 ~/.cursor/skills/）。

6. 注意事项与开发规范

在使用过程中请务必遵循以下核心标准，以保证代码质量：

• 无需私有注册表GSAP 官方策略调整使得您可以直接通过公有的 npm registry 安装所有插件功能。无需配置 Club GSAP 私有的 .npmrc 文件或进行复杂的 Auth Token 认证流程。
• React 开发强制性要求在使用 React 生态时，必须优先引入 @gsap/react 库并配合 useGSAP() Hook 使用。务必指定作用域 (scope)，以防止全局选择器污染及潜在的组件内存泄漏问题。
• 滚动触发的刷新机制当 DOM 结构发生变更、页面发生动态扩容或布局调整时，必须显式调用 ScrollTrigger.refresh() 函数重新计算动画的位置与触发点。
• 性能优先的代码风格AI Agent 应被引导始终使用 CSS Transform 别名（如 x, y, scale, rotation）。严禁为了简单的位移而使用可能引发重排的属性（如 top, left, width, height），以保证动画的流畅性与低延迟。