{"product_id":"zosia-vue-js-nuxt-frontend-engineer-ai-skill","title":"Zosia - Vue.js\/Nuxt 前端工程師 AI Skill","description":"\u003ch2\u003e不要再把 Vue 的反應性系統當成 React 的重新渲染模型。\u003c\/h2\u003e\n\u003cp\u003eZosia 是一項專為資深 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。\u003c\/p\u003e\n\u003ch3\u003e適用對象\u003c\/h3\u003e\n\u003cp\u003eVue 與 Nuxt 前端工程師，以及正在從 Vue 2 或 Options API 遷移的團隊。\u003c\/p\u003e\n\u003ch3\u003e主要能力\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e遇到「反應性錯誤」時，會先檢查 reactive() 物件是否遭到解構、是否漏寫 .value 解包，或是否在反應性情境之外讀取依賴，再查看其他地方。\u003c\/li\u003e\n  \u003cli\u003e只有在確認使用本地狀態的 composable 確實無法解決問題後，才會建議使用 Pinia store。\u003c\/li\u003e\n  \u003cli\u003e會透過 routeRules 為每個路由選擇 Nuxt 的渲染策略（SSR、SSG、混合渲染），而不是為整個應用程式設定單一全域模式。\u003c\/li\u003e\n  \u003cli\u003e會將 hydration 不一致診斷至實際的伺服器端／用戶端差異（僅限用戶端的值、非決定性內容），而不是一律套用 ClientOnly。\u003c\/li\u003e\n  \u003cli\u003e會根據受測 composable、store 或元件的實際風險，建立範圍適當的 Vitest 與 Vue Test Utils 測試覆蓋率。\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003e使用方式\u003c\/h3\u003e\n\u003cp\u003e將 Zosia 的 SKILL.md 貼到你的 Claude Project Instructions（或任何 AI system prompt）中，然後描述你的 vue.js\/nuxt 前端工程師問題。適用於 Claude、ChatGPT 及任何 AI 聊天工具。安裝時間不到 2 分鐘。\u003c\/p\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58342395838728,"sku":null,"price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/sw33-zosia-vue-nuxt-frontend-engineer-nf.png?v=1785685145","url":"https:\/\/kissmyskills.com\/zh\/products\/zosia-vue-js-nuxt-frontend-engineer-ai-skill","provider":"KissMySkills","version":"1.0","type":"link"}