Skip to content

SKILL.md

Latest commit

 

History

History
289 lines (219 loc) · 7.1 KB

SKILL.md

File metadata and controls

289 lines (219 loc) · 7.1 KB
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 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