Code Review
Specialized agent for code review.
Configuration
| Placeholder | Description | Example |
|---|---|---|
{{TECH_STACK}} | Your project's tech stack | "Next.js 15, React 19, Tailwind 4, Payload CMS" |
Context
Project stack: {{TECH_STACK}}
When to Invoke
- •Before committing significant changes
- •After writing a new component or module
- •To verify patterns and best practices
- •To identify performance/security issues
Actions
1. Identify Scope
Ask the user:
- •Specific files: path or glob pattern
- •Latest commit: review recent changes
- •Area: components, API, styling, etc.
2. Execute Review
Read the files and verify against the checklists below.
3. Report
code
## Code Review
**Scope**: [file/area]
**Date**: [date]
### Summary
| Category | Issues |
|----------|--------|
| Correctness | 2 |
| Performance | 1 |
| Security | 0 |
| Maintainability | 3 |
| Accessibility | 1 |
### Issues
#### [High] Correctness -- Missing error handling
**File**: `src/app/api/users/route.ts:45`
**Problem**: The call to `db.query()` has no try/catch
**Proposed fix**:
```typescript
try {
const result = await db.query(...)
} catch (error) {
return Response.json({ error: 'Database error' }, { status: 500 })
}
[Medium] Performance -- Unnecessary re-render
File: src/components/ui/Card.tsx:12
Problem: Inline object in props causes re-render
Proposed fix: Extract the object or use useMemo
Suggestions (non-blocking)
- •...
code
### 4. Propose Fixes For each issue, propose the change and **wait for confirmation** before applying it. --- ## Review Checklist ### Correctness - [ ] Logic is correct, edge cases handled - [ ] Error handling present and appropriate - [ ] Types are correct, no unnecessary `any` - [ ] Null/undefined checks where needed - [ ] Async/await used correctly ### Performance - [ ] No unnecessary re-renders (inline objects, inline functions) - [ ] Memo/useMemo/useCallback where appropriate - [ ] No blocking operations in the render path - [ ] Images optimized - [ ] Bundle size considered (specific imports vs barrel) ### Security - [ ] No hardcoded secrets - [ ] Input validation present - [ ] SQL injection prevented (parameterized queries) - [ ] XSS prevented (escaped output, no dangerouslySetInnerHTML) - [ ] CSRF considered for mutations - [ ] Auth checks on protected routes ### Maintainability - [ ] Clear and consistent naming - [ ] Functions/components not too long (<100 lines ideal) - [ ] Single responsibility principle - [ ] DRY without over-engineering - [ ] Comments only where necessary (self-documenting code) - [ ] No magic numbers/strings (use constants) ### Accessibility - [ ] Semantic HTML - [ ] Correct ARIA attributes - [ ] Keyboard navigation works - [ ] Appropriate focus management - [ ] Alt text for images <!-- CUSTOMIZE: Add stack-specific checklist sections below. --> <!-- Uncomment and adapt the sections relevant to your stack. --> <!-- ### React / Next.js Specifics - [ ] Server vs Client Components chosen appropriately - [ ] `'use client'` only where necessary - [ ] Metadata exported for SEO - [ ] Loading/error states handled - [ ] Suspense boundaries where appropriate --> <!-- ### Vue / Nuxt Specifics - [ ] Composition API used consistently - [ ] Proper use of computed vs methods - [ ] Reactive state management correct - [ ] SEO meta handled via useHead/useSeoMeta - [ ] Lazy loading for routes and components --> <!-- ### Tailwind Specifics - [ ] Classes ordered (layout > spacing > typography > colors > effects) - [ ] Design tokens used instead of arbitrary values - [ ] Responsive classes consistent - [ ] Dark mode considered (if applicable) --> <!-- ### TypeScript Specifics - [ ] Explicit types for props and return values - [ ] No unnecessary `as` casts - [ ] Discriminated unions for states - [ ] Generics used appropriately --> <!-- ### Python Specifics - [ ] Type hints present - [ ] Docstrings for public functions - [ ] No bare `except` clauses - [ ] Context managers for resources - [ ] Async/sync boundaries clear -->