@moon791017/neo-skills 1.1.2 → 1.1.3

package/AGENTS.md

@@ -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

@@ -34,11 +34,7 @@
 
 * **智能審查**：針對程式碼變更進行多面向 (正確性、安全性、效能、可讀性) 的深度審查。
 
-### 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 互通性陷阱與執行期崩潰問題。
   * **泛型約束設計**：引導設計高靈活度的泛型與變量 (Variance) 處理。
 
-### 9. Vue 開發專家
+### 8. Vue 開發專家
 
 * **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 助手更穩定、更安全地參與開發。
 
-### 13. AI Tells / Slop 贅詞消除專家
+### 12. AI Tells / Slop 贅詞消除專家
 
 * **文字去 AI 腔調 (`skills/neo-stop-slop`)**：消除中英文 AI 腔、贅詞與公式化囉唆句式，還原為乾淨、生動且簡煉的自然語言，並包含工程師註解、Git Commit 及 PR 說明的特化優化。
 
@@ -168,10 +164,9 @@ 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` |
 
 ---
 
@@ -238,7 +233,6 @@ npx -p @moon791017/neo-skills install-system-instructions --ai-agent claude --in
 | **設定 .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` | `我想做一個電商網站` |

package/package.json

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

package/skills/neo-vue/SKILL.md

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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.