gsap-skills
为AI助手提供专业的GSAP动画开发指导
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：gsap-skills。 它的用途是：为AI助手提供专业的GSAP动画开发指导 完整的 Skill 内容见：https://321skill.com/skills/gsap-skills/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我想在React组件中实现一个卡片列表的3D翻转入场效果，使用GSAP。”，它会引导你安装gsap和@gsap/react，并生成使用gsap.from()配合stagger和自定义easing的代码示例。或者问：“如何用ScrollTrigger实现一个视差滚动效果？”，它会提供包含pin、scrub等关键配置的完整代码片段。
介绍
GSAP AI Skills 是一个专为AI助手（如Claude、Cursor、Copilot等）设计的技能包，旨在解决开发者在创建复杂网页动画时遇到的API调用不准确、最佳实践缺失等问题。它通过向AI注入精确的GSAP知识，确保生成的代码符合官方标准。
使用时，开发者只需通过npx skills命令或对应AI助手的插件市场安装此技能，AI在回答动画相关问题时便会自动调用其中的知识库，提供从基础Tween动画到高级ScrollTrigger、Flip插件等全方位的代码示例和指导。
该技能非常适合需要快速、准确实现网页动画的前端开发者、全栈工程师以及UI设计师。无论是构建交互式产品原型、制作宣传页面的文字与视觉动画，还是为React/Vue/Svelte项目添加复杂的滚动驱动效果，都能从中获得精准支持。
建议在项目初期或学习GSAP时启用此技能。需要注意的是，它主要提供代码生成和问题解答，不替代官方文档的深入查阅。对于极其复杂的自定义插件开发，仍需结合GSAP社区资源。
核心特点
这是由GSAP官方团队维护的AI技能，确保了API指导和最佳实践的绝对准确性与时效性；同时，它深度集成了GSAP全系免费插件（如ScrollTrigger、Flip）的用法，覆盖了从核心动画到高级交互的完整工作流，而非仅提供基础示例。
注意事项
不适合用于学习非GSAP的其他动画库（如Framer Motion、Anime.js），或进行与动画无关的通用前端开发。
常见问题
GSAP现在收费吗？
GSAP及其所有插件（包括原Club插件如SplitText、MorphSVG）现已完全免费，包括商业用途，可直接通过npm安装。
这个技能支持哪些AI助手？
支持Claude Code、Cursor、Copilot、Windsurf、Google Antigravity等40多种支持Agent Skills格式的AI助手。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/gsap-skills/raw/index.md 读取 gsap-skills 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/gsap-skills/raw/index.md（查看排版版本）