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