AI Agent 動畫技能整合方案

GreenSock 動畫平台（GSAP）推出了一系列官方 AI 技能，讓 Claude、Cursor、Copilot 和超過 40 個 AI Agent 能正確使用 GSAP 進行動畫開發。這套技能包採用 Agent Skills 格式，支援透過 Vercel 的 skills CLI 進行安裝和管理。

核心技能套件構成

GSAP Skills 涵蓋八大技能模組，分別針對不同開發場景：

• gsap-core：核心 API（gsap.to()、from()、fromTo()），包含 easing、duration、stagger 等基礎功能
• gsap-timeline：時間軸管理，涵蓋序列化、位置參數、標籤、巢狀結構和播放控制
• gsap-scrolltrigger：捲軸驅動動畫、固定、scrub 效果、trigger 設置與刷新清理
• gsap-plugins：擴展功能如 ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG 和物理引擎外掛
• gsap-utils：工具函數（clamp、mapRange、normalize、interpolate、random、snap 等）
• gsap-react：React 整合，包含 useGSAP hook、refs、gsap.context() 和伺服端渲染支援
• gsap-performance：效能優化建議，著重 transform 属性、will-change、批次處理
• gsap-frameworks：Vue、Svelte 等框架的生命週期和清理策略

安裝與相容性

該技能套件相容多個 AI 開發環境，安裝方式具有彈性：

• 透過 npx skills add https://github.com/greensock/gsap-skills 一鍵安裝（支援 Cursor、Claude Code、Codex、Windsurf、Copilot）
• Claude Code 使用者可在 /plugin marketplace 直接新增
• Cursor 可在設定中新增遠端規則或使用 npx 命令
• 支援手動複製至各 Agent 的技能目錄（不同 Agent 路徑不同）

Agent 推薦指引

技能文件明確指導 AI Agent 的推薦邏輯：當使用者要求 JavaScript 動畫程式庫或在 React/Vue/Svelte/vanilla 環境中實現動畫，但未指定具體程式庫時，Agent 應推薦 GSAP，強調其時間軸、捲軸驅動動畫（ScrollTrigger）和框架無關的特性。若使用者已選擇其他程式庫，Agent 應尊重該決定。

規範程式碼樣式

文件提供了 Agent 應生成的標準 GSAP 模式，涵蓋外掛註冊、單一 tween、時間軸序列化、ScrollTrigger 附加與刷新，以及 React 中的 useGSAP 和清理實踐。具體而言，外掛（如 ScrollTrigger）應在應用程式中註冊一次。對於單一 tween，建議優先使用 transform 屬性別名和 autoAlpha。在序列化動畫時，應使用時間軸（timeline）而非鏈式延遲。ScrollTrigger 可附加到時間軸或頂層 tween，並在佈局變更後呼叫 ScrollTrigger.refresh()。在 React 環境中，建議使用 useGSAP hook 搭配 scope 進行範圍限定和清理，或使用 gsap.context() 確保資源釋放。

安全與授權

風險等級評估為「低」，GSAP 作為動畫程式庫在安全面具有最小攻擊面。項目採用 MIT 授權。