Nextjs

nextjs-turbopack 技能可協助你在 Next.js 16+ 中使用 Turbopack，以提升本機開發速度、HMR 與打包器決策效率。它可作為實用的 nextjs-turbopack 指南，涵蓋安裝、使用，以及在 Frontend Development 工作流程中何時切回 webpack。

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

backend-patterns 是一個適用於 Node.js、Express 和 Next.js API routes 的後端開發技能。它能協助你處理 API 設計、repository/service/controller 分層、驗證、快取、背景工作與資料庫最佳化，讓你在建構更乾淨的 server-side 系統時，少一些猜測、多一些依據。

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

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

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

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

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

deploy-to-vercel 是一項用於 Vercel 部署的技能，會先檢查 repo 狀態、專案連結、CLI 驗證與 team scope，再執行部署。預設採用 preview deploy，也支援輔助腳本，能更穩定地取得部署 URL、減少猜測。

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

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

fullstack-dev 是一份實用的全端開發指南，能在動手寫 code 之前，幫你規劃後端架構、API 設計、驗證、資料流與前端整合。它特別適合 CRUD 應用、儀表板、聊天功能與 API-first 專案，並強調正確的工作流程、限制條件與可直接上線的決策。

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

next-best-practices 是一套實用的 Next.js 技能，適合處理 App Router 開發，涵蓋檔案慣例、RSC 邊界、async API、資料模式、route handlers、bundling 與錯誤處理。

next-cache-components 介紹 Next.js 16 的 Cache Components：啟用 `cacheComponents`、使用 `use cache`、設定 `cacheLife`、套用 `cacheTag`，並透過 Suspense 串流動態區段。

next-upgrade skill 可協助真實的 Next.js 專案升級，結合官方 migration guides、codemods、逐步版本升級流程，以及相互協調的相依套件更新。

這個 medusa 技能可協助你為後端開發完成 Medusa 的建置與擴充。可用於 headless commerce 後端、管理工具、modules、API routes，以及結合 Node.js 與 PostgreSQL 的實作型 medusa 安裝、設定與使用步驟。

netlify-frameworks 是一份部署指南，協助你將 Vite/React、Astro、TanStack Start、Next.js、Nuxt、SvelteKit 和 Remix 跑在 Netlify 上。可用於 netlify-frameworks 的部署、adapter 與 plugin 設定、SSR、API routes、middleware，以及各框架在 Netlify 整合上的疑難排解。

supabase-nextjs 可協助建立採用 Supabase auth、storage 與 realtime 的 Next.js App Router 應用，並搭配 Drizzle ORM 進行具型別的資料庫查詢。它適合需要受保護路由、伺服器端 session 處理，以及清楚區分 server/client 的後端開發流程。

posthog-analytics 協助團隊在前端應用中實作 PostHog 事件追蹤、功能旗標與儀表板。這個 posthog-analytics 技能可作為安裝、使用與乾淨埋點的實用指南，適用於 Next.js App Router 或 React 專案。

vercel-react-best-practices 是由 Vercel Engineering 提供、聚焦效能的 React 與 Next.js 實作指南。當你在重構元件、路由或資料擷取時，使用 vercel-react-best-practices skill，可幫助你減少 waterfall、縮小 bundle、改善渲染，並更快交付前端程式碼。

vercel-deploy 可用最少的設定，協助你將應用程式與網站部署到 Vercel。它以 preview-first 部署流程為設計核心，提供清楚的安裝與使用步驟，並在 CLI 不可用或缺少 auth 時提供可靠的備援方案。適合先快速產生可分享連結，之後只有在你要求時再發布正式 production。

render-deploy 可協助把程式碼庫整理成適用於 Render 的部署方案，包括 render.yaml Blueprints 或直接建立服務。當你需要一份實用的 Render 安裝、使用、服務選擇、環境變數與部署檢查指南時，就適合使用 render-deploy 技能。

netlify-deploy 是一個以部署為核心的技能，使用 Netlify CLI 將網站專案發佈到 Netlify。它會引導你完成驗證登入、網站綁定、預覽部署、正式部署，以及 `netlify.toml` 檢查，協助使用者從本機 repo 走到線上 URL，減少猜測與試錯。