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