npm - @moon791017/neo-skills - Versions diffs - 1.1.2 → 1.1.4 - Mend

@moon791017/neo-skills 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/AGENTS.md +1 -1
package/README.md +47 -57
package/package.json +1 -1
package/skills/neo-vue/SKILL.md +109 -70
package/skills/neo-vue/assets/Vue3SFCComponentTemplate.vue +226 -0
package/skills/neo-vue/evals/eval_queries.json +42 -0
package/skills/neo-vue/evals/evals.json +29 -0
package/skills/neo-vue/evals/files/LegacyTodoItem.vue +50 -0
package/skills/neo-explain/SKILL.md +0 -39
package/skills/neo-start-plan/SKILL.md +0 -29
/package/skills/neo-vue/{reference → references}/anti-patterns.md +0 -0
/package/skills/neo-vue/{reference → references}/coding-style.md +0 -0
/package/skills/neo-vue/{reference → references}/patterns.md +0 -0

package/AGENTS.md CHANGED Viewed

@@ -32,7 +32,7 @@ Add or update tests whenever you change installer behavior, filesystem layout, o
 Follow the Conventional Commits pattern already used in history: `feat:`, `fix:`, `docs:`, `test(ci):`, `refactor(skills):`. Keep subjects short and imperative; add a scope when it clarifies impact. PRs against `develop` trigger the validation workflow, while merges to `main` feed the `release-please` release flow. In each PR, summarize behavior changes, list the commands you ran, and link the related issue when applicable.
 ## Security & Content Notes
-Do not commit secrets, sample credentials, or unsafe prompts. When updating a skill, keep its `SKILL.md`, references, and any user-facing docs aligned.
+Do not commit secrets, sample credentials, or unsafe prompts. When updating a skill, keep its `SKILL.md`, references, and any user-facing docs aligned. When deprecating or removing a skill, ensure the skill directory is completely deleted and all references are systematically scrubbed from project documentation (such as `README.md`) to maintain the agent's knowledge database hygiene.
 ---

package/README.md CHANGED Viewed

@@ -7,17 +7,17 @@
   <img src="images/banner.png" alt="leak-hunter repository secret scanner banner" width="100%">
 </p>
-**Neo Skills** 是一個專為現代 **AI Agent** 設計的**企業級全方位能力擴充套件**。本專案基於 Model Context Protocol (MCP) 與標準化代理治理架構 (Agent Harness)，為 AI 代理安裝高可靠、可插拔的「專家技能模組 (Skills)」，使其不僅僅是個聊天機器人，而是能深度融入本地開發與運維環境，轉化為具備「感知-推理-行動 (Perceive-Reason-Act)」自主決策能力的**跨領域專家**。
+**Neo Skills** 是專為 **AI Agent** 設計的技能擴充套件。本專案基於 Model Context Protocol (MCP) 與 Agent Harness 治理架構，提供高可靠、可插拔的「專家技能模組 (Skills)」，使 AI 代理具備「感知-推理-行動 (Perceive-Reason-Act)」自主決策能力，能深度融入本地開發與運維環境。
-無論是複雜的 DevOps 自動化（Azure Pipelines）、代碼品質安全審查、需求還原與分析釐清，或是多語系的現代化開發，Neo Skills 都能透過模組化的外部知識庫、AI 專用非互動式腳本與品質評估集 (Evals)，讓 AI 代理在安全、受控的 Harness 治理下，成為您最強大的全能數位助手。
+支援 DevOps 自動化（Azure Pipelines）、程式碼審查、需求釐清及多語言開發。透過模組化外部知識庫、非互動式腳本與品質評估集 (Evals)，確保 AI 代理在受控的 Harness 架構下安全執行。
-## 🚀 核心願景
+## 🚀 核心機制
-本專案作為 AI Agent 的「大腦皮層 (Cortex)」，旨在打造一個**全能型 Agent 框架**，透過以下機制提升 AI 的專業度：
+透過以下機制提升 AI 代理的執行可靠度與專業度：
-1. **領域專精 (Skills)**：可擴充的專家知識庫 (`SKILL.md`)。目前已內建 DevOps 模組，未來將持續擴增更多領域。
-2. **標準化範本 (Templates)**：提供預先驗證的自動化腳本與模板，確保產出的一致性與可靠性。
-3. **架構思維**：強制執行「感知 (Perceive) -> 推理 (Reason) -> 行動 (Act)」的決策迴圈，避免 AI 產生幻覺，確保解決方案的精準度。
+1. **領域技能 (Skills)**：基於 `SKILL.md` 規範的專家知識庫。
+2. **標準範本 (Templates)**：提供預先驗證的自動化腳本與模版，確保產出一致性。
+3. **Perceive-Reason-Act 迴圈**：強制執行「感知-推理-行動」決策流程，減少幻覺並提高解決方案精準度。
 ## ✨ 目前內建技能 (Built-in Skills)
@@ -27,18 +27,14 @@
 * **CI 自動化**：針對 .NET 專案生成建置管線，整合單元測試與構件發佈。
 * **CD 自動化**：
-  * **Azure App Service**：部署至Azure App Service。
+  * **Azure App Service**：部署至 Azure App Service。
   * **IIS On-Premises**：部署至地端 IIS 伺服器，包含備份與復原機制。
 ### 2. Code Review 專家
 * **智能審查**：針對程式碼變更進行多面向 (正確性、安全性、效能、可讀性) 的深度審查。
-### 3. 程式碼解釋助手
-* **技術解析**：深入分析原始碼或專案結構，提供高階用途摘要、邏輯流程分解以及核心元件說明。
-### 4. .NET / C# 開發專家
+### 3. .NET / C# 開發專家
 * **C# 現代語法專家 (`skills/neo-csharp`)**：跨版本 C# 專家 (10-14+)，專注於現代化語法、強型別與高效能開發模式。
 * **.NET 核心路由 (`skills/neo-dotnet`)**：環境偵測與統一入口，自動將任務委派給最合適的子領域專家。
