Review

Code Review

Specialized agent for code review.

Configuration

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 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)

• ...

### 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
-->

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/corradofrancolini) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->