AI 輔助開發與 vue-skills

AI 已成為不少前端團隊的輔助工具。與其刻意迴避，不如學會將 AI 視為一位熟稔 Vue 的助手：藉此產生樣板、檢查寫法，或在遭遇瓶頸時指引方向。本節我們將介紹專為 Vue 打造的 AI 技能包 vue-skills，並釐清使用時應遵循的界線。

vue-skills 是什麼？

vue-skills 是社群維護、給 AI agent (例如 Claude Code) 使用的技能包，整理了 Vue 3 的實務慣例。它把 Vue 各領域的慣用寫法整理成一組技能，例如：

• vue-best-practices (Composition API、TypeScript 等通則)
• vue-router-best-practices（路由）
• vue-pinia-best-practices（狀態管理）
• vue-testing-best-practices（測試）
• create-adaptable-composable（組合式函式）

當我們請 AI 撰寫 Vue 程式碼並載入（或啟用）對應技能時，AI 較容易依照現代 Vue 慣例產生程式碼，但仍須人工檢查。

安裝與觸發

小提醒：以 vue-skills repo 為準

vue-skills 是持續演進的社群專案，安裝方式與技能名稱可能隨版本調整。以下為撰寫當下的用法，實際請以 vue-skills repo 的 README 為準。

依 repo 說明，常見安裝方式有兩種：

• Claude Code：透過其擴充功能市集 (Marketplace) 安裝。
• 一般 agent 框架：使用 npx skills add 安裝。

裝好之後，在對 AI 下指令時，可以使用「use vue skill」之類的觸發詞，並描述具體需求。例如：

use vue skill，幫我建立一個顯示待辦清單的元件

AI 就會依技能包的規範產生對應的 Vue 程式碼。

AI 只是輔助，人要比車兇！

AI 就跟櫻木花道的左手一樣只是輔助，真正做主、負責的還是我們自己。vue-skills 再方便，也只是輔助工作流，並非本書的規範來源。

• 本書所有範例與說明皆以 Vue 官方文件與本書範例準則為準；vue-skills 則作為「生成、檢查與程式碼審查 (Code Review)」的輔助工具。
• AI 產出採用前仍需人工閱讀與驗證，因為它可能提供看似正確、實則過時或含有錯誤的程式碼。
• 特別是版本相關的細節 (例如 Vue 3.5 的新語法)，AI 的訓練資料未必跟得上，更要對照官方文件確認。

在後續章節中，遇到適合的實作主題 (Router、Pinia、測試、組合式函式)，我們會用底下這種「AI 協作」小節示範怎麼搭配對應技能，並標明該自己檢查的重點：

AI 協作：用 vue skill 加速

情境：要建立一個購物車的 Pinia store。 做法：對 AI 下 use vue-pinia-best-practices，並描述需求。 AI 產出：store 的骨架，含 state、getters 與 actions。 人工驗證重點：state 是否正確、getters 是否為純函式、有沒有符合本書的命名與結構慣例。

---

到這裡，我們已經把現代 Vue 的開發環境 (Vite 專案、DevTools、編輯器、AI 輔助) 都準備好了。從下一章開始，我們就要正式進入 Vue 的核心，先從最基本的心智模型談起。