review-vue

Skill: Review Vue

Purpose

Review only the framework conventions of Vue 3 code. Do not define the scope (diff vs codebase) and do not run security/architecture analysis; the scope and cognitive skills handle those. Emit a findings list in the standard format for aggregation. Concentrate on the Composition API and <script setup>, reactivity (ref/reactive, computed/watch), component boundaries and props/emits, state (Pinia/store), routing and guards, performance (v-memo, for example) 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 across the given code scope.

Success criteria (all of them must hold):

1. ✅ Vue 3 framework scope only: only Vue 3 framework conventions were reviewed; no scope selection, security or architecture analysis was performed
2. ✅ All seven Vue dimensions covered: Composition API/script setup, reactivity (ref/reactive/computed/watch), component boundaries/props/emits, state (Pinia), routing/guards, render performance, and accessibility where relevant
3. ✅ Findings format compatible: every finding carries every element findings-list §5.1 requires, with category framework-vue
4. ✅ Component/file references: every finding points at a specific file:line or component name
5. ✅ Non-Vue code excluded: Vue-specific rules are not applied to non-Vue files unless they are explicitly in scope

Acceptance test: does the output carry a Vue 3-centred findings list, with component/file references covering every relevant framework dimension, and without security, architecture or scope analysis?

---

Scope Boundaries

This skill owns:

• 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 contract, prop drilling, provide/inject)
• State management (Pinia/Vuex: actions vs direct mutation, avoid duplicating server state)
• Routing (Vue Router, navigation guards, lazy loading, route param/query handling)
• Performance (v-memo, v-for key stability, needless re-renders)
• Accessibility (semantic HTML, ARIA, form labels, focus management)

This skill does not own:

• Scope selection — the scope comes from the caller
• Security analysis (XSS, injection risk) — use review-security
• Architecture analysis — use review-architecture
• Language/runtime (JavaScript/TypeScript) conventions — use general JS/TS analysis, or note them as a separate concern
• A full orchestrated review — use orchestrate-code-review

Handoff point: once every Vue finding has been emitted, hand off to orchestrate-code-review 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 orchestrate-code-review runs scope → language → framework → library → cognitive over a Vue project.
• Vue-only review: when the user wants to check Vue/frontend framework conventions alone.
• Pre-PR Vue checklist: confirm that 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. The scope is set by the caller or the user.

---

Behavior

What this skill covers

• Analyze: Vue 3 framework conventions inside the given code scope (files or a diff supplied by the caller). It does not decide the scope; it takes the code scope as input.
• Do not: perform scope selection, a security review or an architecture review; do not apply Vue rules to non-Vue files unless they are in scope (a mixed repository, for example).

Review checklist (Vue framework only)

1. Composition API and script setup: prefer <script setup> and the Composition API; correct use of defineProps, defineEmits, defineExpose; lifecycle hooks (onMounted, onUnmounted and so on).
2. Reactivity: correct use of ref vs reactive; computed vs watch; avoid mutating props; deep reactivity and unwrapping in templates.
3. Component boundaries: explicit props/emits contracts; avoid prop drilling where a store or provide/inject fits; one responsibility per component.
4. State (Pinia/store): appropriate use of the Pinia (or Vuex) store; avoid duplicating server state in several places; actions vs direct mutation.
5. Routing and guards: Vue Router usage; navigation guards and lazy loading; route param and query handling.
6. Performance: v-memo for expensive list rendering; avoid needless re-renders; key usage in lists.
7. Accessibility: semantic HTML and ARIA where relevant; form labels and focus management.

Tone and references

• Professional and technical: cite a concrete location (file:line or component name). Emit findings carrying every element findings-list §5.1 requires.

---

Input and Output

Input

• Code scope: files or directories (or a diff) holding Vue 3 code (.vue, or .ts that uses the Vue API). Supplied by the user or by the scope skill.

Output

• Emit zero or more findings in the format defined in specs/findings-list.md, with Category framework-vue.
• The category for this skill is framework-vue.

---

Restrictions

Hard Boundaries

• Do not perform scope selection, security or architecture review. Stay inside Vue 3 framework conventions.
• Do not land a conclusion without a concrete location or an actionable suggestion.
• Do not apply Vue-specific rules to non-Vue code unless it is explicitly in scope.

Skill Boundaries

Do not do these (other skills handle them):

• Do not select or define the code scope - the caller or orchestrate-code-review sets it
• Do not perform security analysis (XSS, injection) — use review-security
• Do not perform architecture analysis — use review-architecture

When to stop and hand off:

• Once every Vue finding has been emitted, hand it to orchestrate-code-review for aggregation
• When an XSS risk turns up (unsafe v-html usage, for example), note it and suggest review-security
• When the user wants a full review (scope + language + cognitive), redirect to orchestrate-code-review

---

Self-Check

Core success criteria

• Vue 3 framework scope only: only Vue 3 framework conventions were reviewed; no scope selection, security or architecture analysis was performed
• All seven Vue dimensions covered: Composition API/script setup, reactivity (ref/reactive/computed/watch), component boundaries/props/emits, state (Pinia), routing/guards, render performance, and accessibility where relevant
• Findings format conformant: every finding carries every element findings-list §5.1 requires, with category framework-vue
• Component/file references: every finding points at a specific file:line or component name
• Non-Vue code excluded: Vue-specific rules are not applied to non-Vue files unless they are explicitly in scope

Process quality checks

• Were only the Vue framework dimensions reviewed (no scope/security/architecture)?
• Were the relevant Composition API, reactivity, component, state, routing and performance aspects covered?
• Does every finding carry every element findings-list §5.1 requires, with category=framework-vue?
• Is every issue tied to a file:line or a component?

Acceptance test

Does the output carry a Vue 3-centred findings list, with component/file references covering every relevant framework dimension, and without security, architecture or scope analysis?

---

Examples

Example 1: mutating props

• Input: a component that assigns to a prop in its script or template.
• Expected: emit a finding for the prop mutation (major/minor); suggest local state or an emit to the parent. category=framework-vue.

Example 2: missing key in v-for

• Input: a v-for with no :key, or with an unstable key (the array index, for example).
• Expected: emit a finding on list identity and performance; suggest a stable, unique key. category=framework-vue.

Edge case: Vue 2 Options API

• Input: legacy Vue 2 Options API in a mixed codebase.
• Expected: if the skill is extended to Vue 2, review the Vue 2 patterns (data, methods, lifecycle); otherwise note "use the Vue 3 Composition API" where migration is feasible. For this skill, concentrate on Vue 3; note Vue 2 only when it is explicitly in scope.