The skills for vue

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 不一致，並提供具針對性的參考式修正建議。

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

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

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

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

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