GSAP Web 动画 Agent Skills
GreenSock 官方动画技能集合，覆盖时间轴、滚动触发、插件、React/Vue/Svelte 和性能优化。
技能说明
GreenSock 官方 GSAP Agent Skills，提供 8 个技能，帮助 Claude Code、Cursor、Codex 和其他 Agent 正确编写 JavaScript、React、Vue、Svelte 和原生 Web 动画。覆盖时间轴、ScrollTrigger、插件、性能和 reduced-motion。仓库为 MIT 许可证，README 标注风险较低；Copilot 不会自动加载技能文件，需要额外复制项目说明。
关于此技能
GreenSock 官方 Agent Skills 集合，帮助 AI 编程 Agent 正确使用 GSAP 制作时间轴、滚动触发、插件、React/Vue/Svelte 和高性能 Web 动画。
核心能力
完整 GSAP API 指导
覆盖 gsap.to、from、fromTo、easing、stagger、defaults、时间轴、ScrollTrigger、插件和常用工具。
框架与组件实践
包含 React 的 useGSAP、refs、作用域和清理方式，也提供 Vue、Svelte 等框架的生命周期与卸载清理建议。
性能和无障碍
强调 transform、opacity、stagger、quickTo、ScrollTrigger.refresh 和清理动画，并提供 prefers-reduced-motion 的处理方式。
适用场景
营销页和产品页动效
制作时间轴动画、滚动联动、SVG 动画和交互式页面过渡。
React/Vue/Svelte 动画开发
让 Agent 按框架生命周期正确创建、作用域化和清理 GSAP 动画。
动画性能优化
排查卡顿、布局抖动、过多补间或未清理的 ScrollTrigger，并按官方建议改进。
使用步骤
- 01
安装技能
运行 npx skills add https://github.com/greensock/gsap-skills，或在 Claude Code 中运行 /plugin marketplace add greensock/gsap-skills。
- 02
按任务选择
基础补间使用 gsap-core；多步编排用 gsap-timeline；滚动联动用 gsap-scrolltrigger；React 使用 gsap-react；性能问题使用 gsap-performance。
- 03
实现并清理
优先使用 transform 别名和 autoAlpha；在 React 等框架中使用作用域和卸载清理；尊重 prefers-reduced-motion。
- 04
验证表现
在目标浏览器和低端设备上检查滚动、布局、帧率和清理结果，避免只凭代码判断。
常见问题
支持哪些 Agent？+
README 明确支持 Cursor、Claude Code、Codex、Windsurf、GitHub Copilot、Google Antigravity、OpenCode、Pi 等，并可通过 skills CLI 安装到 40 多种 Agent。
Copilot 需要特别配置吗？+
需要。README 说明 Copilot 不会自动加载 Cursor 或 Claude 的技能文件，可把仓库的 .github/copilot-instructions.md 和需要的路径说明复制或改写到项目中。
它会安装 GSAP 本身吗？+
技能仓库主要提供 Agent 指导；项目依赖仍需按你的前端项目方式安装公开的 gsap npm 包。
许可证和安全风险是什么？+
技能仓库使用 MIT 许可证，README 将风险标为低。它主要提供动画代码和性能建议，但仍应在目标项目中检查生成的脚本、第三方依赖和事件处理。
npx skills add https://github.com/greensock/gsap-skills