/code-reviewer

name: code-reviewer
description: Automatic code quality and best practices analysis. Use proactively when files are modified, saved, or committed. Analyzes code style, patterns, potential bugs, and security basics. Triggers on file changes, git diff, code edits, quality mentions.
allowed-tools: Read, Grep, Glob

Code Reviewer Skill

Lightweight automatic code quality checks while you code.

When I Activate

• ✅ Files modified or saved
• ✅ Git diff run
• ✅ Code mentioned in conversation
• ✅ User asks about code quality
• ✅ Before commits

What I Check

Quick Wins

• Code style and formatting issues
• Common anti-patterns
• Obvious bugs (null checks, undefined references)
• Basic security patterns (hardcoded secrets)
• Import/export issues
• Unused variables and functions

What I Don't Do

• Deep architectural review → Use **@code-reviewer** sub-agent
• Comprehensive security audit → Use **security-auditor** skill
• Performance profiling → Use **@architect** sub-agent
• Full refactoring plans → Use **@code-reviewer** sub-agent

Relationship with @code-reviewer Sub-Agent

**Me (Skill):** Fast, lightweight, real-time feedback **@code-reviewer (Sub-Agent):** Deep analysis with examples and strategy

Workflow

1. You write code 2. I auto-analyze (instant feedback) 3. I flag: "⚠️ Potential issue on line 42" 4. You want details → Invoke **@code-reviewer** sub-agent 5. Sub-agent provides comprehensive analysis

Analysis Examples

JavaScript/TypeScript

// You write this code:
function getUser(id) {
  return db.query(`SELECT * FROM users WHERE id = ${id}`);
}

// I immediately flag:
// 🚨 Line 2: SQL injection vulnerability
// 💡 Use parameterized queries

React

// You write:
function UserList({ users }) {
  return users.map(user => <User data={user} />);
}

// I flag:
// ⚠️ Missing key prop in list rendering (line 2)
// 💡 Add key={user.id} to User component

Python

# You write:
def process_data(data):
    return data['user']['profile']['name']

# I flag:
# ⚠️ Potential KeyError - no safety checks (line 2)
# 💡 Use .get() or add try/except

Check Categories

Code Style

• Inconsistent naming conventions
• Missing semicolons (JavaScript)
• Improper indentation
• Long functions (>50 lines)
• Magic numbers

Potential Bugs

• Null/undefined access without checks
• Array access without bounds checking
• Type mismatches (TypeScript)
• Unreachable code
• Infinite loops

Basic Security

• Hardcoded API keys or secrets
• SQL injection patterns
• eval() or exec() usage
• Insecure random number generation
• Missing input validation

Best Practices

• Missing error handling
• Console.log in production code
• Commented-out code blocks
• TODO comments without context
• Overly complex conditions

Output Format

🤖 code-reviewer skill:
  [Severity] Issue description (file:line)
  💡 Quick fix suggestion
  📖 Reference: [link to learn more]

Severity Levels

• 🚨 **CRITICAL**: Must fix (security, data loss)
• ⚠️ **HIGH**: Should fix (bugs, performance)
• 📋 **MEDIUM**: Consider fixing (maintainability)
• 💡 **LOW**: Nice to have (style, readability)

When to Invoke Sub-Agent

After I flag issues, invoke **@code-reviewer** sub-agent for:

• Detailed explanation of the issue
• Multiple fix alternatives with pros/cons
• Architectural recommendations
• Refactoring strategies
• Best practice guidelines

**Example:**

Me: "⚠️ Potential N+1 query detected"
You: "@code-reviewer explain the N+1 issue and show optimal solution"
Sub-agent: [Provides comprehensive analysis with examples]

Sandboxing Compatibility

**Works without sandboxing:** ✅ Yes (default, recommended for learning) **Works with sandboxing:** ✅ Yes (no special configuration needed)

• **Filesystem**: Read-only access to project files
• **Network**: None required
• **Configuration**: None required

Customization

Want different checks or patterns?

1. Copy this skill:

   cp -r ~/.claude/skills/development/code-reviewer ~/.claude/skills/development/my-code-reviewer

2. Edit `SKILL.md`:

• Modify `description` to adjust triggers
• Customize check categories
• Add language-specific patterns

3. Restart Claude Code:

   claude --restart

See [../../TEMPLATES.md](../../TEMPLATES.md) for customization guide.

Examples in Action

TypeScript Function

// Before:
async function fetchUsers(ids) {
  const users = [];
  for (let id of ids) {
    const user = await User.findById(id);  // N+1 query!
    users.push(user);
  }
  return users;
}

// I flag:
// ⚠️ N+1 query pattern detected (line 4)
// 💡 Use User.findByIds(ids) for batch loading

// After fix:
async function fetchUsers(ids) {
  return await User.findByIds(ids);
}

React Component

// Before:
function UserCard({ user }) {
  const [data, setData] = useState();

  useEffect(() => {
    fetch(`/api/users/${user.id}`)
      .then(res => res.json())
      .then(setData);
  }, []);  // Missing dependency!

  return <div>{data?.name}</div>;
}

// I flag:
// ⚠️ useEffect dependency array incomplete (line 6)
// 💡 Add user.id to dependencies: [user.id]

// After fix:
useEffect(() => {
  fetch(`/api/users/${user.id}`)
    .then(res => res.json())
    .then(setData);
}, [user.id]);

Integration with /review Command

The `/review` command aggregates my findings with deep sub-agent analysis:

/review --scope staged --checks all

# Command workflow:
# 1. Collects my automatic findings
# 2. Invokes @code-reviewer sub-agent for deep analysis
# 3. Invokes @security-auditor sub-agent
# 4. Generates comprehensive report with priorities

Performance Impact

• **Activation time**: < 100ms
• **Analysis time**: < 1 second per file
• **Memory usage**: Minimal (read-only)
• **Background operation**: Non-blocking

This skill operates asynchronously and won't slow down your coding workflow.

La