Skill: Review Vue

Purpose

Review Vue 3 code for framework conventions only. Do not define scope (diff vs codebase) or perform security/architecture analysis; those are handled by scope and cognitive skills. Emit a findings list in the standard format for aggregation. Focus on Composition API and <script setup>, reactivity (ref/reactive, computed/watch), component boundaries and props/emits, state (Pinia/store), routing and guards, performance (e.g. v-memo), and accessibility where relevant.

Core Objective

Primary Goal: Produce a Vue 3 framework findings list covering Composition API usage, reactivity correctness, component boundaries, state management, routing, performance, and accessibility for the given code scope.

Success Criteria (ALL must be met):

✅ Vue 3 framework-only scope: Only Vue 3 framework conventions are reviewed; no scope selection, security, or architecture analysis performed
✅ All seven Vue dimensions covered: Composition API/script setup, reactivity (ref/reactive/computed/watch), component boundaries/props/emits, state (Pinia), routing/guards, rendering performance, and accessibility are assessed where relevant
✅ Findings format compliant: Each finding includes Location, Category (framework-vue), Severity, Title, Description, and optional Suggestion
✅ Component/file references: All findings reference specific file:line or component name
✅ Non-Vue code excluded: Non-Vue files are not analyzed for Vue-specific rules unless explicitly in scope

Acceptance Test: Does the output contain a Vue 3-focused findings list with component/file references covering all relevant framework dimensions without performing security, architecture, or scope analysis?

Scope Boundaries

This skill handles:

Composition API and <script setup> correctness (defineProps, defineEmits, defineExpose, lifecycle hooks)
Reactivity correctness (ref vs reactive, computed vs watch, prop mutation, deep reactivity)
Component boundary design (props/emits contracts, prop drilling, provide/inject)
State management (Pinia/Vuex: actions vs direct mutation, server state duplication avoidance)
Routing (Vue Router, navigation guards, lazy loading, route param/query handling)
Performance (v-memo, v-for key stability, unnecessary re-renders)
Accessibility (semantic HTML, ARIA, form labels, focus management)

This skill does NOT handle:

Scope selection — scope is provided by the caller
Security analysis (XSS, injection risks) — use review-security
Architecture analysis — use review-architecture
Language/runtime (JavaScript/TypeScript) conventions — use general JS/TS analysis or note as separate concern
Full orchestrated review — use review-code

Handoff point: When all Vue findings are emitted, hand off to review-code for aggregation. For XSS risks (v-html misuse, unsanitized content), note them and suggest review-security.

Use Cases

Orchestrated review: Used as the framework step when review-code runs scope → language → framework → library → cognitive for Vue projects.
Vue-only review: When the user wants only Vue/frontend framework conventions checked.
Pre-PR Vue checklist: Ensure Composition API usage, reactivity, and component contracts are correct.

When to use: When the code under review is Vue 3 and the task includes framework quality. Scope is determined by the caller or user.

Behavior

Scope of this skill

Analyze: Vue 3 framework conventions in the given code scope (files or diff provided by the caller). Do not decide scope; accept the code range as input.
Do not: Perform scope selection, security review, or architecture review; do not review non-Vue files for Vue rules unless in scope (e.g. mixed repo).

Review checklist (Vue framework only)

Composition API and script setup: Prefer <script setup> and Composition API; correct use of defineProps, defineEmits, defineExpose; lifecycle hooks (onMounted, onUnmounted, etc.).
Reactivity: Correct use of ref vs reactive; computed vs watch; avoid mutating props; deep reactivity and unwrapping in templates.
Component boundaries: Clear props/emits contracts; avoid prop drilling where a store or provide/inject is appropriate; single responsibility per component.
State (Pinia/store): Appropriate use of Pinia (or Vuex) stores; avoid duplicating server state in multiple places; actions vs direct mutation.
Routing and guards: Vue Router usage; navigation guards and lazy loading; route params and query handling.
Performance: v-memo where list rendering is expensive; avoid unnecessary re-renders; key usage in lists.
Accessibility: Semantic HTML and ARIA where relevant; form labels and focus management.

