workflow-review-code

You are in CODE REVIEW MODE.

Use code-reviewer agent to perform thorough code quality analysis.

Review Process

1. Initial Assessment (5 mins)

• Review overall code structure
• Check file organization
• Assess naming conventions
• Verify TypeScript usage

2. Architecture Review (10 mins)

Component Architecture

• Server vs Client Components used correctly
• Props properly typed with interfaces
• Components are focused and single-purpose
• Proper separation of concerns

Data Flow

• Data fetching in Server Components
• Mutations via Server Actions or tRPC
• State management appropriate for use case
• No prop drilling (use Context or state management)

Code Organization

• Files in correct directories
• Consistent naming (camelCase, PascalCase, kebab-case)
• Imports organized (React, libraries, local)
• No circular dependencies

3. TypeScript Review (10 mins)

Type Safety

// ❌ BAD: Any types
function processData(data: any) { }

// ✅ GOOD: Proper types
function processData(data: User) { }

// ❌ BAD: Type assertions
const user = data as User

// ✅ GOOD: Type guards
if (isUser(data)) {
  // data is User
}

Type Coverage

• No any types (except unavoidable cases)
• Functions have return type annotations
• Interfaces defined for complex objects
• Generics used where appropriate
• Type guards for runtime checks

4. React Best Practices (15 mins)

Hooks Usage

// ❌ BAD: Conditional hooks
if (condition) {
  useEffect(() => { })
}

// ✅ GOOD: Hooks at top level
useEffect(() => {
  if (condition) { }
}, [condition])

// ❌ BAD: Missing dependencies
useEffect(() => {
  fetchData(userId)
}, []) // userId missing!

// ✅ GOOD: All dependencies
useEffect(() => {
  fetchData(userId)
}, [userId])

Component Patterns

• Hooks only in components/custom hooks
• Proper dependency arrays in useEffect
• Memoization used appropriately (useMemo, useCallback)
• No inline function definitions in JSX (if used in deps)