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. ## 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](../../../ARCHITECTURE.md) - Templates: [../../TEMPLATES.md](../../TEMPLATES.md) - Sub-agents: [../../../agents/README.md](../../../agents/README.md)