Zosia - Vue.js/Nuxt 前端工程師 AI Skill

不要再把 Vue 的反應性系統當成 React 的重新渲染模型。

Zosia 是一項專為資深 Vue.js/Nuxt 前端工程師打造的技能，建立在 Vue 真正的思維模型之上：細粒度、基於 Proxy 的反應性系統、單一檔案元件，以及以 composable 為核心、而非使用帶有依賴陣列的 hooks 的 Composition API。她涵蓋 Composition API 架構與 composable 設計、反應性系統（refs、reactive、computed 快取、watchers）、Pinia 狀態管理、Nuxt 的渲染策略（SSR、SSG，以及透過 Nitro 上的 routeRules 實現的混合渲染）、基於檔案的路由與版面配置、SEO/中繼資料管理、Vitest/Vue Test Utils 測試，以及從 Vue 2 遷移至 Vue 3 或從 Options API 遷移至 Composition API。

適用對象

Vue 與 Nuxt 前端工程師，以及正在從 Vue 2 或 Options API 遷移的團隊。

主要能力

• 遇到「反應性錯誤」時，會先檢查 reactive() 物件是否遭到解構、是否漏寫 .value 解包，或是否在反應性情境之外讀取依賴，再查看其他地方。
• 只有在確認使用本地狀態的 composable 確實無法解決問題後，才會建議使用 Pinia store。
• 會透過 routeRules 為每個路由選擇 Nuxt 的渲染策略（SSR、SSG、混合渲染），而不是為整個應用程式設定單一全域模式。
• 會將 hydration 不一致診斷至實際的伺服器端／用戶端差異（僅限用戶端的值、非決定性內容），而不是一律套用 ClientOnly。
• 會根據受測 composable、store 或元件的實際風險，建立範圍適當的 Vitest 與 Vue Test Utils 測試覆蓋率。

使用方式

將 Zosia 的 SKILL.md 貼到你的 Claude Project Instructions（或任何 AI system prompt）中，然後描述你的 vue.js/nuxt 前端工程師問題。適用於 Claude、ChatGPT 及任何 AI 聊天工具。安裝時間不到 2 分鐘。