@@ -49,44 +45,44 @@
 * **.NET Tag Helper 專家 (`skills/neo-dotnet-tag-helper`)**：開發 ASP.NET Core 自定義 Tag Helper 的專家指引，專注於純 C# 實作與異步渲染最佳實踐。
 * **Interface 生成器**：針對 C# Class 自動生成符合規範的 Interface，並支援智慧檔案覆蓋功能。
-### 5. Python 開發與環境管理專家
+### 4. Python 開發與環境管理專家
 * **Python 3.10+ 專家 (`skills/neo-python`)**：專注於 Python 3.10 至 3.14 的現代語法特性、型別安全與非同步開發。
 * **環境管理專家 (`skills/neo-python-manager`)**：智慧偵測與管理 Python 專案環境，支援 uv, Poetry, venv/pip 並提供自動化安裝建議。
-### 6. Swift 開發專家
+### 5. Swift 開發專家
 * **Swift 5.0+ 專家 (`skills/neo-swift`)**：支援從基礎語法到 Swift 6 的現代開發模式，涵蓋 SwiftUI、Structured Concurrency、記憶體安全以及高效能 App 開發指引。
 * **SwiftUI 專家 (`skills/neo-swift-ui`)**：支援 iOS 16.0+ 與 Swift 5.0+ 的現代開發模式，專注於 NavigationStack、Observation 框架、資料流架構及高效能視圖設計。
-### 7. JavaScript 開發專家
+### 6. JavaScript 開發專家
 * **JavaScript 現代語法專家 (`skills/neo-javascript`)**：跨版本 JavaScript 專家 (ES6 - ES2025+)，專注於現代化語法、模組系統與高效能開發模式。
-### 8. TypeScript 開發專家
+### 7. TypeScript 開發專家
 * **TypeScript 現代語法與型別安全 (`skills/neo-typescript`)**：專注於極致的型別安全、高可維護性與進階元程式設計（Meta-programming）。
   * **型別系統防線**：涵蓋進階條件型別 (Conditional Types)、映射型別 (Mapped Types) 與樣板字面值型別。
-  * **互通性與配置最佳化**：深入調校 `tsconfig.json` 編譯選項，並徹底解決複雜的 ESM/CJS 互通性陷阱與執行期崩潰問題。
+  * **互通性與配置最佳化**：深入調校 `tsconfig.json` 編譯選項，並解決複雜的 ESM/CJS 互通性與執行期問題。
   * **泛型約束設計**：引導設計高靈活度的泛型與變量 (Variance) 處理。
-### 9. Vue 開發專家
+### 8. Vue 開發專家
-* **Vue 3 現代開發專家 (`skills/neo-vue`)**：專注於 Vue 3 Composition API (`<script setup>`)、Pinia 狀態管理與 Vue Router 4。嚴格遵循官方 Style Guide 與最佳實踐，並提供反模式 (Anti-Patterns) 的避坑指引。
+* **Vue 3 現代開發專家 (`skills/neo-vue`)**：專注於 Vue 3 Composition API (`<script setup>`)、Pinia 狀態管理與 Vue Router 4。遵循官方 Style Guide 與最佳實踐，並提供反模式 (Anti-Patterns) 避坑指引。
-### 10. Rust 開發專家
+### 9. Rust 開發專家
 * **Rust 專家 (`skills/neo-rust`)**：用於開發、重構或審查 Rust 應用程式的專家技能，涵蓋 ownership、borrowing、Result/Option 與現代 Rust 設計模式。
-### 11. 需求釐清助手
+### 10. 需求釐清助手
 * **需求釐清**：系統化引導用戶釐清模糊需求，並將其轉化為結構化的規格文件（背景、功能、約束、驗收標準）。
-### 12. AI 開發流程健檢
+### 11. AI 開發流程健檢
-* **AI 助手開發治理 (`skills/neo-agent-harness`)**：檢查專案規則、測試、CI、審查流程與安全防護是否足夠清楚，協助 AI 助手更穩定、更安全地參與開發。
+* **AI 助手開發治理 (`skills/neo-agent-harness`)**：檢查專案規則、測試、CI、審查流程與安全防護，協助 AI 助手更穩定地參與開發。
-### 13. AI Tells / Slop 贅詞消除專家
+### 12. AI Tells / Slop 贅詞消除專家
 * **文字去 AI 腔調 (`skills/neo-stop-slop`)**：消除中英文 AI 腔、贅詞與公式化囉唆句式，還原為乾淨、生動且簡煉的自然語言，並包含工程師註解、Git Commit 及 PR 說明的特化優化。
@@ -100,15 +96,13 @@
 ## 📦 安裝與使用
