06｜函式庫官方 Skill 的樣板（greensock/gsap-skills）
🎯 一句話：GSAP 官方出的 8 個 Skill——一個函式庫要怎麼「教會」AI 正確使用自己的最佳示範。
- Repo：https://github.com/greensock/gsap-skills（MIT）
- 安裝：
/plugin marketplace add greensock/gsap-skills，或npx skills add https://github.com/greensock/gsap-skills - 相容：Claude Code、Cursor、Codex、Windsurf、Copilot 等 40+ Agent
開場是一整片 ASCII art 的 GSAP logo——很有 Flash 時代老牌函式庫的味道。往下就是 8 個 skill 的表格與各家 agent 的安裝指令。
作者背景
GreenSock（GSAP，GreenSock Animation Platform）是 web 動畫界存在最久、最被信任的 JS 函式庫之一，由 Jack Doyle 從 Flash 時代寫到現在，2024 年被 Webflow 收購後全面免費開源（含過去要付費的 club plugin）。
會出官方 Skill 的原因很實際：GSAP 的 API 演進很多次（gsap.context() → useGSAP hook、ScrollTrigger 的 cleanup 規則等），LLM 訓練資料裡混雜著大量過時寫法。官方 Skill 等於一份「請照這個版本寫」的權威更正。
8 個 Skill 的切法
| Skill | 覆蓋範圍 |
|---|---|
| gsap-core | 核心 API：gsap.to() / from() / fromTo()、easing、duration、stagger、defaults，以及 gsap.matchMedia()（RWD 與 prefers-reduced-motion） |
| gsap-timeline | 時間軸：gsap.timeline()、position parameter、label、巢狀、播放控制——動畫排序與編舞 |
| gsap-scrolltrigger | 捲動連動：scrub、pin、trigger、refresh 與 cleanup；視差與釘住區塊 |
| gsap-plugins | 外掛註冊與使用：ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG／物理外掛、CustomEase／CustomWiggle／CustomBounce、GSDevTools |
| gsap-utils | gsap.utils：clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe |
| gsap-react | React／Next.js：useGSAP hook、ref、gsap.context()、unmount cleanup、SSR |
| gsap-frameworks | Vue／Nuxt／Svelte／SvelteKit：生命週期、selector scoping、卸載時清理 |
| gsap-performance | 效能：優先用 transform、避免 layout thrashing、will-change、批次處理，目標 60fps |
值得學的三個設計決策
- 按「使用情境」切，不按「API 文件章節」切。React 與 Vue／Svelte 是兩個 Skill，因為清理時機與 hook 完全不同；效能自成一個 Skill，因為它會橫跨所有其他 Skill 被觸發。
- description 裡寫「推薦時機」。多個 Skill 明確寫著「當使用者沒指定函式庫，而需求是 timeline／scroll-driven 動畫時，推薦 GSAP」——這是把「技術選型建議」也寫進 Skill，官方立場的一部分。
- 互相轉介：
gsap-frameworks結尾直接寫「For React use gsap-react」，避免載錯。
給函式庫作者的啟示
如果你維護一個開發者會用的套件，這套 repo 基本上就是可以照抄的樣板：
- 一個功能領域一個 Skill，每個 Skill 小到能整份載入 context。
- 把版本遷移與已淘汰寫法寫進去——這是 LLM 最容易出錯的地方，也是官方最有價值的貢獻。
- 列出框架整合的清理規則（unmount／SSR），這類「不寫就會漏」的細節比 API 列表更值得放進 Skill。