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