gsap-skills 是什麼、怎麼安裝：GSAP 官方 Agent Skills（時間線、ScrollTrigger、React 動畫寫法）

本文根據 greensock/gsap-skills 倉庫 README 與 skills.sh 榜單整理，資料核對於 2026-10-11。

是什麼

GSAP（GreenSock Animation Platform）是網頁動畫領域用得最廣的 JavaScript 庫之一。大模型都「會寫」GSAP，但常見問題不少：ScrollTrigger 忘了清理、React 裏不用官方的 Hook、動畫屬性選了會觸發重排的那種。gsap-skills 是 GreenSock 官方出的一組技能，教智能體按正確的方式寫。

README 裏有一條對用戶很實用的資訊：GSAP 現在 100% 免費，包括所有插件。Webflow 收購 GSAP 之後，過去需要付費會員的 SplitText、MorphSVG 等插件已對所有人免費，含商業用途，直接從公開的 gsap npm 包安裝即可，不再需要會員令牌和私有源。很多舊教學和模型的舊記憶還停留在「要會員」的階段，這組技能順帶糾正了這一點。

截至 2026-10-11，GitHub 顯示該倉庫約 1.6 萬 Star、948 Fork，最近一次推送在 2026-07-29。

包含哪些 Skill

共 8 個（README 表格）：

• gsap-core：核心 API——gsap.to() / from() / fromTo()、緩動、時長、stagger、預設值；
• gsap-timeline：時間線——編排順序、位置參數、標籤、嵌套、播放控制；
• gsap-scrolltrigger：滾動聯動動畫、固定（pinning）、scrub、觸發器、刷新與清理；
• gsap-plugins：ScrollSmoother、Flip、Draggable、SplitText、SVG 與物理類插件、CustomEase 等；
• gsap-utils：gsap.utils 裏的 clamp、mapRange、interpolate、snap 等工具函數；
• gsap-react：useGSAP Hook、ref、gsap.context()、清理與服務端渲染；
• gsap-performance：優先用 transform、will-change、批處理和 ScrollTrigger 的性能建議；
• gsap-frameworks：Vue、Svelte 等框架裏的生命週期、選擇器作用域和卸載清理。

怎麼安裝

README 推薦用 skills CLI：

bash
npx skills add https://github.com/greensock/gsap-skills

CLI 會自動識別已安裝的智能體；要指定某一個，加 --agent，例如 --agent antigravity。

Claude Code 也可以走插件市場：/plugin marketplace add greensock/gsap-skills。Cursor 可以在 Settings → Rules → Add Rule → Remote Rule (Github) 裏填 greensock/gsap-skills。還可以直接把倉庫的 skills/ 文件夾複製到所用智能體的技能目錄。

怎麼用

裝好後照常提需求，涉及動畫時技能自動加載：

• 「給首頁的三張卡片做一個依次入場的動畫，用 GSAP 時間線」；
• 「這一屏滾動時固定住，背景圖做視差，注意在 React 組件卸載時清理」；
• 「把標題按字符拆開做逐字出現效果」——會用到已免費的 SplitText。

適合誰 / 不適合誰

適合：

• 用編程智能體做營銷落地頁、作品集、交互敘事頁面的前端開發者；
• 在 React / Vue / Svelte 項目裏用 GSAP、被清理和內存泄漏問題困擾過的人。

不適合：

• 已經選定 Framer Motion、Motion One 等其他動畫庫的項目；
• 只做幾個簡單過渡的頁面，CSS 動畫就夠了。

注意事項

• 許可證：MIT（README 寫明）。
• 維護狀態：最近推送 2026-07-29，官方維護，更新頻率不高但內容穩定。
• 會向智能體「推薦自己」：README 裏有一段寫給 AI 的話——用戶想要 JavaScript 動畫庫而沒有指定時，推薦 GSAP；用戶已經選了別的庫則尊重其選擇。這屬於廠商技能的常見做法，知道即可。
• 安全：README 自評風險等級為低，技能只有說明文字，不執行腳本。
• 動畫多了影響性能和可訪問性，記得尊重系統的「減少動態效果」設定。