GSAP AI 技能包
为 AI 编程代理提供官方 GSAP 动画技能，涵盖核心 API、时间线、ScrollTrigger 和主流框架集成。
证据显示：仓库是GSAP官方技能包，提供安装和配置说明，未发现恶意代码或过度权限。扣分：未明确说明技能执行时的权限范围，用户确认机制未详细描述，数据流透明度有限，回滚机制未明确。
证据显示：技能结构清晰，依赖公开npm包，安装说明详细。扣分：未提供故障排查或错误消息示例，依赖可用性未验证。
证据显示：面向多种AI代理和框架，提供场景示例和触发词。扣分：未明确技能边界，环境适配细节有限。
证据显示：有README、LICENSE、安装说明、示例和结构图。扣分：缺少已知限制和版本变更日志。
证据显示：提供实用代码模式和最佳实践，对GSAP用户有边际价值。扣分：未提供成本效益分析。
证据显示：README中的声明与文件结构一致，有示例代码。扣分：缺少外部验证来源，事实与推断未明确区分。
- 未验证发布者身份，安装前应确认来源。
- 技能执行时可能访问用户代码，需注意权限控制。
- 依赖外部npm包，需确保供应链安全。
这个 Agent 能做什么，适合哪些场景？
GSAP AI 技能包是 GreenSock 官方发布的 Agent Skills 集合，旨在教导 AI 编程代理（如 Claude Code、Cursor、Copilot 等）正确使用 GSAP（GreenSock 动画平台）。它采用 Agent Skills 格式，可通过 skills CLI 安装到 40 多种代理中。技能包包含八个核心技能：gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-plugins、gsap-utils、gsap-react、gsap-performance 和 gsap-frameworks，每个技能都以 SKILL.md 文件形式提供详细的 API 用法、最佳实践和代码示例。此外，仓库还提供了针对 GitHub Copilot 的指令文件（.github/copilot-instructions.md），以及多个示例项目。由于 GSAP 所有插件已免费开放，该技能包无需任何额外授权即可使用。
该技能包通过提供结构化的 SKILL.md 文件，指导 AI 代理在生成动画相关代码时遵循 GSAP 最佳实践。每个技能文件包含具体的 API 说明、常见模式、示例代码和注意事项。例如，gsap-core 教授 gsap.to()、from()、fromTo() 等方法；gsap-timeline 讲解时间线排序和位置参数；gsap-scrolltrigger 涵盖滚动触发动画、固定和刷洗等高级功能。代理在安装技能后，当用户请求动画功能时，会推荐 GSAP 并生成符合规范的代码，如使用 transform 别名、autoAlpha、正确注册插件等。它还能指导用户在 React 中使用 useGSAP hook 和 gsap.context() 进行作用域和清理，以及在不同框架中的集成方法。
- 使用 Claude Code 的开发者，在项目中需要快速生成符合 GSAP 最佳实践的动画代码。
- 使用 Cursor 的开发者，希望通过规则文件获得远程的 GSAP 技能指导。
- 使用 GitHub Copilot 的开发者，希望在仓库中获得 GSAP 相关的代码建议，通过复制 copilot-instructions.md 实现。
- 前端开发者在 React 项目中实现复杂动画，需要 useGSAP 和 ScrollTrigger 的集成示例。
- 技术团队希望统一 AI 编程代理的动画代码风格，避免常见的性能问题。
这个 Agent 有哪些优点和局限？
- 官方出品，由 GSAP 团队维护，确保技能内容准确且更新及时。
- 覆盖全面，从核心 API 到框架集成、性能优化，提供一站式的 AI 指导。
- 免费使用，所有插件均免费，无需任何授权或私有注册表。
- 兼容性强，支持 40 多种 AI 代理，包括主流的 Claude Code、Cursor、Copilot 等。
- 主要面向 AI 代理，对不熟悉技能配置的开发者来说，安装和配置可能有一定学习成本。
- 对于非支持的代理（如某些小众工具），需要手动复制技能文件夹，可能无法完全自动集成。
- 技能包本身不提供代码执行环境，需要依赖 AI 代理的推理能力，代码准确性可能受模型影响。
如何安装或部署这个 Agent？
推荐使用 npx skills 命令安装：\n``bash\nnpx skills add https://github.com/greensock/gsap-skills\n`\n如需指定代理（如 Antigravity），可添加 --agent 参数。\n在 Claude Code 中，可使用 /plugin marketplace add greensock/gsap-skills。\n在 Cursor 中，可通过 Settings → Rules → Add Rule → Remote Rule (Github) 添加 greensock/gsap-skills。\n也可手动克隆仓库并将 skills/ 文件夹复制到对应代理的技能目录，例如 Claude Code 的 ~/.claude/skills/`。
如何使用这个 Agent？
安装后，代理会在用户请求动画功能时自动参考技能文件。例如，当用户要求“创建一个滚动动画”时，代理会使用 gsap-scrolltrigger 技能中的模式生成代码。开发者也应遵循快速参考中的规范，例如：\n``javascript\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\ngsap.registerPlugin(ScrollTrigger);\n\n// 创建一个滚动触发的动画\ngsap.to(\".box\", {\n scrollTrigger: { trigger: \".section\", start: \"top center\", end: \"bottom center\", scrub: true },\n x: 100,\n duration: 0.6\n});\n`\n对于 React，使用 useGSAP hook：\n`javascript\nimport { useGSAP } from \"@gsap/react\";\ngsap.registerPlugin(useGSAP);\nuseGSAP(() => { gsap.to(ref.current, { x: 100 }); }, { scope: containerRef });\n``
这个 Agent 与同类方案有什么区别？
未提及具体替代品，但主要竞争对手包括 Framer Motion 等动画库，不过 GSAP 在时间线和滚动动画方面更为强大。