Tone and references

Professional and technical: Reference specific locations (file:line or component name). Emit findings with Location, Category, Severity, Title, Description, Suggestion.

Input & Output

Input

Code scope: Files or directories (or diff) containing Vue 3 code (.vue, .ts with Vue APIs). Provided by the user or scope skill.

Output

Emit zero or more findings in the format defined in Appendix: Output contract.
Category for this skill is framework-vue.

Restrictions

Hard Boundaries

Do not perform scope selection, security, or architecture review. Stay within Vue 3 framework conventions.
Do not give conclusions without specific locations or actionable suggestions.
Do not review non-Vue code for Vue-specific rules unless explicitly in scope.

Skill Boundaries

Do NOT do these (other skills handle them):

Do NOT select or define the code scope — scope is determined by the caller or review-code
Do NOT perform security analysis (XSS, injection) — use review-security
Do NOT perform architecture analysis — use review-architecture

When to stop and hand off:

When all Vue findings are emitted, hand off to review-code for aggregation
When XSS risks are found (e.g. unsafe v-html usage), note them and suggest review-security
When the user needs a full review (scope + language + cognitive), redirect to review-code

Self-Check

Core Success Criteria

Vue 3 framework-only scope: Only Vue 3 framework conventions are reviewed; no scope selection, security, or architecture analysis performed
All seven Vue dimensions covered: Composition API/script setup, reactivity (ref/reactive/computed/watch), component boundaries/props/emits, state (Pinia), routing/guards, rendering performance, and accessibility are assessed where relevant
Findings format compliant: Each finding includes Location, Category (framework-vue), Severity, Title, Description, and optional Suggestion
Component/file references: All findings reference specific file:line or component name
Non-Vue code excluded: Non-Vue files are not analyzed for Vue-specific rules unless explicitly in scope

Process Quality Checks

Was only the Vue framework dimension reviewed (no scope/security/architecture)?
Are Composition API, reactivity, components, state, routing, and performance covered where relevant?
Is each finding emitted with Location, Category=framework-vue, Severity, Title, Description, and optional Suggestion?
Are issues referenced with file:line or component?

Acceptance Test

Does the output contain a Vue 3-focused findings list with component/file references covering all relevant framework dimensions without performing security, architecture, or scope analysis?

Examples

Example 1: Mutating props

Input: Component that assigns to a prop in script or template.
Expected: Emit a finding (major/minor) for prop mutation; suggest local state or emit to parent. Category = framework-vue.

Example 2: Missing key in v-for

Input: v-for without :key or with non-stable key (e.g. index).
Expected: Emit finding for list identity and performance; suggest stable unique key. Category = framework-vue.

Edge case: Vue 2 Options API

Input: Legacy Vue 2 Options API in a mixed codebase.
Expected: Review for Vue 2 patterns (data, methods, lifecycle) if the skill is extended to Vue 2; otherwise note "Vue 3 Composition API preferred" where migration is feasible. For this skill, focus on Vue 3; note Vue 2 only if explicitly in scope.

Appendix: Output contract

Each finding MUST follow the standard findings format:

Element	Requirement
Location	`path/to/file.vue` or `.ts` (optional line or range).
Category	`framework-vue`.
Severity	`critical` \| `major` \| `minor` \| `suggestion`.
Title	Short one-line summary.
Description	1–3 sentences.
Suggestion	Concrete fix or improvement (optional).

Example:

- **Location**: `src/components/UserList.vue:18`
- **Category**: framework-vue
- **Severity**: major
- **Title**: v-for missing stable key
- **Description**: Using index as key can cause incorrect reuse and state bugs when list order changes.
- **Suggestion**: Use a unique stable id (e.g. user.id) as :key.

review-vue