Code Review

Code Review Skill

You are performing a comprehensive code review on a diff. Your task is to analyze the changed code for security vulnerabilities, anti-patterns, and quality issues.

Input Model

This skill expects a diff to be provided in context before invocation. The caller is responsible for generating the diff.

Example invocations:

• User pastes PR diff, then runs /code-review
• Agent runs git diff HEAD~1, then invokes this skill
• CI tool provides diff content for review

If no diff is present in context, ask the user to provide one or offer to generate one (e.g., git diff, git diff main..HEAD).

---

Domain Detection

Auto-detect which checklists to apply based on directory paths in the diff:

If the diff spans multiple domains, load all relevant checklists.

---

Review Process

Step 1: Parse the Diff

Extract from the diff:

• List of changed files
• Changed lines (additions and modifications)
• Detected domains based on file paths

Step 2: Initialize the Review Document

Create a review document using the temp-files pattern:

SANITIZED_PATH=$(echo "$PWD" | tr '/' '-')
REPORT_DIR="/tmp/claude/${SANITIZED_PATH}/reviews"
mkdir -p "$REPORT_DIR"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
FILEPATH="${REPORT_DIR}/code-review-${TIMESTAMP}.md"

Initialize with this schema:

# Code Review Report

**Date**: {current date}
**Reviewer**: Code Review Agent
**Source**: {e.g., "PR diff", "unstaged changes", "main..HEAD"}
**Files Changed**: {count}
**Domains Detected**: {list}
**Status**: In Progress

## Summary

| Category | Items Checked | Passed | Failed | Findings |
|----------|---------------|--------|--------|----------|
| Security | 0 | 0 | 0 | 0 |
| Code Quality | 0 | 0 | 0 | 0 |
| LLM Code Smells | 0 | 0 | 0 | 0 |
| Impact Analysis | 0 | 0 | 0 | 0 |
| Simplification | 0 | 0 | 0 | 0 |
{domain-specific categories added based on detected domains}

## Detailed Findings

{findings added here as review progresses}

Step 3: Review Changed Code

For EACH checklist item:

1. Scope feedback to diff lines only - Only flag issues in the changed code 2. Use file context - Read full file content to understand surrounding code 3. Apply relevant checks - Use domain-appropriate checklist items 4. Document findings - Record each violation found in changed code

Key principle: The diff is what gets reviewed. The rest of the file provides context to make that review accurate.

Step 4: Impact Analysis

Check if the diff might affect other parts of the codebase:

• Changed exports/interfaces - Search for usages elsewhere that may break
• Modified API signatures - Check for callers that need updating
• Altered shared utilities - Look for consumers that may be affected
• Config/schema changes - Find code that depends on old structure

Report any unaccounted-for impacts as findings with severity based on risk.

Step 5: Document Each Finding

For each issue found, add an entry:

### [{CATEGORY}] {Item Name}

**Status**: FAIL
**Severity**: Critical | High | Medium | Low
**Scope**: Changed code | Impact analysis

#### Violation

- **File**: `path/to/file.ext`
- **Line(s)**: 42-48 (from diff)
- **Code**:

// problematic code snippet from diff

