code-reviewer

# 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

```javascript
// 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

```javascript
// 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

```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](../../TEMPLATES.md) for customization guide.

## Examples in Action

### TypeScript Function

```typescript
// 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

```jsx
// 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:

```bash
/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.