ImaginerLabs/frontend-code-review

Frontend Code Quality Review

Core Capability

Full-spectrum code health check for frontend code, ensuring production-grade quality. Works with React, Vue, Taro, and other modern frontend frameworks.

The goal isn't just to find problems — it's to give the user a clear verdict: is this code safe to ship, and if not, what exactly needs fixing?

When to Use

• Pre-commit self-check
• Pre-PR-review preparation
• Post-refactoring regression check
• Quality assessment when inheriting code
• Post-bug-fix verification

Related Skills

| Skill | Relationship | Use case | | ------------------------------- | ------------ | ----------------------------------------------- | | staged-code-review | Upstream | When reviewing staged changes before commit | | frontend-staged-bundle-review | Parallel | When also concerned about bundle size | | code-comment-writer | Downstream | When review finds readability issues | | tech-stack-detection | Prerequisite | When project tech stack is unknown | | react-performance | Deeper dive | When performance issues are found during review |

---

Checklist

For the full detailed checklist with code examples, see checklist.md.

1. Static Analysis (Lint & Fix)

Run lint checks, prioritize fixing no-unused-vars, no-undef, exhaustive-deps. Only fix errors introduced by the current change — don't expand the diff.

2. Robustness & Defensive Programming

Key areas:

• TypeScript: Complete interfaces, proper optional marking, default values
• Null safety: Optional chaining ?. and nullish coalescing ??
• Boundary handling: Empty arrays, division by zero, negative indices
• Async safety: try-catch around awaits, loading/error states
• Race conditions: AbortController, cancellation flags, disabled buttons during loading

3. Context & Side Effects

• Upstream impact: When modifying shared components, check all consumers
• Effect cleanup: Every useEffect subscription must have a cleanup function
• State pollution: Never mutate props or global state objects directly
• Closure traps: Ensure event callbacks reference the latest state values

4. Performance

• Render control: React.memo, useMemo, useCallback where needed
• Frequency control: debounce/throttle for search, scroll, resize
• List rendering: stable, unique key
• Code splitting: React.lazy for heavy components

5. Framework-Specific Checks

• Vue: Reactive traps, lifecycle cleanup, computed side effects, v-for + v-if
• Taro: API compatibility, subpackage config, setData optimization, lifecycle hooks

---

Workflow

1. Receive code (specified file or current context)
       ↓
2. Run ESLint check → auto-fix basic errors
       ↓
3. Deep analysis: robustness → side effects → performance
       ↓
4. Generate report with scoring
       ↓
5. Action recommendation: pass / warn / block

---

Output Format

## Code Quality Review Report

### Overview

- **File**: `[filename]`
- **Tech stack**: React / Vue / Taro
- **Overall score**: 🟢 Excellent (90+) / 🟡 Good (70-89) / 🔴 Needs work (<70)

---

### 1. ESLint Check

| Status  | Rule | Location | Description |
| ------- | ---- | -------- | ----------- |
| ✅ PASS | -    | -        | No errors   |

**Fixes applied:**

- [List auto-fixed issues]

---

### 2. Robustness Assessment

#### Risk Items

| Severity  | Location    | Issue   | Fix suggestion |
| --------- | ----------- | ------- | -------------- |
| 🔴 High   | `file:line` | [issue] | [suggestion]   |
| 🟡 Medium | `file:line` | [issue] | [suggestion]   |

---

### 3. Side Effects & Context

- **Upstream impact**: [analysis]
- **Downstream impact**: [analysis]
- **Global impact**: [analysis]

---

### 4. Performance Suggestions

| Priority | Location    | Issue   | Suggestion   | Expected gain |
| -------- | ----------- | ------- | ------------ | ------------- |
| 🔴 High  | `file:line` | [issue] | [suggestion] | [gain]        |

---

### Summary

- **Blockers**: X (must fix)
- **Warnings**: X (should fix)
- **Suggestions**: X (nice to have)

#### Action

- [ ] ✅ Safe to commit (no blockers)
- [ ] ⚠️ Fix warnings before commit
- [ ] ❌ Must fix blockers before commit

---

Quick Reference

| Problem | Typical scenario | Solution | | --------------- | ---------------------------------------- | ---------------------------------- | | Null error | Cannot read property of undefined | Use ?. optional chaining | | Race condition | Fast page switching causes data mismatch | AbortController to cancel requests | | Memory leak | setState after unmount | useEffect cleanup function | | Infinite render | useEffect dependency array error | Check dependency completeness | | Performance | List rendering lag | Use key + React.memo |

React/Vue Comparison

| Check | React | Vue | | ---------------- | --------------------------- | -------------------------------- | | Effect cleanup | useEffect return function | onUnmounted | | Computed caching | useMemo | computed | | Callback caching | useCallback | Not needed manually | | State update | setState / useState | ref / reactive | | Props validation | TypeScript interface | props definition + validator |