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:

   bash

   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:

   bash

   claude --restart
   

See ../../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.

Language Support

Fully Supported

• •JavaScript/TypeScript (ES6+, React, Node.js)
• •Python (3.8+, Django, FastAPI)
• •Java (Spring Boot patterns)
• •Go (standard patterns)

Partial Support

• •Ruby, PHP, C#, Rust
• •Framework-agnostic patterns apply

Want to add language-specific patterns? See customization guide above.

Tips for Best Results

1. •Write code first, then review - Let me catch issues as you go
2. •Don't ignore warnings - Each flagged issue is worth reviewing
3. •Use sub-agent for learning - Invoke @code-reviewer to understand "why"
4. •Customize for your stack - Add project-specific patterns
5. •Combine with /review - Use command for comprehensive pre-commit checks

Related Tools

• •security-auditor skill: Deeper security vulnerability scanning
• •test-generator skill: Auto-suggest tests for your code
• •@code-reviewer sub-agent: Comprehensive code review with examples
• •/review command: Full workflow with multiple agents

Learn More

• •Architecture: ../../../ARCHITECTURE.md
• •Templates: ../../TEMPLATES.md
• •Sub-agents: ../../../agents/README.md