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
安装
npx skills add https://github.com/nesnilnehc/ai-cortex --skill review-vue