---
name: Code Review
description: A comprehensive guide and checklist for performing code reviews on Vue 3 + TypeScript projects.
---

# Code Review Skill

Use this skill when the user asks you to "review code", "check for bugs", or "perform a code review". This skill ensures consistency and depth in your reviews.

## Review Checklist

### 1. Functional Correctness

- [ ] **Requirements**: Does the code meet the user's requirements?
- [ ] **Logic**: Are there logical errors, off-by-one errors, or incorrect conditions?
- [ ] **Edge Cases**: Are edge cases handled (e.g., empty lists, null values, network failures)?

### 2. TypeScript & Type Safety

- [ ] **No `any`**: Avoid using `any` unless absolutely necessary.
- [ ] **Interfaces/Types**: Are interfaces and types defined clearly?
- [ ] **Strictness**: Does it satisfy strict null checks?

### 3. Vue 3 Best Practices

- [ ] **Composition API**: proper usage of `ref`, `reactive`, `computed`, and `watch`.
- [ ] **Reactivity**: Are reactive dependencies lost (e.g., destructuring props without `toRef`)?
- [ ] **Components**: Component structure, prop definitions, and event emissions.
- [ ] **Vant UI**: Correct usage of Vant UI components.

### 4. Code Quality & Style

- [ ] **Readability**: Is the code easy to understand?
- [ ] **Naming**: Are variables/functions named descriptively?
- [ ] **Modularity**: Is the code broken down into small, reusable functions/components?
- [ ] **Comments**: Are complex logic parts commented?

### 5. Performance & Security

- [ ] **Performance**: potential bottlenecks (unnecessary re-renders, heavy computations).
- [ ] **Security**: XSS, input validation, sensitive data exposure.

## Workflow

1.  **Analyze**: Read the files provided by the user or identified in the task.
2.  **Evaluate**: check the code against the checklist above.
3.  **Report**:
    - **Summary**: A high-level overview of the code quality.
    - **Issues**: List specific issues found, grouped by severity (Critical, Major, Minor). Include line numbers.
      - _Example_: `src/views/Home.vue:45` - Destructuring `props` causes loss of reactivity. Use `props.propName` or `toRefs(props)`.
    - **Suggestions**: Improvement suggestions (refactoring, better approaches).
4.  **Fix (Optional)**: If the user requests, apply the fixes based on the review.