GSAP

frontend-dev 是一個用於打造精緻、可直接上線的網頁前端技能，涵蓋高質感 UI、電影感動效、AI 生成素材、說服力文案與生成式藝術。適合用在 landing pages、行銷網站、產品頁、儀表板，以及其他需要設計、內容與實作細節彼此一致的前端工作。

gsap-frameworks 是提供給 Vue、Nuxt、Svelte、SvelteKit 與其他非 React 框架的 GSAP 技能。它涵蓋生命週期安全的動畫初始化、作用域選擇器，以及在元件卸載時清理，讓 Frontend Development 中的元件動畫能正確運作。

gsap-performance 是面向前端開發的 GSAP 效能技能。可用來降低卡頓、避免版面反覆重排，優先使用 transform 與 opacity，審慎套用 will-change，並將讀寫操作批次處理，讓 60fps 動畫更流暢。當你需要針對既有動效程式碼取得實用的 gsap-performance 使用指引時，這是最合適的選擇。

gsap-react 是 GSAP 官方提供給 React 與 Next.js 使用的技能。它涵蓋 `useGSAP()`、refs、`gsap.context()`、scoped selectors 與清理機制，讓你能建立對 React 安全的動畫，避免重繪或卸載時的 bug。當你需要前端開發的安裝與使用協助時，可使用這份 gsap-react 指南。

gsap-utils 是 GSAP 工具輔助函式技能，涵蓋 clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap 與 pipe。了解 gsap-utils 在前端開發中的用法，包括何時使用可重用的函式形式、如何把這些 helper 套用到 tween 與 callback，以及為什麼不需要註冊。

gsap-plugins 可協助前端開發者正確選擇、安裝與使用 GSAP 插件。內容涵蓋插件註冊、匯入方式，以及 ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG plugins、easing tools 和 GSDevTools 的實務指引。當你需要的是清楚的 gsap-plugins 指南，而不是泛用的動畫建議時，就很適合使用它。

gsap-scrolltrigger 是 GSAP 官方的捲動連動動畫技能，支援釘選、scrub 行為與以視窗為基礎的觸發器。當你需要 gsap-scrolltrigger 安裝說明、使用指引，或想把它實際用在視差效果、釘選區塊與捲動驅動動態時，很適合用在 Frontend Development。

gsap-timeline 可協助你建立 GSAP timeline 序列，支援依序步驟、重疊、標籤與巢狀播放。當你的目標是協調多個動畫時，就適合使用 gsap-timeline 技能，特別是 UI 設計、onboarding 流程或可重複使用的 motion 系統。它包含 gsap-timeline 的安裝與使用指引，幫助你清楚安排動畫順序。

gsap-core 技能是 GSAP 核心動畫 API 的官方指南，涵蓋 `gsap.to()`、`from()`、`fromTo()`、easing、stagger、defaults 與響應式動效。適合用於 vanilla JS、React、Vue、Svelte、DOM、SVG 以及 UI Design 工作流程中的 gsap-core 使用情境，特別是在你需要一份可靠的 gsap-core 指南時。

hyperframes-registry 可幫你更少猜測地安裝並串接可重用的 HyperFrames registry 項目。可用來執行 hyperframes add、辨識 blocks 與 components、合併片段、將 blocks 串入 index.html，並依照 hyperframes.json 的路徑對應來進行設計實作與 registry 探索。

gsap 是 HyperFrames 組合內容的實用動畫參考。它能幫你在 `gsap.to()`、`from()`、`fromTo()` 與 `gsap.timeline()` 之間做出選擇，並套用正確的 vars、easing、stagger、transform 與效能模式。當你需要可直接落地實作的進場動畫、轉場效果與可重複使用的設計動效時，就用這份 gsap 指南。

hyperframes 是一個工作流程技能，用於在 HyperFrames 中建立以 HTML 為基礎的影片組成內容。當你需要結構化、以程式碼為核心的 hyperframes 來處理影片剪輯時，可用於標題卡、疊加圖層、字幕、旁白、音訊反應動態，以及場景轉場。它更重視版面配置、時間安排與動畫決策，而不是泛用的、只靠提示詞的影片需求。

gpt-taste 是一個以設計為核心的 skill，適合用來打造有精緻感的 UI 頁面，強調編輯感的視覺指導、留白節奏與 GSAP 動效。當你要做行銷頁、登陸頁或展示型網站，並希望版面變化更豐富、排版控制更精準、少一些通用的前端套路時，gpt-taste skill 很適合使用。這份指南也包含安裝與使用說明，方便實際落地。

fixing-motion-performance 可在不預設更換技術堆疊的情況下，協助稽核並修正 UI 動畫效能問題。當動效卡頓、與捲動連動的效果成本過高，或轉場造成 layout、paint 或 compositing 工作時，特別適合用在前端開發。它能把動畫 bug 轉化成清楚、可直接落到程式碼層級的修正。