Vue

nuxt4-patterns 是一個用於 Nuxt 4 的技能，聚焦於 hydration 安全、路由規則、延遲載入，以及 SSR 安全的資料擷取。使用 nuxt4-patterns 技能，能幫助你做出更好的 Frontend Development 決策、減少不一致，並為每個頁面或元件套用最合適的模式。

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

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

用於 Vue 3 程式碼生成的 vue skill，涵蓋 Composition API、`<script setup lang="ts">`、macros、reactivity 與內建元件。可用來取得安裝指引並改善 vue 在 SFC、`defineProps`、`defineEmits`、`defineModel`、watchers、Transition、Teleport、Suspense 與 KeepAlive 等情境下的使用方式。

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

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

vue-router-best-practices 是一份聚焦 Vue Router 4 的實用指南，協助前端應用修正 navigation guards、route param 更新、元件狀態殘留、redirect loop，以及已棄用的 next() 用法等問題。

vue-pinia-best-practices 協助 Vue 3 團隊更安全地使用 Pinia，針對安裝時機、`storeToRefs` 用法、setup store 的 return 設計，以及 URL 與 store state 的取捨提供清楚指引。

vue-options-api-best-practices 可協助前端團隊在 Vue 3 中落實 Options API 最佳實務，修正 `this` 綁定與生命週期常見錯誤，並改善 props、computed、events 與 inject 用法的 TypeScript 型別品質，同時不必改用 Composition API。

vue-jsx-best-practices 可協助前端開發者寫出更符合 Vue 慣例的 Vue JSX 與 TSX，將 `className`、`htmlFor` 等 React 風格屬性改為更適合 Vue 的 HTML 屬性寫法。

vue-best-practices 是一套用於 Vue 3 的 skill，適合程式碼產生、審查與重構。它會引導代理採用 Composition API、`<script setup lang="ts">`、明確的資料流、具 SSR 意識的設計選擇，以及 reactivity、SFC、composables、Router、Pinia 與以 Vite 為基礎的應用程式核心參考。

vue-debug-guides 是一項專為 Vue 3 除錯設計的技能，可協助診斷執行階段錯誤、警告、非同步元件失敗、響應式問題，以及 SSR 或 hydration 不一致，並提供具針對性的參考式修正建議。

create-adaptable-composable 協助 Vue 3 與 Nuxt 3 開發者設計可重用的 composables，讓它們能接受一般值、refs、computed values 與 getters。重點在於根據情境選用 MaybeRef 或 MaybeRefOrGetter，並在 watch() 或 watchEffect() 內以 toValue() 或 toRef() 做正規化，讓響應式行為更一致、可預期。

這份 netlify-forms 指南說明如何在 Netlify 上處理 HTML 表單。可用來新增聯絡表單、意見回饋表單、檔案上傳、垃圾訊息過濾、AJAX 送出，以及自訂感謝頁，且不需要伺服器端程式碼。對 Backend Development 工作流程，以及需要在建置時偵測表單的 JS 渲染應用程式特別有幫助。