@fewangsit/wangsvue-gsts 2.0.0-alpha.13 → 2.0.0-alpha.14

package/mcp/skills/wangsvue-code-review/SKILL.md

@@ -1,70 +1,70 @@
----
-name: 'wangsvue-code-review'
-description: 'Reviews generated Wangsvue code against mandatory architectural principles and enforcement checklists. Invoke after generating code or before completion.'
----
-
-# Wangsvue Code Review Protocol
-
-This skill enforces the strict quality standards for Wangsvue code. Use this checklist to review any generated code before considering the task complete.
-
-## 🚨 Mandatory Architectural Principles
-
-### 1. Total Wangsvue Exclusivity
-
-- [ ] **Strict Prohibition:** NO usage of PrimeVue, Element Plus, Vuetify, or other libraries.
-- [ ] **Compliance:** ONLY use props, slots, events, and patterns defined in Wangsvue MCP or Knowledge Base.
-
-### 2. Zero Assumption Policy
-
-- [ ] **Verification:** Are all prop names, slot names, icon names, and enum values verified via MCP?
-- [ ] **No Guessing:** If it's not in the MCP result, it doesn't exist.
-
-### 3. MCP-First Verification
-
-- [ ] **Component Discovery:** Was `list_all_components()` called to find specialized components?
-- [ ] **Type Resolution:** Were all literal values (icons, severity, sizes) verified with `resolve_type_definition`?
-- [ ] **Example Check:** Did you check `get_example` for intended usage patterns?
-
-## ✅ Final Enforcement Checklist (Every File Must Pass)
-
-### 1. SFC Structure & Organization
-
-- [ ] **Structure:** `<script setup>` → `<template>` → `<style>` (only if needed).
-- [ ] **Script Order:** Imports → Props/Emits → Lifecycle → Variables → Methods (follows Vue Code Structure MD).
-- [ ] **Project Structure:** Business logic is in `components/modules/`, NOT in views.
-- [ ] **App.vue:** Only contains `<router-view />`, no business logic.
-
-### 2. Import Protocol
-
-- [ ] **Exact Paths:** ALL imports match MCP results EXACTLY (no modifications).
-- [ ] **Type Imports:** `type` keyword used for all type imports (from `resolve_type_definition`).
-- [ ] **Separation:** Component imports (main package) separated from Type imports (specific modules).
-
-### 3. Testing & Attributes
-
-- [ ] **Data Attributes:** `data-wv-name` on root element, `data-wv-section` on significant sections.
-
-### 4. Code Quality
-
-- [ ] **Linter:** `pnpm lint` must pass with exit code 0. After fixing ESLint errors, check editor `#problems_and_diagnostics` and fix any remaining issues.
-- [ ] **No Generic HTML:** specialized components used instead of `<div>` (e.g., `Card` instead of `div.bg-white`).
-- [ ] **No Manual CSS:** No styling on Wangsvue components (trust the design system).
-- [ ] **Exact Pixel Values:** 21px remains 21px, do not round to 20px (h-5).
-
-## ❌ Automatic Failure Indicators (IMMEDIATE STOP)
-
-If ANY of these are found, the code is rejected:
-
-- **Guessing:** Guessing icon names (`edit-line` vs `edit`) or enum values.
-- **Manual Styles:** Writing `<div class="bg-white p-4">` instead of `<Card>`.
-- **CSS Vars:** Using `bg-[var(--color)]` instead of Tailwind tokens (`bg-general-50`).
-- **Wrong Imports:** Mixing component and type paths, or forgetting `type` keyword.
-- **Double Wrapping:** `<div><Breadcrumb /></div>` (remove the div).
-- **Fat Views:** Putting data, columns, or handlers in view components instead of modules.
-- **Custom Patterns:** Implementing custom solutions when documentation provides a standard approach.
-- **Optimization:** "Optimizing" documented patterns instead of following them exactly.
-
-## Review Decision
-
-- **PASS:** All checklists checked, no failure indicators.
-- **FAIL:** Any unchecked item or presence of failure indicator. **Fix immediately.**
+---
+name: 'wangsvue-code-review'
+description: 'Reviews generated Wangsvue code against mandatory architectural principles and enforcement checklists. Invoke after generating code or before completion.'
+---
+
+# Wangsvue Code Review Protocol
+
+This skill enforces the strict quality standards for Wangsvue code. Use this checklist to review any generated code before considering the task complete.
+
+## 🚨 Mandatory Architectural Principles
+
+### 1. Total Wangsvue Exclusivity
+
+- [ ] **Strict Prohibition:** NO usage of PrimeVue, Element Plus, Vuetify, or other libraries.
+- [ ] **Compliance:** ONLY use props, slots, events, and patterns defined in Wangsvue MCP or Knowledge Base.
+
+### 2. Zero Assumption Policy
+
+- [ ] **Verification:** Are all prop names, slot names, icon names, and enum values verified via MCP?
+- [ ] **No Guessing:** If it's not in the MCP result, it doesn't exist.
+
+### 3. MCP-First Verification
+
+- [ ] **Component Discovery:** Was `list_all_components()` called to find specialized components?
+- [ ] **Type Resolution:** Were all literal values (icons, severity, sizes) verified with `resolve_type_definition`?
+- [ ] **Example Check:** Did you check `get_example` for intended usage patterns?
+
+## ✅ Final Enforcement Checklist (Every File Must Pass)
+
+### 1. SFC Structure & Organization
+
+- [ ] **Structure:** `<script setup>` → `<template>` → `<style>` (only if needed).
+- [ ] **Script Order:** Imports → Props/Emits → Lifecycle → Variables → Methods (follows Vue Code Structure MD).
+- [ ] **Project Structure:** Business logic is in `components/modules/`, NOT in views.
+- [ ] **App.vue:** Only contains `<router-view />`, no business logic.
+
+### 2. Import Protocol
+
+- [ ] **Exact Paths:** ALL imports match MCP results EXACTLY (no modifications).
+- [ ] **Type Imports:** `type` keyword used for all type imports (from `resolve_type_definition`).
+- [ ] **Separation:** Component imports (main package) separated from Type imports (specific modules).
+
+### 3. Testing & Attributes
+
+- [ ] **Data Attributes:** `data-wv-name` on root element, `data-wv-section` on significant sections.
+
+### 4. Code Quality
+
+- [ ] **Linter:** `pnpm lint` must pass with exit code 0. After fixing ESLint errors, check editor `#problems_and_diagnostics` and fix any remaining issues.
+- [ ] **No Generic HTML:** specialized components used instead of `<div>` (e.g., `Card` instead of `div.bg-white`).
+- [ ] **No Manual CSS:** No styling on Wangsvue components (trust the design system).
+- [ ] **Exact Pixel Values:** 21px remains 21px, do not round to 20px (h-5).
+
+## ❌ Automatic Failure Indicators (IMMEDIATE STOP)
+
+If ANY of these are found, the code is rejected:
+
+- **Guessing:** Guessing icon names (`edit-line` vs `edit`) or enum values.
+- **Manual Styles:** Writing `<div class="bg-white p-4">` instead of `<Card>`.
+- **CSS Vars:** Using `bg-[var(--color)]` instead of Tailwind tokens (`bg-general-50`).
+- **Wrong Imports:** Mixing component and type paths, or forgetting `type` keyword.
+- **Double Wrapping:** `<div><Breadcrumb /></div>` (remove the div).
+- **Fat Views:** Putting data, columns, or handlers in view components instead of modules.
+- **Custom Patterns:** Implementing custom solutions when documentation provides a standard approach.
+- **Optimization:** "Optimizing" documented patterns instead of following them exactly.
+
+## Review Decision
+
+- **PASS:** All checklists checked, no failure indicators.
+- **FAIL:** Any unchecked item or presence of failure indicator. **Fix immediately.**

