# 策展 · X (Twitter) 🔥

> 作者：GSAP (@greensock) · 平台：X (Twitter) · 日期：2026-03-21

> 原始來源：https://x.com/greensock/status/2034969354157068569

## 中文摘要

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 授權。

## 標籤

Skills, Agent, CLI, 功能更新, Claude Code, Codex, Antigravity, Gemini Cli, Cursor, GreenSock