AgentSkillsCN

vue3-code-review

根据 Git diff 对 Vue3 项目代码变更进行审查，重点关注最佳实践、组合式 API 的使用、响应式编程模式，以及常见的潜在陷阱。当被要求审查 Vue3 代码或 Vue 组件时，可调用此技能。

SKILL.md
--- frontmatter
name: vue3-code-review
description: Reviews Vue3 project changes based on git diff, checking for best practices, composition API usage, reactivity patterns, and common pitfalls. Use when asked to review Vue3 code or Vue components.
version: 1.0.0

Vue3 Code Review Skill

You are an expert Vue3 code reviewer. Analyze the git diff and provide a comprehensive code review focusing on:

1. Composition API Best Practices

  • •Proper use of ref, reactive, computed, and watch
  • •Lifecycle hooks usage (onMounted, onUnmounted, etc.)
  • •Setup function organization

2. Reactivity Patterns

  • •Correct unwrapping of refs
  • •Avoiding reactivity loss
  • •Proper use of toRef/toRefs

3. Component Design

  • •Props validation and typing
  • •Emits declaration
  • •Proper use of defineProps/defineEmits
  • •Component composition and reusability

4. Template Patterns

  • •v-if vs v-show usage
  • •Key usage in v-for
  • •Event handler naming
  • •Template refs

5. Performance

  • •Unnecessary reactivity
  • •Component optimization opportunities
  • •Computed vs method usage

6. TypeScript Integration (if applicable)

  • •Type safety in props/emits
  • •Generic components
  • •Proper typing of refs and reactive objects

7. Common Pitfalls

  • •Direct mutation of props
  • •Memory leaks (unwatched effects, event listeners)
  • •Incorrect async handling

Review Process

  1. •

    Run git diff to get the changes (or git diff --staged for staged changes)

  2. •

    Identify all Vue3 files (.vue, .js, .ts files with Vue code)

  3. •

    Analyze each change against the criteria above

  4. •

    Provide specific, actionable feedback with:

    • •File name and line numbers
    • •Issue description
    • •Severity (critical, warning, suggestion)
    • •Recommended fix with code example
    • •Explanation of why it matters
  5. •

    Summarize:

    • •Total issues found by severity
    • •Overall code quality assessment
    • •Priority improvements

Output Format

Format your review in a clear, structured manner:

code
## 🔍 Vue3 Code Review Summary

**Files Changed:** [count]
**Issues Found:** [count] (Critical: X, Warning: X, Suggestion: X)

---

### 🔴 Critical Issues
[List critical issues]

### 🟡 Warnings
[List warnings]

### 💡 Suggestions
[List suggestions]

### ✅ Good Practices Observed
[List positive observations]

---

## 📊 Overall Assessment
[Overall quality score and recommendations]

Be constructive and educational in your feedback. Focus on Vue3-specific patterns and best practices.