- **Issue**: {explanation of what's wrong}
- **Recommendation**: {how to fix it}

Step 6: Finalize the Report

After completing all checks:

1. Update the summary table with final counts 2. Add an executive summary:

• Total issues found
• Critical issues requiring immediate attention
• Impact analysis results
• Recommended priority order for fixes

3. Update status to "Complete" 4. Inform the user of the report location

---

Generic Review Categories

These checks apply to ALL changed code regardless of domain.

---

Category: Security Fundamentals

Hardcoded Secrets

Check diff for:

• API keys, passwords, secrets in changed code
• Patterns: api_key, apiKey, password, secret, token, credential with literal values

Pass criteria: No hardcoded secrets in diff (should use environment variables) Severity: Critical

---

Eval and Dynamic Code Execution

Check diff for:

• JavaScript/TypeScript: eval(, new Function(, setTimeout(", setInterval("
• Python: eval(, exec(, compile(

Pass criteria: No dynamic code execution in changed lines Severity: Critical

---

Command Injection

Check diff for:

• Python: subprocess with shell=True, os.system(
• Go: exec.Command( with unsanitized input

Pass criteria: No unvalidated user input in shell commands Severity: Critical

---

Category: Code Quality

Console/Print Statements

Check diff for:

• JavaScript/TypeScript: console.log, console.debug, console.info
• Python: print( statements

Pass criteria: No debug statements in production code changes Severity: Low

---

TODO/FIXME Comments

Check diff for:

• TODO:, FIXME:, HACK:, XXX: comments

Pass criteria: New TODOs should be tracked in issues Severity: Low

---

Empty Catch/Except Blocks

Check diff for:

• JavaScript/TypeScript: catch { } or catch(e) { }
• Python: except: pass or empty except blocks

Pass criteria: All error handlers log or rethrow Severity: High

---

Category: LLM Code Smells

Placeholder Implementations

Check diff for:

• TODO, PLACEHOLDER, IMPLEMENT, NotImplemented
• Functions that just return None, return [], return {}

Pass criteria: No placeholder implementations in production code Severity: High

---

Overly Generic Abstractions

Check diff for:

• New classes/functions with names like GenericHandler, BaseManager, AbstractFactory
• Abstractions without clear reuse justification

Pass criteria: Abstractions are justified by actual reuse Severity: Low

---

Category: Impact Analysis

Breaking Changes

Check if diff modifies:

• Exported functions/classes - search for imports elsewhere
• API endpoints - search for callers
• Shared types/interfaces - search for usages
• Config schemas - search for consumers

Pass criteria: All impacted code identified and accounted for Severity: High (if unaccounted impacts found)

---

Category: Simplification

Duplicate Logic

Check diff for:

• Repeated code patterns (not just syntactic similarity)
• Copy-pasted code with minor variations
• Similar validation, transformation, or formatting logic

Pass criteria: No obvious duplication in changed code Severity: Medium Suggestion: Extract shared logic into reusable functions

---

Unnecessary Complexity

Check diff for:

• Deeply nested conditionals (more than 3 levels)
• Functions doing multiple unrelated things
• Overly complex control flow

Pass criteria: Code is reasonably flat and focused Severity: Medium Suggestion: Use early returns, extract helper functions

---

Verbose Patterns

Check diff for:

• Patterns that have simpler alternatives in the language
• Redundant null checks or type assertions
• Unnecessary intermediate variables

Pass criteria: Code uses idiomatic patterns Severity: Low Suggestion: Simplify using language built-ins

---

Domain-Specific Review Items

Based on detected domains, read and apply the appropriate checklists:

• Frontend detected (designer/): Read frontend.md and apply those checks to changed code
• Backend detected (server/, rag/, runtimes/): Read backend.md and apply those checks to changed code

---

Final Summary Template

## Executive Summary

**Review completed**: {timestamp}
**Total findings**: {count}

### Critical Issues (Must Fix)
1. {issue 1}
2. {issue 2}

### Impact Analysis Results
- {summary of any breaking changes or unaccounted impacts}

### High Priority (Should Fix)
1. {issue 1}
2. {issue 2}

### Recommendations
{Overall recommendations based on the changes reviewed}

---

Notes for the Agent

1. Scope to diff: Only flag issues in the changed lines. Don't review unchanged code.

2. Use context: Read full files to understand the changes, but feedback targets the diff only.

3. Check impacts: When changes touch exports, APIs, or shared code, search for affected consumers.

4. Be specific: Include file paths, line numbers (from diff), and code snippets for every finding.

5. Prioritize: Flag critical security issues immediately.

6. Provide solutions: Each finding should include a recommendation for how to fix it.

7. Update incrementally: Update the review document after each category, not at the end.

Backend Review Checklist

Domain-specific review items for Python, FastAPI, and async codebases.

Add these categories to the summary table:

• Security (Backend)
• FastAPI Patterns
• Pydantic Validation
• Async Patterns
• Error Handling (Backend)
• Database/ORM

---

Category: Security (Backend)

SQL Injection

Search patterns:

# Raw SQL with string formatting
grep -rE "execute\(.*%|execute\(.*\.format\(|execute\(.*f['\"]" --include="*.py"

# String concatenation in queries
grep -rE "SELECT.*\+|INSERT.*\+|UPDATE.*\+|DELETE.*\+" --include="*.py"

Pass criteria: All queries use parameterized statements or ORM Severity: Critical

---

Path Traversal

Search patterns:

# Unsanitized file paths
grep -rE "open\(.*\+|Path\(.*\+|os\.path\.join\(.*request" --include="*.py"

# Direct user input in file operations
grep -rE "with open\(|\.read\(|\.write\(" --include="*.py" -B 3 | grep -E "request\.|params\.|query\."

Pass criteria: All file paths validated and sanitized Severity: Critical

---

SSRF (Server-Side Request Forgery)

Search patterns:

# HTTP requests with user-controlled URLs
grep -rE "requests\.(get|post|put|delete)\(.*request\.|httpx\.(get|post)\(.*request\." --include="*.py"

# aiohttp with user input
grep -rE "session\.(get|post)\(" --include="*.py" -B 5 | grep -E "request\.|params\."

Pass criteria: All external URLs validated against allowlist Severity: High

---

Insecure Deserialization

Search patterns:

# Pickle usage
grep -rE "pickle\.(load|loads)\(|cPickle\." --include="*.py"

# YAML unsafe load (must use SafeLoader or safe_load)
grep -rE "yaml\.load\(" --include="*.py" | grep -v "Loader=SafeLoader\|Loader=yaml\.SafeLoader\|safe_load"

Pass criteria: No pickle with untrusted data; YAML uses safe_load Severity: Critical

---

Weak Cryptography

Search patterns:

# MD5/SHA1 for passwords
grep -rE "md5\(|sha1\(" --include="*.py" | grep -iE "password|secret|token"

# Hardcoded crypto keys
grep -rE "key\s*=\s*['\"][^'\"]{8,}" --include="*.py"

Pass criteria: Use bcrypt/argon2 for passwords; no hardcoded keys Severity: High

---

Category: FastAPI Patterns

Missing response_model

Search patterns:

# Routes without response_model
grep -rE "@(app|router)\.(get|post|put|patch|delete)\(" --include="*.py" | grep -v "response_model"

Pass criteria: All endpoints have explicit response_model Severity: Medium

---

Untyped Request Bodies

Search patterns:

# Route handlers with untyped parameters (missing Pydantic models)
grep -rE "@(app|router)\.(post|put|patch)\(" --include="*.py" -A 3 | grep -E "def\s+\w+\([^)]*:\s*(dict|Dict|Any)\b"

# Body() without type annotation
grep -rE "Body\(\.\.\.\)" --include="*.py"

# Parameters with generic dict type in route handlers
grep -rE "def\s+\w+\([^)]*:\s*dict\b" --include="*.py"

Pass criteria: All request bodies have Pydantic model types Severity: High

---

Missing Status Codes

Search patterns:

# POST without 201, DELETE without 204
grep -rE "@(app|router)\.post\(" --include="*.py" | grep -v "status_code"
grep -rE "@(app|router)\.delete\(" --include="*.py" | grep -v "status_code"

Pass criteria: Appropriate HTTP status codes for each operation Severity: Low

---

Sync Functions in Async Routes

Search patterns:

# Async route calling sync functions
grep -rE "async def.*:" --include="*.py" -A 20 | grep -E "time\.sleep|requests\.(get|post)|open\("

Pass criteria: Async routes use async I/O (httpx, aiofiles, asyncio.sleep) Severity: High

---

Missing Dependency Injection

Search patterns:

# Direct instantiation in routes
grep -rE "def\s+\w+\(" --include="*.py" -A 10 | grep -E "^\s+\w+\s*=\s*\w+Service\(|^\s+\w+\s*=\s*\w+Repository\("

Pass criteria: Services/repos injected via Depends() Severity: Medium

---

N+1 Query Patterns

Search technique:

• Look for loops that execute queries
• Check for missing eager loading

Search patterns:

# Queries inside loops
grep -rE "for\s+\w+\s+in" --include="*.py" -A 5 | grep -E "\.query\(|\.filter\(|\.get\("

Pass criteria: No queries inside loops; use eager loading Severity: High

---

Category: Pydantic Validation

Missing Field Validators

Search patterns:

# Models without validators for sensitive fields
grep -rE "email:|password:|url:|phone:" --include="*.py" -B 5 -A 5 | grep -v "@validator\|@field_validator"

Pass criteria: Sensitive fields have validation Severity: Medium

---

Overly Permissive Models

Search patterns:

# Models that accept extra fields
grep -rE "extra\s*=\s*['\"]allow['\"]|Config:.*extra\s*=\s*'allow'" --include="*.py"

# Models with Any type
grep -rE ":\s*Any\b" --include="*.py"

Pass criteria: Models are strict; no arbitrary field acceptance Severity: Medium

---

Missing Field Constraints

Search patterns:

# String fields without max_length
grep -rE ":\s*str\s*$|:\s*str\s*=" --include="*.py" | grep -v "max_length\|Field\("

# Numeric fields without bounds
grep -rE ":\s*int\s*$|:\s*float\s*$" --include="*.py" | grep -v "ge=\|le=\|gt=\|lt=\|Field\("

Pass criteria: Fields have appropriate constraints Severity: Low

---

Untyped Optional Fields

Search patterns:

# Optional without explicit type
grep -rE "Optional\[Any\]|:\s*Optional\s*$" --include="*.py"

# None default without Optional
grep -rE "=\s*None\s*$" --include="*.py" | grep -v "Optional\|None\s*\|"

Pass criteria: Optional fields have explicit inner types Severity: Medium

---

Category: Async Patterns

Blocking Calls in Async Functions

Search patterns:

# Blocking I/O in async
grep -rE "async def" --include="*.py" -A 30 | grep -E "time\.sleep\(|requests\.|open\(|\.read\(\)|\.write\("

# Blocking database calls
grep -rE "async def" --include="*.py" -A 30 | grep -E "\.execute\(|\.query\(" | grep -v "await"

Pass criteria: All I/O in async functions is awaited Severity: Critical

---

Missing Await Keywords

Search patterns:

# Find async function calls without await (two-step process):
# Step 1: Extract async function names defined in the codebase
grep -rE "async def (\w+)\(" --include="*.py" -ho | sed 's/async def //' | sed 's/($//' | sort -u

# Step 2: For each async function name, check for calls without await
# Example: if 'fetch_data' is async, search for calls not preceded by await
grep -rE "\bfetch_data\s*\(" --include="*.py" | grep -v "await\s\+fetch_data\|await fetch_data"

# Common async methods called without await
grep -rE "\.(read|write|execute|commit|send|recv|connect|close)\s*\(" --include="*.py" | grep -v "await"

Pass criteria: All coroutines are awaited Severity: Critical

---

Improper Task Handling

Search patterns:

# Fire-and-forget tasks
grep -rE "asyncio\.create_task\(" --include="*.py" | grep -v "await\|tasks\.append\|gather"

# Missing exception handling in tasks
grep -rE "create_task\(" --include="*.py" -A 10 | grep -v "try:\|except:"

Pass criteria: Background tasks are tracked and exceptions handled Severity: High

---

Missing Timeout Handling

Search patterns:

# HTTP requests without timeout
grep -rE "httpx\.(get|post|put|delete)\(|requests\.(get|post)" --include="*.py" | grep -v "timeout="

# aiohttp without timeout
grep -rE "session\.(get|post)\(" --include="*.py" | grep -v "timeout="

Pass criteria: All external calls have timeouts Severity: High

---

Category: Error Handling (Backend)

Generic Exception Catches

Search patterns:

# Bare except or Exception catch
grep -rE "except\s*:|except\s+Exception:" --include="*.py"

Pass criteria: Catch specific exceptions, not bare Exception Severity: Medium

---

Missing HTTPException Usage

Search patterns:

# Routes that raise generic exceptions
grep -rE "raise\s+\w+Error\(|raise\s+Exception\(" --include="*.py" | grep -v "HTTPException"

Pass criteria: Routes raise HTTPException with proper status codes Severity: Medium

---

Swallowed Exceptions

Search patterns:

# Except with pass or continue
grep -rE "except.*:\s*$" --include="*.py" -A 1 | grep -E "pass$|continue$"

# Except with only logging
grep -rE "except.*:" --include="*.py" -A 2 | grep -E "logger\.(error|warning|info)" | grep -v "raise"

Pass criteria: Exceptions are handled or re-raised Severity: High

---

Missing Error Response Schemas

Search patterns:

# HTTPException without detail structure
grep -rE "HTTPException\(" --include="*.py" | grep -v "detail={"

Pass criteria: Error responses have consistent, typed structure Severity: Low

---

Category: Database/ORM

Missing Session Management

Search patterns:

# Sessions not closed or context-managed
grep -rE "Session\(\)" --include="*.py" | grep -v "with\s|yield"

# Raw connections not closed
grep -rE "\.connect\(\)" --include="*.py" -A 10 | grep -v "\.close\(\)|with\s"

Pass criteria: All sessions/connections properly managed Severity: High

---

Transactions Not Committed/Rolled Back

Search patterns:

# Begin without commit/rollback
grep -rE "\.begin\(\)" --include="*.py" -A 20 | grep -v "\.commit\(\)|\.rollback\(\)"

# Multiple writes without transaction
grep -rE "\.add\(|\.delete\(" --include="*.py" -B 5 | grep -v "begin\|transaction"

Pass criteria: Transactions explicitly committed or rolled back Severity: High

---

Lazy Loading in Async Context

Search patterns:

# Accessing relationships in async code
grep -rE "async def" --include="*.py" -A 30 | grep -E "\.\w+\.\w+\s*$|\.\w+\[" | grep -v "await"

Pass criteria: Use eager loading or explicit queries in async Severity: High

---

Missing Database Indexes

Search technique:

• Review model definitions for commonly queried fields
• Check if foreign keys and filter fields have indexes

Search patterns:

# Filter/order fields without index
grep -rE "\.filter\(.*==|\.order_by\(" --include="*.py"
# Compare with index definitions in models

Pass criteria: Frequently queried fields have indexes Severity: Medium

---

Raw SQL Without Parameterization

Search patterns:

# text() without bind parameters
grep -rE "text\(['\"].*\{|text\(f['\"]" --include="*.py"

# execute with string formatting
grep -rE "\.execute\(.*%.*%" --include="*.py"

Pass criteria: All raw SQL uses bind parameters Severity: Critical

Frontend Review Checklist

Domain-specific review items for React, TypeScript, Tailwind CSS, and React Query codebases.

Add these categories to the summary table:

• React Architecture
• State Management
• TypeScript Quality
• React Query
• Tailwind CSS
• Performance (React)

---

Category: Security (Frontend)

Dangerous HTML Rendering (XSS)

Search patterns:

# Find dangerouslySetInnerHTML usage
grep -r "dangerouslySetInnerHTML" --include="*.tsx" --include="*.jsx"

# Find innerHTML assignments
grep -r "\.innerHTML\s*=" --include="*.ts" --include="*.tsx" --include="*.js"

Pass criteria: No usage, OR all usage properly sanitizes input with DOMPurify or similar Severity: Critical

---

Unsanitized URL Parameters

Search patterns:

# Direct use of URL params
grep -rE "(window\.location|useSearchParams|URLSearchParams)" --include="*.tsx" --include="*.ts"

# Template literals in href/src
grep -rE "(href|src)=\{`" --include="*.tsx"

Pass criteria: All URL parameters validated before use Severity: High

---

Sensitive Data in localStorage

Search patterns:

grep -rE "localStorage\.(setItem|getItem).*['\"]?(token|auth|password|secret|key|credential)" --include="*.ts" --include="*.tsx"

Pass criteria: No auth tokens or secrets in localStorage (use httpOnly cookies) Severity: High

---

Category: React Architecture

God Components (Oversized)

Search technique:

# Find large component files (>300 lines)
find . -name "*.tsx" -exec wc -l {} \; | awk '$1 > 300 {print}'

# Then review each for:
# - Multiple unrelated responsibilities
# - Many useState calls (>5)
# - Mixed concerns (fetching + logic + UI)

Pass criteria: No components over 300 lines with mixed concerns Severity: Medium

---

Array Index as Key

Search patterns:

grep -rE "key=\{(index|i|idx)\}" --include="*.tsx" --include="*.jsx"
grep -rE "\.map\([^)]*,\s*(index|i|idx)\)" --include="*.tsx" --include="*.jsx"

Pass criteria: No index-based keys in dynamic lists Severity: Medium

---

Missing Keys in Lists

Search technique:

# Find map calls, then check if key prop exists
grep -rn "\.map(" --include="*.tsx" --include="*.jsx"
# Review each to ensure returned elements have key props

Pass criteria: All mapped elements have stable, unique keys Severity: Medium

---

Prop Drilling (3+ Levels)

Search technique:

• Identify components passing props through without using them
• Look for same prop name appearing in multiple nested component signatures
• Search for props passed unchanged through intermediary components

Pass criteria: Props not passed through more than 2 component levels Severity: Low

---

Spreading Unknown Props

Search patterns:

grep -rE "\{\.\.\.props\}|\{\.\.\.rest\}" --include="*.tsx"

Review: Verify spread is intentional and typed, not spreading onto DOM elements Pass criteria: No untyped prop spreading onto DOM elements Severity: Medium

---

Category: State Management

State Declared as Variables

Search patterns:

# Variables in component body that should be state
grep -rE "^\s+(let|var)\s+\w+\s*=" --include="*.tsx" -A 5 | grep -v "const"

Pass criteria: Persistent values use useState or useRef Severity: High

---

Direct State Mutation

Search patterns:

# Array mutations
grep -rE "\.(push|pop|shift|unshift|splice|sort|reverse)\(" --include="*.tsx" --include="*.ts"

# Object property assignment on state
grep -rE "state\.\w+\s*=" --include="*.tsx"

Pass criteria: All state updates create new references Severity: High

---

Props Copied to State

Search patterns:

grep -rE "useState\(props\." --include="*.tsx"
grep -rE "useState\(\{.*props\." --include="*.tsx"

Pass criteria: No copying props to state (except for intentional "initial value" patterns) Severity: Medium

---

Derived State Stored

Search technique:

• Look for useState that computes from other state
• Search for "total", "count", "sum", "filtered", "sorted" state variables
• Check if these could be computed with useMemo instead

Pass criteria: Computed values derived in render or useMemo, not stored Severity: Medium

---

useEffect Missing Dependencies

Search patterns:

# Empty dependency arrays that reference outer scope
grep -rE "useEffect\([^)]+,\s*\[\s*\]\)" --include="*.tsx" -A 10

Review: Check if effect body references variables not in deps array Pass criteria: All referenced variables in dependency array Severity: High

---

Data Fetching in useEffect

Search patterns:

grep -rE "useEffect.*fetch\(|useEffect.*axios\.|useEffect.*\.get\(" --include="*.tsx"

Pass criteria: Data fetching uses React Query, not raw useEffect Severity: Medium

---

Category: TypeScript Quality

Any Type Usage

Search patterns:

grep -rE ":\s*any\b|<any>|as any" --include="*.ts" --include="*.tsx"

Pass criteria: No any types (or each is justified with comment) Severity: High

---

Type Assertions (as Type)

Search patterns:

grep -rE "\bas\s+\w+" --include="*.ts" --include="*.tsx" | grep -v "as const"

Review: Each assertion should be necessary and safe Pass criteria: Minimal assertions, none that bypass type checking unsafely Severity: Medium

---

Missing Component Prop Types

Search patterns:

# Functions without typed props
grep -rE "function\s+\w+\s*\(\s*props\s*\)" --include="*.tsx"
grep -rE "const\s+\w+\s*=\s*\(\s*props\s*\)" --include="*.tsx"

# Arrow functions without type annotation
grep -rE "=>\s*\{" --include="*.tsx" -B 2 | grep -v "Props"

Pass criteria: All components have explicit prop interfaces Severity: Medium

---

Event Handler Types

Search patterns:

grep -rE "\(e\)|\(event\)|\(e:\s*any\)" --include="*.tsx"

Pass criteria: Event handlers use proper React event types Severity: Low

---

Untyped API Responses

Search patterns:

grep -rE "\.then\(\s*\(?\s*data\s*\)?" --include="*.ts" --include="*.tsx"
grep -rE "await fetch" --include="*.ts" --include="*.tsx"

Pass criteria: All API responses have defined types Severity: High

---

ts-ignore and ts-nocheck

Search patterns:

grep -rE "@ts-ignore|@ts-nocheck|@ts-expect-error" --include="*.ts" --include="*.tsx"

Pass criteria: No suppressions, or each has justifying comment Severity: High

---

Category: React Query (TanStack Query)

Missing QueryClientProvider

Search technique:

• Check app root/entry point for QueryClientProvider
• Verify provider wraps the entire application

Pass criteria: QueryClientProvider exists at app root Severity: Critical (if using React Query)

---

Query Keys Missing Dynamic Parameters

Search patterns:

grep -rE "queryKey:\s*\[['\"]" --include="*.ts" --include="*.tsx" -A 5

Review: Check if queryFn uses variables not in queryKey Pass criteria: All dynamic parameters in queryKey Severity: High

---

Query Data Copied to Redux/Context

Search patterns:

grep -rE "dispatch\(.*data\)" --include="*.tsx"
grep -rE "useEffect.*set.*\(.*data" --include="*.tsx"

Pass criteria: Query data used directly, not synced to other state Severity: Medium

---

Missing Enabled Flag for Conditional Queries

Search patterns:

grep -rE "useQuery\(" --include="*.tsx" -A 10 | grep -v "enabled"

Review: Check if any queries depend on undefined values Pass criteria: Conditional queries use enabled flag Severity: Medium

---

Missing Query Invalidation After Mutations

Search patterns:

grep -rE "useMutation\(" --include="*.tsx" -A 15

Review: Check for onSuccess/onSettled with queryClient.invalidateQueries Pass criteria: Mutations invalidate related queries Severity: High

---

Category: Tailwind CSS

Arbitrary Values (Magic Numbers)

Search patterns:

grep -rE "\[([\d]+px|[\d]+rem|#[a-fA-F0-9]+)\]" --include="*.tsx" --include="*.jsx"

Examples to flag: w-[347px], text-[13px], bg-[#ff5733] Pass criteria: Uses design tokens from config, not arbitrary values Severity: Medium

---

Missing Responsive Variants

Search technique:

• Check layout components for responsive breakpoints
• Look for fixed widths without sm:, md:, lg: variants

Pass criteria: Key layouts have responsive variants Severity: Medium

---

Missing Focus States

Search patterns:

grep -rE "<button|<a\s|onClick" --include="*.tsx" | grep -v "focus:"

Pass criteria: Interactive elements have focus indicators Severity: High (accessibility)

---

Important Overuse

Search patterns:

grep -rE "!\w+-" --include="*.tsx"

Examples: !mt-4, !text-red-500 Pass criteria: Minimal or no !important usage Severity: Low

---

Conflicting Classes

Search patterns:

# Look for contradictory utilities in same className
grep -rE "flex.*block|block.*flex|hidden.*visible|mt-\d+.*mt-\d+" --include="*.tsx"

Pass criteria: No conflicting utility classes Severity: Low

---

Inline Styles Mixed with Tailwind

Search patterns:

grep -rE "style=\{" --include="*.tsx" | grep "className"

Pass criteria: Consistent approach - either Tailwind or inline, not mixed Severity: Low

---

Category: Performance (React)

Missing useMemo for Expensive Computations

Search technique:

• Find .filter(), .map(), .reduce(), .sort() in render
• Check if results are memoized

Pass criteria: Expensive computations memoized Severity: Medium

---

Missing useCallback for Prop Functions

Search patterns:

grep -rE "on\w+=\{\s*\(" --include="*.tsx"

Review: Check if inline functions are passed to memoized children Pass criteria: Callback props use useCallback when appropriate Severity: Low

---

Large Lists Without Virtualization

Search technique:

• Find .map() calls rendering lists
• Check array sizes (if static) or data source sizes

Pass criteria: Lists >100 items use virtualization Severity: Medium

---

Missing Error Boundaries

Search patterns:

grep -rE "componentDidCatch|ErrorBoundary" --include="*.tsx"

Pass criteria: Error boundaries exist for critical sections Severity: Medium

---

Missing Loading States

Search technique:

• Review components that fetch data
• Check for loading indicators

Search patterns:

grep -rE "isLoading|isPending|loading" --include="*.tsx"

Pass criteria: Async operations show loading state Severity: Medium

---

Missing Error States

Search patterns:

grep -rE "isError|error\s*\?" --include="*.tsx"

Pass criteria: Error conditions are handled and displayed Severity: Medium