Animation

remotion-video-creation 是一個聚焦於 Remotion 的 React 影片製作技能。它透過 29 條規則，協助降低渲染失誤，涵蓋動畫、素材、音訊、字幕、圖表、組成與轉場。適合用於 Video Editing 工作流程、模板化說明內容、社群短片，以及資料驅動的動態圖像製作。

manim-video 協助你規劃並製作乾淨俐落的、以 Manim 為基礎的說明影片，適合圖表、工作流程、系統架構圖、產品導覽與發布視覺內容。當你想要的是精準的動畫解說、以場景為核心的工作流程，而不是人物對鏡頭講述的剪輯方式時，就適合使用 manim-video 技能。它包含實用的 manim-video 指南步驟，涵蓋安裝、場景規劃與渲染。

frontend-slides 可協助你從零開始製作充滿動畫效果的 HTML 簡報，或將 PowerPoint 檔轉換成 HTML 簡報。當你需要做簡報、提案 deck、工作坊、內部 demo，或是想用 frontend-slides 進行 UI Design 的視覺探索時，都很適合使用這個 skill；它能輸出零依賴的瀏覽器簡報，並讓投影片精準符合單一視窗尺寸。

slack-gif-creator 是偏重程式碼操作的 skill，可用 Python 輔助工具建立適合 Slack 的動態 GIF，涵蓋影格建構、最佳化與驗證。可用來安裝相依套件、以 `GIFBuilder` 製作循環動畫，並匯出符合 Slack 尺寸、時序與色彩限制的表情或訊息 GIF。

ui-ux-pro-max 是一款專為 AI 輔助 UI/UX 設計打造的全方位技能，提供網頁與行動專案的版型、風格、色彩系統、字體排版及 UX 規範等結構化指引。適合需要實用設計決策的開發者與團隊，支援 React、Next.js、Vue、Svelte、Tailwind、shadcn/ui、SwiftUI、React Native、Flutter 及 HTML/CSS。可用於 UI 規劃、審查與優化，結合精選設計智慧。

interaction-design skill 可協助團隊設計並實作有明確目的的 UI 動態、微互動、轉場、載入狀態與回饋模式，並提供以 React 為導向的實用參考與使用指引。

react-native-design 是一項專注於 React Native UI 模式的技能，涵蓋 StyleSheet 樣式設計、型別化 React Navigation，以及 Reanimated 3 在跨平台畫面中的使用方式。

overdrive 是一個 GitHub 技能，適合有雄心的 UI 設計工作，重視情境理解、先提案再規劃，以及極高水準的互動品質。可用來安裝並套用 overdrive，打造電影感轉場、響應式介面與高衝擊力的產品體驗。

使用 delight skill 為成功、載入、空白與 onboarding 狀態加入有品味的 UI 潤飾、微互動與品牌個性，同時不影響可用性或使用者注意力。

overdrive 是一個可由使用者主動呼叫的技能，適合用於企圖心強烈的 UI 設計，將介面體驗推進到標準元件之外。它需要先建立 `/frontend-design` 的上下文，接著會要求你先提出概念方向，再著手打造聚焦且高衝擊力的互動。

optimize skill 可協助診斷並改善 UI 效能問題，涵蓋載入、渲染、動畫、圖片、bundle 大小與執行期行為，並採取以量測為先的工作流程。

delight skill 可為 UI Design 加入恰到好處的愉悅感、角色感與細節層次。適合用來優化成功狀態、空狀態、載入時刻與各種互動體驗，並提供依情境調整的 delight 安裝、設定與使用指引。

使用 animate skill 檢視 UI 功能，並規劃有目的的動畫、微互動與轉場效果。它能協助你找出哪些動態能提升回饋感、清晰度、層級與愉悅感，同時需要先具備來自 /frontend-design 的設計脈絡，並兼顧效能與無障礙。

overdrive 是一項適合高企圖心 UI 設計的 GitHub skill，可協助團隊判斷並打造高影響力、能呼應情境的互動體驗。可用於規劃吸睛動效、偏重效能的 UI，以及更講究完成度的進階流程，但在實作前需要先完成必要的設計準備。

delight skill 可協助 UI 團隊加入有品味的微互動、文案與回饋時刻，讓介面更有溫度，也更容易被記住。最適合用來打磨特定畫面或操作流程，不適合拿來做整體重新設計。建議先具備 /frontend-design 的前置脈絡，必要時也可先使用 /teach-impeccable。

使用 animate skill 檢視功能介面，加入有目的的動畫、微互動與動態效果，提升清晰度、回饋感與整體細緻度。最適合有明確目標、設計脈絡與效能限制的 UI 設計工作。

shader-dev 是一套實用的 GLSL 著色器技能，適用於 ShaderToy 風格的即時視覺效果。使用 shader-dev 技能可建立或除錯 ray marching、SDF 場景、光照、粒子、流體動態、後製，以及 UI Design 的 shader-dev，且比泛用提示詞更少憑空猜測。

使用 remotion 技能，將 Stitch 專案畫面轉換成精緻的導覽影片，加入轉場、縮放效果與文字疊加。內容包含安裝步驟、範例檔案，以及可重複使用的 remotion 影片編輯指南，協助你建立可直接輸出的 compositions。

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 的安裝與使用指引，幫助你清楚安排動畫順序。