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]

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