-Neo Skills 已全面升級並支援專屬的極簡安裝器，同時相容於 [agentskills.io](https://agentskills.io) 官方推薦的 **Agent Skills 開源標準規範**。
-根據您的使用場景，可以選擇以下兩種最適合您的安裝方式：
+Neo Skills 相容於 [agentskills.io](https://agentskills.io) 標準規範。提供以下兩種安裝方式：
 ---
-### 一、一鍵同步全域技能（Antigravity CLI 專用，推薦）
+### 一、全域安裝（Antigravity CLI 專用，推薦）
-如果您使用的是 **Antigravity CLI**，建議使用專門設計的 `neo-skills` 安裝工具（舊稱 `install-skills`）。這是一個極簡化的工具，會一鍵將本專案所有的專家技能，複製到您的全域路徑 `~/.gemini/antigravity-cli/skills` 中，同時自動過濾無關檔案（如 `.git`、`node_modules`、`.DS_Store` 等）。
+將本專案所有技能同步至 Antigravity 全域路徑 `~/.gemini/antigravity-cli/skills`，並自動過濾無關檔案（如 `.git`、`node_modules` 等）。
 #### 透過 npx 直接執行：
 ```bash
@@ -116,31 +110,29 @@ npx -y @moon791017/neo-skills@latest
 ```
 #### 本地開發手動安裝：
-如果您已複製本專案至本地，也可以直接在專案根目錄下執行：
+在專案根目錄下執行：
 ```bash
 node bin/install-skills.js
 ```
 ---
-### 二、使用標準 Skills CLI 安裝（通用於專案或其他 AI Agent）
+### 二、使用標準 Skills CLI 安裝（適用於其他相容 Agent）
-針對其他支援 [agentskills.io](https://agentskills.io) 標準規範的 AI 代理（如 Claude Code, Cursor, Copilot 等），您可以使用標準的 `skills` 包管理器。預設會安裝至當前專案，**若您希望將技能安裝至全域路徑，只需在指令後方加上 `-g` 參數**。
+適用於 Claude Code、Cursor、Copilot 等相容 Agent。預設安裝至當前專案，加上 `-g` 參數可安裝至全域.
-#### 1. 專案一鍵安裝所有技能（免互動勾選）：
+#### 專案一鍵安裝所有技能：
 ```bash
 npx skills add Benknightdark/neo-skills --all
 ```
 > [!TIP]
-> * **全域一鍵安裝**：若要將所有技能安裝至標準全域路徑下，只需加上 `-g`：`npx skills add Benknightdark/neo-skills --all -g`。
-> * **命令行指定**：若只需安裝特定 Skill，可以使用 `--skill <名稱>`（例如 `npx skills add Benknightdark/neo-skills --skill neo-typescript,neo-vue`）。
-#### 💡 終端機互動選單操作小秘訣：
-如果您執行了不帶 `--all` 的預設互動選單命令 `npx skills add Benknightdark/neo-skills`：
-1. **一鍵全選 (Select All)**：在選單畫面中直接按下鍵盤上的 **`a`** 鍵，即可立刻自動勾選所有的技能！
-2. **反向選取 (Invert Selection)**：按下鍵盤上的 **`i`** 鍵，反向切換目前的所有勾選狀態。
-3. **確認送出**：全選後按下 `Enter` 鍵即可一次完成安裝。
+> * **全域一鍵安裝**：`npx skills add Benknightdark/neo-skills --all -g`
+> * **安裝特定技能**：`npx skills add Benknightdark/neo-skills --skill neo-typescript,neo-vue`
+> * **互動選單快捷鍵**（執行不帶 `--all` 的指令時）：
+>   * `a`：全選所有技能
+>   * `i`：反向選取
+>   * `Enter`：確認並安裝
 ---
@@ -168,19 +160,18 @@ npx skills add Benknightdark/neo-skills --all
 | **16. Rust 開發專家** | `npx skills add Benknightdark/neo-skills --skill neo-rust` |
 | **17. DevOps (Azure Pipelines) 架構師** | `npx skills add Benknightdark/neo-skills --skill neo-azure-pipelines` |
 | **18. Code Review 專家** | `npx skills add Benknightdark/neo-skills --skill neo-code-review` |
-| **19. 程式碼解釋助手** | `npx skills add Benknightdark/neo-skills --skill neo-explain` |
-| **20. 需求分析與釐清助手** | `npx skills add Benknightdark/neo-skills --skill neo-clarification` |
-| **21. AI 開發流程治理專家** | `npx skills add Benknightdark/neo-skills --skill neo-agent-harness` |
-| **22. AI Tells/Slop 消除專家** | `npx skills add Benknightdark/neo-skills --skill neo-stop-slop` |
+| **19. 需求分析與釐清助手** | `npx skills add Benknightdark/neo-skills --skill neo-clarification` |
+| **20. AI 開發流程治理專家** | `npx skills add Benknightdark/neo-skills --skill neo-agent-harness` |
+| **21. AI Tells/Slop 消除專家** | `npx skills add Benknightdark/neo-skills --skill neo-stop-slop` |
 ---
 ### 四、安裝系統提示詞 (`install-system-instructions`)
 > [!IMPORTANT]
-> **獨家加值特色功能**：由於 [agentskills.io](https://agentskills.io) 標準僅處理 `.agents/skills` 專案技能的目錄同步，**並未提供將核心系統提示詞（System Instructions）附加至 AI 代理引導檔** 的功能。
+> **系統提示詞同步**：[agentskills.io](https://agentskills.io) 規格僅處理技能目錄同步，不包含引導檔（System Instructions）的配置。
 >
-> 為了解決這個問題，Neo Skills 專門保留並提供強大的系統提示詞安裝器 `install-system-instructions`。此 CLI 工具會自動掃描、建立，並在不破壞您既有檔案內容的前提下，將專家提示詞完美附加或更新至各 AI 代理的專屬引導檔中。
+> 本專案提供 `install-system-instructions` 工具，可自動掃描並在保留既有內容的前提下，將系統提示詞附加或更新至各 AI 代理的引導檔中。
 **語法：**
@@ -233,17 +224,16 @@ npx -p @moon791017/neo-skills install-system-instructions --ai-agent claude --in
 您可以根據不同的開發與維運需求場景，快速安裝對應的專家技能，並直接對 AI 代理下達相關指令：
-| 需求場景 | 所需專家技能 | 快速安裝指令 | 推薦咒語範例 |
+| 需求場景 | 所需專家技能 | 快速安裝指令 | 推薦指令範例 |
 | :--- | :--- | :--- | :--- |
-| **設定 .NET CI Pipeline** | `neo-azure-pipelines` | `npx skills add Benknightdark/neo-skills --skill neo-azure-pipelines` | `幫這個專案設定 CI 流程` |
+| **設定 .NET CI Pipeline** | `neo-azure-pipelines` | `npx skills add Benknightdark/neo-skills --skill neo-azure-pipelines` | `設定 CI 流程` |
 | **部署至 IIS On-Premises** | `neo-azure-pipelines` | `npx skills add Benknightdark/neo-skills --skill neo-azure-pipelines` | `部署到 IIS，站台名稱為 MySite` |
-| **全方位程式碼深度審查** | `neo-code-review` | `npx skills add Benknightdark/neo-skills --skill neo-code-review` | `幫我 code review 剛才的修改` |
-| **技術解析與架構洞察** | `neo-explain` | `npx skills add Benknightdark/neo-skills --skill neo-explain` | `分析這個專案的架構` |
-| **生成 C# Interface 介面** | `neo-csharp-interface-generator` | `npx skills add Benknightdark/neo-skills --skill neo-csharp-interface-generator` | `幫我針對這個 class 產生介面` |
-| **TS 型別設計與 CJS/ESM 互通** | `neo-typescript` | `npx skills add Benknightdark/neo-skills --skill neo-typescript` | `解決 tsconfig 還有 ESM/CJS 互通性的問題` |
-| **複雜/模糊需求釐清與規格化** | `neo-clarification` | `npx skills add Benknightdark/neo-skills --skill neo-clarification` | `我想做一個電商網站` |
-| **AI 助手開發治理與流程健檢** | `neo-agent-harness` | `npx skills add Benknightdark/neo-skills --skill neo-agent-harness` | `幫我檢查這個專案怎麼讓 AI 助手開發得更穩、更安全` |
-| **清除文案/註解/Commit 中的 AI 腔** | `neo-stop-slop` | `npx skills add Benknightdark/neo-skills --skill neo-stop-slop` | `消除這段話裡的 AI 腔贅詞，使其極簡直接` |
+| **全方位程式碼深度審查** | `neo-code-review` | `npx skills add Benknightdark/neo-skills --skill neo-code-review` | `進行 Code Review` |
+| **生成 C# Interface 介面** | `neo-csharp-interface-generator` | `npx skills add Benknightdark/neo-skills --skill neo-csharp-interface-generator` | `為這個 class 生成介面` |
+| **TS 型別設計與 CJS/ESM 互通** | `neo-typescript` | `npx skills add Benknightdark/neo-skills --skill neo-typescript` | `解決 tsconfig 與 ESM/CJS 互通性問題` |
+| **複雜/模糊需求釐清與規格化** | `neo-clarification` | `npx skills add Benknightdark/neo-skills --skill neo-clarification` | `規劃一個電商網站` |
+| **AI 助手開發治理與流程健檢** | `neo-agent-harness` | `npx skills add Benknightdark/neo-skills --skill neo-agent-harness` | `評估 AI 開發治理流程` |
+| **清除文案/註解/Commit 中的 AI 腔** | `neo-stop-slop` | `npx skills add Benknightdark/neo-skills --skill neo-stop-slop` | `消除這段話的 AI 腔贅詞` |
 ## 🛠 開發與測試指南

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@moon791017/neo-skills",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "type": "module",
   "description": "Neo Skills: A Universal Expert Agent Extension",
   "homepage": "https://neo-blog-iota.vercel.app/",

package/skills/neo-vue/SKILL.md CHANGED Viewed

@@ -1,74 +1,113 @@
 ---
 name: neo-vue
-version: "1.0.0"
-category: "Core"
-description: "Modern Vue 3 expert skill. Supports comprehensive applications from Composition API to Pinia and Vue Router, and strictly follows the official Vue Style Guide to ensure code quality and style consistency."
-compatibility: "Supports Vue 3.x (Composition API), Pinia, and Vue Router 4. Adaptive to modern frontend build tools like Vite."
+description: >
+  當建置、調試、重構或審查 Vue.js 應用程式、Vue 3 單一檔案元件 (SFC)、Pinia 狀態管理或 Vue Router 配置時使用此技能。
+  當專案包含 *.vue 檔案，或使用者提及「Vue」、「Pinia」、「Composition API」或「Vue Router」時觸發，
+  即使他們沒有明確要求 Vue 專家也適用。
+license: MIT
+compatibility: 支援 Vue 3.x (Composition API), Pinia 2.x, Vue Router 4.x, 以及 Vite 與 TypeScript。
+metadata:
+  author: Antigravity Team
+  version: "1.1.0"
+  pattern: tool-wrapper-reviewer
 ---
-# Modern Vue 3 Expert Skill
-## Trigger On
-- The user asks to write, debug, refactor, or review Vue.js code.
-- The project directory contains `*.vue`, `*.ts`/`*.js` files specifically importing Vue APIs, or Vue-related configuration files (e.g., `vite.config.ts`, `vue.config.js`).
-- The user wants to implement state management using Pinia.
-- The user wants to configure routing using Vue Router.
-- The user asks for a code review on existing Vue code or architecture.
-## Workflow
-1. **Perceive (Environment Awareness):**
-   - Inspect project configuration (`package.json`, `vite.config.ts`) to identify Vue version (Vue 3 vs Vue 2) and tooling (Vite, TypeScript, ESLint, Prettier).
-   - Identify if the file is a Single-File Component (`.vue`), a composable (`useX.ts`), a store (`store.ts`), or router configuration.
-   - Detect the presence of Pinia or Vue Router in the project dependencies.
-2. **Reason (Planning Phase):**
-   - Evaluate the modernization level of the current code. If Vue 2 Options API is used, plan for refactoring to Vue 3 Composition API with `<script setup>`.
-   - Mentally load the rules from `references/coding-style.md` and `references/anti-patterns.md` to ensure component naming (PascalCase), structure, and reactivity are correct.
-   - Mentally load the best practices from `references/patterns.md` to plan architecture, utilizing `ref` over `reactive`, and extracting logic into composables.
-3. **Act (Execution Phase):**
-   - Write high-quality, idiomatic Vue 3 code using `<script setup>` syntax.
-   - Strictly follow component naming conventions (multi-word, `Base`/`The` prefixes) and structure (props validation, self-closing tags).
-   - Implement state using Pinia Setup Stores and handle routing with Named Routes.
-4. **Validate (Standard Validation):**
-   - Validate that directive shorthands (`:`, `@`, `#`) are used consistently.
-   - Check that `computed` properties are pure and free of side effects.
-   - Ensure that props are not mutated directly.
-   - Verify that arrays iterated with `v-for` have stable and unique `key`s, and `v-if` is not used on the same element as `v-for`.
-## Feature Roadmap (Vue 3 Core Features)
-- **Composition API:** `<script setup>` for clean, boilerplate-free component authoring.
-- **Reactivity:** `ref`, `reactive`, `computed`, `watch`, and `watchEffect` for explicit state management.
-- **Macros:** `defineProps`, `defineEmits`, `defineExpose`, `defineOptions`, `defineModel` (Vue 3.4+) for compiler-aware declarations.
-- **Composables:** Extracting and reusing stateful logic across components (e.g., `useFetch`, `useAuth`).
-- **Teleport:** Render components outside the main DOM hierarchy (e.g., for modals or tooltips).
-- **Suspense:** Handle asynchronous dependencies in the component tree gracefully.
-- **Pinia:** State management using Setup Stores instead of Vuex.
-- **Vue Router 4:** Modern routing utilizing Composition API hooks (`useRouter`, `useRoute`).
-## Coding Standards
-- **Component Naming:** Always use multi-word PascalCase for `.vue` files and component references in templates (e.g., `TodoItem.vue`, `<TodoItem />`).
-- **Setup Script:** ALWAYS use `<script setup>` for new Vue components. Use TypeScript (`lang="ts"`) where possible.
-- **Reactivity:** Prioritize `ref` over `reactive` for local state to maintain consistency in accessing values via `.value`.
-- **Props and Emits:** Define Props and Emits strictly with type annotations using `defineProps<{ ... }>()` and `defineEmits<{ ... }>()`.
-- **CSS Scoping:** Use `<style scoped>` or CSS Modules to prevent global style leakage.
-## Deliver
-- **Modern Architecture:** Provide Vue 3 Composition API-based solutions utilizing modern features and TypeScript.
-- **Refactoring Insights:** Provide actionable suggestions to upgrade legacy Options API code to Composition API or Vuex to Pinia.
-- **Style Compliance:** Ensure all delivered code adheres to the official Vue Style Guide (Priority A & B).
-## Validate
-- Ensure the provided code complies with Vue 3 syntax and best practices.
-- Validate the avoidance of common anti-patterns (e.g., mutating props, side-effects in `computed`, missing `key` in `v-for`).
-- Confirm the code is robust, readable, and properly utilizes Vue's reactivity system.
-## Documentation
-### Official References
-- [Vue 3 Documentation](https://vuejs.org/guide/introduction.html)
-- [Vue Style Guide](https://vuejs.org/style-guide/)
-- [Pinia Documentation](https://pinia.vuejs.org/)
-- [Vue Router Documentation](https://router.vuejs.org/)
-### Internal References
-- [Vue Coding Style and Naming Conventions Guide](reference/coding-style.md)
-- [Vue Anti-Patterns and Best Practices](reference/anti-patterns.md)
-- [Modern Vue Architecture Patterns Guide](reference/patterns.md)
+# Modern Vue 3 & Pinia 開發專家 (neo-vue)
+本技能旨在為 Agent 提供現代 Vue 3 (Composition API) 與 Pinia 狀態管理的開發與審查指南。它能確保產出的代碼完全符合官方 Vue Style Guide（優先級 A 與 B 級）的最佳實踐，避免常見的響應性陷阱（Reactivity Gotchas），並生成具備高質感與強型別的單一檔案元件（SFC）。
+## Gotchas
+*   **解構 reactive 物件導致響應性丟失**：禁止直接解構 `props` 或由 `reactive()` 定義的物件（例如：`const { name } = props` 或 `const { x } = state`），這會徹底失去 Vue 響應式追蹤！
+    *   **防錯機制**：必須使用 `toRefs(props)` 或 `toRef(props, 'name')` 來保持其響應性。
+*   **解構 Pinia Store 導致狀態響應性丟失**：直接解構 Pinia store 的 state（如 `const { user } = useAuthStore()`）會使 state 失去雙向響應！
+    *   **防錯機制**：必須使用 `storeToRefs(store)` 來解構 state；而 action 則可以直接正常解構。
+*   **v-model 手動繁瑣綁定**：在 Vue 3.4 之前，自定義雙向綁定需要手動宣告 `modelValue` 屬性並觸發 `update:modelValue` 事件，這對 AI 而言極易寫錯。
+    *   **防錯機制**：在 Vue 3.4+ 專案中，**強烈推薦**使用 `defineModel()` 巨集進行聲明，這會自動為您處理好屬性與事件，極大簡化程式碼。
+*   **v-if 與 v-for 在同一節點混用**：在 Vue 3 中，`v-if` 的優先級高於 `v-for`，這意味著 `v-if` 的條件判斷**無法**存取到 `v-for` 迴圈中的變數，會直接導致編譯或執行期報錯！
+    *   **防錯機制**：永遠使用 `<template>` 標籤包裹 `v-for`，再於內部子節點使用 `v-if`，或者預先使用 `computed` 計算屬性對陣列進行過濾。
+## Workflow Checklist
+Progress:
+- [ ] 步驟 1：感知專案環境與依賴 (Perceive Setup & Tooling)
+- [ ] 步驟 2：載入編碼規範與踩坑指南 (Load Guides & Best Practices)
+- [ ] 步驟 3：架構推理與響應式規劃 (Reasoning & Architecture)
+- [ ] 步驟 4：套用範本生成高品質代碼 (Generate SFC & Stores)
+- [ ] 步驟 5：程式碼健檢與自我校對 (Code Quality Review)
+---
+## Detailed Guidelines
+### 步驟 1 — 感知專案環境與依賴 (Perceive)
+1.  **檢查依賴配置**：讀取 `package.json`，確定 Vue 版本（確認為 Vue 3.x）以及是否安裝了 `pinia`、`vue-router`。
+2.  **識別建置工具與語言**：確認是否為 Vite 專案，以及是否啟用了 TypeScript（`lang="ts"`）與 Scoped CSS。
+### 步驟 2 — 載入編碼規範與踩坑指南 (Reason)
+在進行 Vue 3 開發或審查前，**必須動態載入深度知識庫**：
+1.  讀取 `references/coding-style.md` 以確認組件命名（必須為多字詞 PascalCase）、屬性定義等官方優先級規範。
+2.  讀取 `references/anti-patterns.md` 以避開 props mutation、computed 副作用等反模式。
+3.  讀取 `references/patterns.md` 以獲得 Composables 的合理拆分與 Pinia Setup Stores 的架構設計。
+### 步驟 3 — 架構推理與響應式規劃 (Reason)
+在編寫程式碼前，先思考以下設計：
+1.  **Reactivity 選擇**：除非是多個屬性需要高度關聯的複雜物件，否則**優先使用 `ref()`** 而不是 `reactive()`，以確保存取 `.value` 的一致性並避免解構失活。
+2.  **狀態下沉**：評估狀態是屬於組件局部狀態（用 `ref`）還是全局狀態（用 `Pinia Setup Store`）。
+### 步驟 4 — 套用範本生成高品質代碼 (Act)
+1.  **SFC 結構**：新建立的元件必須使用 `<script setup>` 語法，並強烈推薦加入 `lang="ts"`。
+2.  **套用範本**：讀取並參考 `assets/Vue3SFCComponentTemplate.vue` 作為高質感、標準 Vue 3 元件的排版範例。
+3.  **強制語言與風格**：所有程式碼註解、說明必須使用 **Traditional Chinese (Taiwan)**。專用術語需對齊（例如：元件、屬性、狀態管理、響應式、雙向綁定、計算屬性）。
+### 步驟 5 — 程式碼健檢與自我校對 (Act)
+1.  確認沒有在 `computed` 中做任何 state 修改或 API 調用等 Side Effects。
+2.  確認沒有直接對 `props` 進行賦值與修改。
+3.  確認 `v-for` 的 `key` 綁定使用了穩定的唯一 ID，而不是陣列索引 `index`。
+---
+## Output Templates
+在生成新組件時，請嚴格按照以下高質感結構輸出（更多實作細節請參閱 `assets/Vue3SFCComponentTemplate.vue`）：
+```vue
+<template>
+  <div class="vue-expert-component">
+    <!-- 模板內容 -->
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+// 1. 定義屬性與事件 (Props, Emits, Models)
+const props = defineProps<{
+  title: string;
+}>();
+const emit = defineEmits<{
+  (e: 'change', value: string): void;
+}>();
+// Vue 3.4+ 雙向綁定巨集
+const modelValue = defineModel<string>();
+// 2. 狀態定義 (State)
+const count = ref(0);
+// 3. 計算屬性 (Computed)
+const doubleCount = computed(() => count.value * 2);
+// 4. 方法定義 (Methods)
+function handleAction() {
+  emit('change', 'action-triggered');
+}
+</script>
+<style scoped>
+/* 必須使用 scoped 以免全域樣式污染，並優先選用 class 選擇器 */
+.vue-expert-component {
+  display: flex;
+  flex-direction: column;
+}
+</style>
+```

package/skills/neo-vue/assets/Vue3SFCComponentTemplate.vue ADDED Viewed

@@ -0,0 +1,226 @@
+<template>
+  <div class="neo-card-container">
+    <header class="neo-card-header">
+      <h3 class="neo-card-title">{{ title }}</h3>
+      <span v-if="badge" class="neo-badge">{{ badge }}</span>
+    </header>
+    <main class="neo-card-body">
+      <p class="neo-card-description">
+        <slot name="description">這是預設的卡片描述內容。</slot>
+      </p>
+      <div class="neo-interactive-section">
+        <button
+          class="neo-btn neo-btn-primary"
+          :disabled="isLoading"
+          @click="handleAction"
+        >
+          <span v-if="isLoading" class="neo-spinner"></span>
+          {{ buttonText }}
+        </button>
+        <!-- 雙向綁定輸入框範例 -->
+        <input
+          v-model="inputValue"
+          type="text"
+          class="neo-input"
+          placeholder="請輸入內容..."
+        />
+      </div>
+    </main>
+    <footer class="neo-card-footer">
+      <span class="neo-footer-text">點擊次數：{{ clickCount }} (雙倍: {{ doubleClickCount }})</span>
+    </footer>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+// ==========================================
+// 1. 屬性 (Props) 定義 — 嚴格使用強型別聲明
+// ==========================================
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    badge?: string;
+    buttonText?: string;
+    isLoading?: boolean;
+  }>(),
+  {
+    badge: '',
+    buttonText: '確定',
+    isLoading: false
+  }
+);
+// ==========================================
+// 2. 事件 (Emits) 定義 — 嚴格使用強型別聲明
+// ==========================================
+const emit = defineEmits<{
+  (e: 'action', clickCount: number): void;
+  (e: 'update:input', value: string): void;
+}>();
+// ==========================================
+// 3. 雙向綁定 (Model) 定義 — Vue 3.4+ 推薦做法
+// ==========================================
+const inputValue = defineModel<string>({ default: '' });
+// ==========================================
+// 4. 響應式狀態 (State) 定義 — 優先選用 ref 以維持一致性
+// ==========================================
+const clickCount = ref(0);
+// ==========================================
+// 5. 計算屬性 (Computed) 定義 — 必須為純函式，無 Side Effects
+// ==========================================
+const doubleClickCount = computed(() => clickCount.value * 2);
+// ==========================================
+// 6. 方法 (Methods) 定義
+// ==========================================
+function handleAction() {
+  clickCount.value++;
+  emit('action', clickCount.value);
+}
+</script>
+<style scoped>
+/* ==========================================
+   CSS 樣式設計 — 優先使用 class 選擇器以保證效能，並採用質感配色
+   ========================================== */
+:root {
+  --primary-color: #3eaf7c;
+  --primary-hover: #4abf8a;
+  --bg-color: #ffffff;
+  --border-color: #e2e8f0;
+  --text-primary: #2d3748;
+  --text-secondary: #718096;
+}
+.neo-card-container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color, #ffffff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  transition: all 0.2s ease-in-out;
+  max-width: 400px;
+}
+.neo-card-container:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+}
+.neo-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.neo-card-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary, #2d3748);
+  margin: 0;
+}
+.neo-badge {
+  background-color: #e6fffa;
+  color: #319795;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: 9999px;
+}
+.neo-card-body {
+  margin-bottom: 20px;
+}
+.neo-card-description {
+  font-size: 0.95rem;
+  color: var(--text-secondary, #718096);
+  line-height: 1.5;
+  margin: 0 0 16px 0;
+}
+.neo-interactive-section {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.neo-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out;
+}
+.neo-btn-primary {
+  background-color: var(--primary-color, #3eaf7c);
+  color: white;
+}
+.neo-btn-primary:hover:not(:disabled) {
+  background-color: var(--primary-hover, #4abf8a);
+}
+.neo-btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.neo-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+.neo-input:focus {
+  border-color: var(--primary-color, #3eaf7c);
+}
+.neo-card-footer {
+  border-top: 1px solid var(--border-color, #e2e8f0);
+  padding-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+.neo-footer-text {
+  font-size: 0.8rem;
+  color: var(--text-secondary, #718096);
+}
+/* Spinner CSS */
+.neo-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: white;
+  animation: spin 0.8s linear infinite;
+  margin-right: 8px;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>

package/skills/neo-vue/evals/eval_queries.json ADDED Viewed

@@ -0,0 +1,42 @@
+[
+  {
+    "query": "請幫我寫一個 Vue 3 SFC 元件，要用 TypeScript 和 <script setup>",
+    "should_trigger": true
+  },
+  {
+    "query": "How to create a global state using Pinia Setup Store? Show me an example.",
+    "should_trigger": true
+  },
+  {
+    "query": "我的 Vue 元件 props 在子組件被修改時報錯，這該怎麼修正？",
+    "should_trigger": true
+  },
+  {
+    "query": "幫我看看這個 Vue 2 Options API 組件怎麼重構成 Vue 3 Composition API",
+    "should_trigger": true
+  },
+  {
+    "query": "請幫我配置 Vue Router 4 的動態路由與導航守衛 (Navigation Guards)",
+    "should_trigger": true
+  },
+  {
+    "query": "Why does destructuring my Pinia store break reactivity?",
+    "should_trigger": true
+  },
+  {
+    "query": "請用 React 撰寫一個購物車元件，並使用 useState 管理狀態",
+    "should_trigger": false
+  },
+  {
+    "query": "如何在 React 中利用 Context API 解構狀態並避免無意義重新渲染？",
+    "should_trigger": false
+  },
+  {
+    "query": "請幫我寫一個 SQL Query，查詢 orders 表中所有已完成的訂單",
+    "should_trigger": false
+  },
+  {
+    "query": "幫我配置一個 Dockerfile，用來部署 Nginx 靜態網站",
+    "should_trigger": false
+  }
+]

package/skills/neo-vue/evals/evals.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+  "skill_name": "neo-vue",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "請幫我把這個舊的 Vue 2 Options API 元件重構為 Vue 3 Composition API 與 TypeScript 強型別組件，並特別避開 props 雙向修改的反模式。",
+      "expected_output": "產出一個完美遵循 Vue 3.4+ 最佳實踐的 SFC 組件。使用 `<script setup lang="ts">`，以 `defineProps` 嚴格宣告屬性，並以 `defineEmits` 或 `defineModel` 來替代 props 直接修改。",
+      "files": [
+        "skills/neo-vue/evals/files/LegacyTodoItem.vue"
+      ],
+      "assertions": [
+        "The output component uses <script setup lang=\"ts\">",
+        "The output strictly avoids mutating props directly",
+        "The output uses defineModel or typed defineEmits for parent communication",
+        "The styling block uses scoped to prevent style leakage"
+      ]
+    },
+    {
+      "id": 2,
+      "prompt": "請幫我設計一個 Pinia setup store 用於管理使用者購物車狀態，並寫一個購物車明細元件，示範如何安全地解構 store 的狀態而不遺失響應性。",
+      "expected_output": "提供一個 Pinia setup store 檔案，以及一個購物車組件。組件中使用 `storeToRefs` 解構 store 的 state，以保持響應性；直接解構 actions。",
+      "assertions": [
+        "The store is structured as a Pinia Setup Store (using ref and computed instead of state and getters)",
+        "The component uses storeToRefs to safely destructure states from store",
+        "The code uses TypeScript for shopping cart items validation"
+      ]
+    }
+  ]
+}

package/skills/neo-vue/evals/files/LegacyTodoItem.vue ADDED Viewed

@@ -0,0 +1,50 @@
+<!-- 遺留的 Vue 2 / Options API 元件，具有多項典型反模式 -->
+<template>
+  <div class="todo-item">
+    <input type="checkbox" v-model="todo.completed" @change="statusChanged" />
+    <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
+    <button @click="deleteItem">刪除</button>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LegacyTodoItem',
+  props: {
+    // 雖然宣告了 props，但是在 template 中使用 v-model="todo.completed"
+    // 這直接修改了 props 傳入的物件屬性，違反了 props 單向資料流
+    todo: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    statusChanged() {
+      // 潛在隱患：直接修改 props 物件內部屬性
+      this.todo.completed = !this.todo.completed;
+      this.$emit('status-change', this.todo);
+    },
+    deleteItem() {
+      // 潛在隱患：隱式地通過父元件屬性方法直接刪除，或是直接操作
+      if (this.$parent) {
+        this.$parent.todos = this.$parent.todos.filter(t => t.id !== this.todo.id);
+      }
+    }
+  }
+}
+</script>
+<style>
+/* 潛在隱患：未使用 scoped，且直接使用 button 全域選擇器，引發嚴重的全域樣式污染 */
+.todo-item {
+  display: flex;
+  align-items: center;
+}
+.completed {
+  text-decoration: line-through;
+}
+button {
+  margin-left: auto;
+  color: red;
+}
+</style>

package/skills/neo-explain/SKILL.md DELETED Viewed

@@ -1,39 +0,0 @@
----
-name: neo-explain
-description: 分析原始碼或專案結構，提供技術解析與架構洞察。
----
-# Project Code Explanation Specification
-## Perceive
-1. Intercept the standard input (stdin) or file arguments passed via the CLI command.
-2. Detect the file context by reading the specified file paths or the current working directory.
-3. Identify programming languages through file extensions or shebang lines.
-4. Capture optional flags such as `--all` or specific line ranges to define the scope of analysis.
-## Reason
-1. Structural Parsing: Map the relationships between variables, functions, and classes within the provided context.
-2. Logic Synthesis: Consolidate fragmented code segments into a coherent operational flow.
-3. Contextual Inference: Evaluate how the specific code block interacts with standard libraries or identified project dependencies.
-4. Documentation Alignment: Compare the implementation against common design patterns to explain "why" the code is structured in its current form.
-## Act
-### Output Language
-All output must be in **Traditional Chinese (Taiwan)**.
-### Output Format
-Structure the response using the following hierarchy:
-#### 📝 Summary
-High-level purpose and core objectives of the code.
-#### ⚙️ Logic Flow
-Step-by-step breakdown of execution, explaining data flow or control flow.
-#### 🧩 Key Components
-Definitions of primary symbols, classes, or functions and their roles.
-### Additional Rules
-1. Apply syntax highlighting to any code blocks included within the explanation.
-2. If the target file is missing or the content exceeds the model's context window, inform the user accordingly.

package/skills/neo-start-plan/SKILL.md DELETED Viewed

@@ -1,29 +0,0 @@
----
-name: neo-start-plan
-description: 分析需求與專案現況，並生成詳細的開發執行計畫。
----
-# Development Execution Planning Specification
-## Perceive
-1. **Context Gathering**: Systematically map the codebase using search tools (`grep_search`, `glob`) to understand file structures and existing patterns.
-2. **Constraint Check**: Identify coding styles, configuration files (e.g., `package.json`, `gemini-extension.json`), and framework dependencies.
-3. **Mandatory Deep Dive**: Validate all assumptions by reading relevant file contents. Do not skip this step.
-## Reason
-1. **Gap Analysis**: Clearly define the delta between the current codebase state and the user's desired state.
-2. **Architectural Fit**: Ensure the proposed solution aligns with the established architecture (e.g., separating logic into `skills/`).
-3. **Risk Assessment**: Identify potential breaking changes, ambiguous requirements, or side effects.
-4. **Dependency Chain**: Determine the strictly logical order of operations (e.g., "Create directory before creating file").
-## Act
-1. **Structure the Plan**: Present the plan to the user in **Traditional Chinese (Taiwan)** using the following mandatory sections:
-   - **🧐 現況分析 (Context Analysis)**: Relevant files and architectural overview.
-   - **🎯 執行目標 (Objectives)**: Concise summary of the mission.
-   - **🛠️ 詳細執行計畫 (Step-by-Step Plan)**: Concrete steps presented as a **numbered list** (DO NOT use Markdown tables). Each step must include:
-     - **類型**: Action Type
-     - **路徑**: File Path
-     - **說明**: Detailed description
-     - **驗證**: Verification method
-   - **⚠️ 風險與確認事項 (Risks & Questions)**: Side effects or points requiring clarification.
-2. **Constraint**: Do not write code or modify files during the planning phase.

/package/skills/neo-vue/{reference → references}/anti-patterns.md RENAMED Viewed

File without changes

/package/skills/neo-vue/{reference → references}/coding-style.md RENAMED Viewed

File without changes

/package/skills/neo-vue/{reference → references}/patterns.md RENAMED Viewed

File without changes