package/mcp/skills/wangsvue-workflow/SKILL.md

@@ -1,91 +1,91 @@
----
-name: 'wangsvue-workflow'
-description: 'Enforces the 5-step mandatory workflow for Wangsvue development, including component discovery protocols. Invoke when starting a new task, feature, or component implementation.'
----
-
-# Wangsvue Mandatory Workflow
-
-This skill guides you through the 5 mandatory steps for any Wangsvue development task. You MUST follow these steps in order.
-
-## The 5-Step Workflow
-
-### Step 1: Standard Synchronization
-
-**Action:** Read relevant MD files before starting.
-
-- **Files to Check:** Vue Code Structure, Project Structure, Code Consistency Guidelines.
-- **Goal:** Ensure you are aligned with the latest architectural standards.
-
-### Step 2: Technical Discovery (MCP First)
-
-**Action:** Use MCP tools to find components and types.
-
-- **Command:** `mcp_wangsvue_mcp_list_all_components()`
-- **Command:** `mcp_wangsvue_mcp_analyze_component(componentId, format: "toon")`
-- **Command:** `mcp_wangsvue_mcp_resolve_type_definition(types: [...])`
-- **Goal:** Get the correct component ID, import paths, and TypeScript contracts.
-- **Rule:** NEVER write import statements without MCP verification.
-
-#### 🔍 Discovery Protocol (Detailed)
-
-**Always ask:** "Does Wangsvue have a specialized component for this?"
-
-**Keyword Search Guide:**
-
-- **Functional Components:**
-
-  - Filter? → Search "filter"
-  - Download? → Search "download" (e.g., `ButtonDownload`)
-  - Bulk actions? → Search "bulk" (e.g., `ButtonBulkAction`)
-  - Search? → Search "search" (e.g., `ButtonSearch`)
-  - Upload? → Search "upload" (e.g., `FileUpload`)
-  - Copy? → Search "copy" (e.g., `ButtonCopy`)
-
-- **Structural Components:**
-  - Card/Container? → Search "card" (for background, padding, border)
-  - Form wrapper? → Search "form"
-  - Modal/Popup? → Search "dialog", "dialogconfirm"
-  - Loading? → Search "loading"
-
-**Mental Shift Required:**
-
-- **❌ OLD:** "I need a container with background" → `<div class="bg-white p-4">`
-- **✅ NEW:** "I need a container" → Search components → Find `Card`
-- **❌ OLD:** "I need a button for download" → `<Button>`
-- **✅ NEW:** "I need download functionality" → Search components → Find `ButtonDownload`
-
-### Step 3: Pattern Extraction (Documentation)
-
-**Action:** Use MCP tools to see real usage patterns.
-
-1.  **Mandatory Discovery:** Call `mcp_wangsvue_docs_get_sections(component)` FIRST to see available section IDs.
-2.  **Extraction:** Call `mcp_wangsvue_docs_get_example(component, section)` using the exact ID found in step 1.
-
-- **Goal:** Understand intended usage, built-in features, and architecture.
-- **Rule:** NEVER guess a section name. NEVER assume an example exists without checking sections.
-- **Rule:** Follow examples EXACTLY. Do not create custom interpretations.
-
-**Questions to Ask:**
-
-- "Does this component handle its own state?" (e.g., `DataTable` handles pagination)
-- "Does it integrate with Router?" (e.g., `TabMenu`)
-- "Does it use a store?" (e.g., `Breadcrumb` uses `useBreadcrumbStore`)
-
-### Step 4: Synthesis (Strict Implementation)
-
-**Action:** Implement the code following strict structure rules.
-
-- **Structure:** Script → Template → Style.
-- **Organization:** Imports → Props/Emits → Lifecycle → Variables → Methods.
-- **Logic:** Business logic in `components/modules/`, NOT in views.
-- **Views:** Lightweight, only import and compose from modules.
-- **Attributes:** Ensure `data-wv-name` and `data-wv-section` are present.
-
-### Step 5: Validation (The "Black Box" Linter Rule)
-
-Launch skill `wangsvue-code-review`.
-
-## Repetition Protocol
-
-Before starting, affirm:
-"I WILL DISCOVER SPECIALIZED COMPONENTS FIRST. I WILL CALL GET_SECTIONS BEFORE GET_EXAMPLE. I WILL NOT GUESS SECTION NAMES OR IMPORTS. I WILL FOLLOW DOCUMENTED PATTERNS EXACTLY. I WILL RUN PNPM LINT."
+---
+name: 'wangsvue-workflow'
+description: 'Enforces the 5-step mandatory workflow for Wangsvue development, including component discovery protocols. Invoke when starting a new task, feature, or component implementation.'
+---
+
+# Wangsvue Mandatory Workflow
+
+This skill guides you through the 5 mandatory steps for any Wangsvue development task. You MUST follow these steps in order.
+
+## The 5-Step Workflow
+
+### Step 1: Standard Synchronization
+
+**Action:** Read relevant MD files before starting.
+
+- **Files to Check:** Vue Code Structure, Project Structure, Code Consistency Guidelines.
+- **Goal:** Ensure you are aligned with the latest architectural standards.
+
+### Step 2: Technical Discovery (MCP First)
+
+**Action:** Use MCP tools to find components and types.
+
+- **Command:** `mcp_wangsvue_mcp_list_all_components()`
+- **Command:** `mcp_wangsvue_mcp_analyze_component(componentId, format: "toon")`
+- **Command:** `mcp_wangsvue_mcp_resolve_type_definition(types: [...])`
+- **Goal:** Get the correct component ID, import paths, and TypeScript contracts.
+- **Rule:** NEVER write import statements without MCP verification.
+
+#### 🔍 Discovery Protocol (Detailed)
+
+**Always ask:** "Does Wangsvue have a specialized component for this?"
+
+**Keyword Search Guide:**
+
+- **Functional Components:**
+
+  - Filter? → Search "filter"
+  - Download? → Search "download" (e.g., `ButtonDownload`)
+  - Bulk actions? → Search "bulk" (e.g., `ButtonBulkAction`)
+  - Search? → Search "search" (e.g., `ButtonSearch`)
+  - Upload? → Search "upload" (e.g., `FileUpload`)
+  - Copy? → Search "copy" (e.g., `ButtonCopy`)
+
+- **Structural Components:**
+  - Card/Container? → Search "card" (for background, padding, border)
+  - Form wrapper? → Search "form"
+  - Modal/Popup? → Search "dialog", "dialogconfirm"
+  - Loading? → Search "loading"
+
+**Mental Shift Required:**
+
+- **❌ OLD:** "I need a container with background" → `<div class="bg-white p-4">`
+- **✅ NEW:** "I need a container" → Search components → Find `Card`
+- **❌ OLD:** "I need a button for download" → `<Button>`
+- **✅ NEW:** "I need download functionality" → Search components → Find `ButtonDownload`
+
+### Step 3: Pattern Extraction (Documentation)
+
+**Action:** Use MCP tools to see real usage patterns.
+
+1.  **Mandatory Discovery:** Call `mcp_wangsvue_docs_get_sections(component)` FIRST to see available section IDs.
+2.  **Extraction:** Call `mcp_wangsvue_docs_get_example(component, section)` using the exact ID found in step 1.
+
+- **Goal:** Understand intended usage, built-in features, and architecture.
+- **Rule:** NEVER guess a section name. NEVER assume an example exists without checking sections.
+- **Rule:** Follow examples EXACTLY. Do not create custom interpretations.
+
+**Questions to Ask:**
+
+- "Does this component handle its own state?" (e.g., `DataTable` handles pagination)
+- "Does it integrate with Router?" (e.g., `TabMenu`)
+- "Does it use a store?" (e.g., `Breadcrumb` uses `useBreadcrumbStore`)
+
+### Step 4: Synthesis (Strict Implementation)
+
+**Action:** Implement the code following strict structure rules.
+
+- **Structure:** Script → Template → Style.
+- **Organization:** Imports → Props/Emits → Lifecycle → Variables → Methods.
+- **Logic:** Business logic in `components/modules/`, NOT in views.
+- **Views:** Lightweight, only import and compose from modules.
+- **Attributes:** Ensure `data-wv-name` and `data-wv-section` are present.
+
+### Step 5: Validation (The "Black Box" Linter Rule)
+
+Launch skill `wangsvue-code-review`.
+
+## Repetition Protocol
+
+Before starting, affirm:
+"I WILL DISCOVER SPECIALIZED COMPONENTS FIRST. I WILL CALL GET_SECTIONS BEFORE GET_EXAMPLE. I WILL NOT GUESS SECTION NAMES OR IMPORTS. I WILL FOLLOW DOCUMENTED PATTERNS EXACTLY. I WILL RUN PNPM LINT."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-gsts",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.14",
   "author": "Wangsit FE Developer",
   "description": "Global Settings Tagsamurai VueJS Component Library",
   "type": "module",