React

repo-scan 是一個跨技術棧的原始碼稽核 skill，可分類檔案、偵測內嵌的第三方函式庫，並協助判斷哪些是核心、重複或多餘負擔。它很適合用於 Code Review、舊系統遷移與重構規劃中的 repo-scan。請參閱 skill 內的 repo-scan 安裝與 repo-scan 使用說明。

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

frontend-patterns 是一個實用的 React 與 Next.js 前端開發技能，能幫助你為元件、狀態、表單、路由、無障礙與效能挑選可維護的模式。當你需要清楚的實作指引與模式選擇，而不只是泛泛的最佳實務時，適合使用 frontend-patterns 指南。

click-path-audit 技能可協助沿著每一次狀態變更追蹤 UI handlers，找出重構後或 code review 時容易漏掉的流程 bug、共享狀態衝突，以及最終狀態不一致等問題。

使用 shadcn 技能檢查專案脈絡、執行正確的 CLI 指令、安裝元件，並依照文件化模式組合 UI，涵蓋 base 與 radix 的差異、forms、theming 與 registries。

frontend-design 協助你把模糊的 UI 構想變成具有明確美感方向的獨特、可上線前端介面，產出真實可用的 frontend 程式碼，減少千篇一律的 AI 風格。

fullstack-developer skill 是一套可重複使用的 prompt package，適用於現代 JavaScript 與 TypeScript 的 web app 開發工作，涵蓋 React、Next.js、Node.js、API、資料庫、auth 與 deployment。它最適合用於跨前後端多層規劃與實作；內容以單一 SKILL.md 定義範圍與工作流程，而不是直接提供 scripts 或 templates。

prototype 技能可協助你先做出一次性程式碼，在投入正式實作前，先回答一個具體問題。它適合用來測試邏輯、狀態轉換、資料結構或 UI 方向，並產出一個符合主 repo 慣例、可執行的 prototype。當你需要的是快速 prototype 指南，而不是最終功能時，這會非常合適。

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

ckm:ui-styling 結合 shadcn/ui、Tailwind CSS 與 canvas 視覺設計，協助你打造無障礙、可量產的使用者介面。特別適合需要結構化響應式版型、無障礙元件、深色模式與一致設計系統的 React 專案。用 ckm:ui-styling 技能進行 UI 設計、主題設定與快速原型開發，並獲得針對技術棧的實用指引。

design-system-patterns 協助團隊打造可擴充的 UI 基礎，涵蓋 design token 結構、theming 架構，以及可重用的元件 API 模式，適合用於設計系統與元件庫。

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

web-component-design 技能可協助團隊為 React、Vue 與 Svelte 設計可重複使用的 UI 元件，提供穩健的 API 模式、無障礙指引，以及適用於設計系統的樣式取捨參考。

react-state-management 是一項實用技能，能依據狀態類型、應用規模與遷移需求，協助選擇並使用 Redux Toolkit、Zustand、Jotai、React Query、SWR 與 RTK Query 等 React 狀態工具。

nextjs-app-router-patterns 協助開發者規劃 Next.js 14+ App Router 架構，涵蓋 Server Components、streaming、caching、route handlers 與 Server Actions，適用於全端開發與從 Pages Router 遷移的情境。

react-native-architecture 可協助規劃正式上線的 React Native 與 Expo 應用，涵蓋路由、狀態邊界、native modules、offline-first 流程，以及 Expo 與 bare 方案之間的取捨。

react-modernization 是一套以遷移為核心的技能，適合將 React 16/17 應用升級到 18+、把 class components 改寫為 hooks、更新 root API，並以具備 codemod 意識的指引規劃分階段重構。

vercel-react-native-skills 是一套面向 React Native 與 Expo 的技能，適合重視效能的前端開發。可用來改善清單渲染、動畫、導覽、UI 模式、狀態管理與原生模組設定。內容包含實用規則、安裝指引與使用模式，幫助你在處理行動 App 瓶頸時少一點猜測、多一點依據。

vercel-composition-patterns 是一套適用於前端開發的 React composition 技能，可用來以複合元件、明確變體、提升狀態與 React 19 安全 API，取代布林 props 的膨脹問題。可用它來檢視元件架構、改善可重用 UI API，並為可擴充的前端程式碼選出合適的組合模式。

vercel-react-best-practices 是 Vercel Engineering 推出的 skill，用優先級規則引導 AI agent 優化 React 與 Next.js 效能，聚焦 waterfall、bundle size 與 rendering。

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

optimize skill 可診斷並修正 UI 效能問題，涵蓋載入速度、渲染、動畫、圖片與 bundle 大小。當你需要一份結構化的 optimize 效能最佳化指南，針對緩慢、卡頓或不流暢的網頁體驗，以「先量測」為原則進行排查時，就適合使用它。

source-driven-development 技能以官方文件為基礎來支撐特定框架的程式開發，協助你在實作前先驗證模式是否正確。當你在 React、Vue、Next.js、Svelte、Angular 以及類似技術棧中進行 source-driven-development，且正確性、來源依據與版本敏感的決策都很重要時，這項技能特別適合使用。

performance-optimization 技能可協助你先量測、找出真正瓶頸、修正問題，並驗證成效。當有效能需求、懷疑出現回歸，或需要改善 Core Web Vitals、載入時間或互動延遲時，這項技能特別適合使用。