code-analyzer

What this skill does

# Code Analyzer Skill

## Purpose

Analyze large codebases using Gemini's 1M token context window through the gemini-code-analyzer subagent. This skill handles pattern detection, code quality analysis, architecture understanding, and comprehensive codebase exploration by spawning a specialized subagent that wraps gemini-cli.

## When to Use This Skill

Use this skill when you need to:
- Detect patterns across large codebases (React hooks, database queries, API patterns)
- Analyze code quality (performance bottlenecks, security vulnerabilities, code smells)
- Understand codebase architecture (component hierarchies, data flow, dependencies)
- Trace feature implementations across multiple files
- Map out the technology stack and testing strategies
- Find legacy patterns or consistency issues for refactoring
- Generate onboarding documentation from code analysis

Do NOT use this skill when:
- Working with small, focused code snippets (use Read tool instead)
- You need real-time web research (use web-researcher skill)
- The task doesn't require comprehensive codebase analysis

## Prerequisites

Before using this skill:
1. **gemini-cli must be installed**: `npm install -g @anthropic/gemini-cli`
2. **gemini-cli must be configured**: With valid API credentials
3. **Access to the codebase**: Ensure gemini-cli can access the project files
4. **Clear analysis goals**: Know what patterns or insights you're looking for

To verify gemini-cli is installed:
```bash
gemini --version
```

## Instructions

### Step 1: Understand the Analysis Request

Identify what type of analysis is needed:
- **Pattern Detection**: Finding specific code patterns (hooks, queries, components)
- **Architecture**: Understanding system structure and relationships
- **Code Quality**: Identifying issues, vulnerabilities, technical debt
- **Technology Stack**: Analyzing dependencies, testing, tooling
- **Feature Tracing**: Following implementation across files
- **Refactoring**: Finding inconsistencies or legacy patterns
- **Documentation**: Generating insights for onboarding

### Step 2: Gather Context

Collect relevant information about:
- **Codebase location**: Current working directory or specific path
- **Technology stack**: Languages, frameworks, tools being used
- **Specific focus areas**: Particular files, directories, or patterns
- **Analysis constraints**: What to include or exclude
- **Expected output format**: How results should be structured

### Step 3: Spawn the Gemini Code Analyzer Subagent

Use the Task tool to spawn the gemini-code-analyzer subagent with a detailed prompt.

**Template:**
```
Use the Task tool with:
- subagent_type: "gemini-code-analyzer"
- description: "[Brief 3-5 word description]"
- prompt: "[Detailed analysis request with context]"
```

**Your prompt should include:**
1. **Context**: What codebase/project is being analyzed
2. **Analysis type**: Which category from Step 1
3. **Specific request**: Exactly what to analyze
4. **Output format**: How to structure the results (list, table, hierarchy, etc.)
5. **Working directory**: Current path if relevant

### Step 4: Provide Comprehensive Context to the Subagent

The subagent needs detailed context to construct effective gemini-cli commands. Include:

**Codebase Information:**
- Project type (web app, API, library, etc.)
- Tech stack (React, Node.js, Python, etc.)
- Project structure overview (if known)
- Current working directory

**Analysis Specifics:**
- What patterns to look for
- Which files/directories to focus on
- Any known issues or areas of concern
- Desired level of detail

**Example Prompt to Subagent:**
```
I need to analyze the React codebase in /Users/joel/my-project for hook usage patterns.

Context:
- This is a Next.js 14 application using the App Router
- Located in: /Users/joel/my-project
- Focus on the app/ and components/ directories
- We're particularly interested in custom hooks

Task:
Analyze all React hooks usage in this codebase. For each hook found:
1. List the hook type (useState, useEffect, custom hooks, etc.)
2. Show where it's used (file paths and approximate line numbers)
3. Identify any custom hooks and their purpose
4. Note any potential issues (missing dependencies, excessive re-renders)

Run gemini-cli with appropriate flags and return the raw output.
```

### Step 5: Process Subagent Results

Once the subagent returns gemini-cli output:

1. **Review the raw results**: The subagent returns uninterpreted gemini output
2. **Interpret findings**: Analyze what gemini found
3. **Summarize for the user**: Create a clear, actionable summary
4. **Provide specific file references**: Include file paths and line numbers
5. **Suggest next steps**: Recommend actions based on findings

### Step 6: Follow Up If Needed

If the initial analysis needs refinement:
- Spawn the subagent again with a more focused request
- Ask for deeper analysis of specific areas
- Request additional context from gemini
- Cross-reference findings with code reads

## Examples

### Example 1: Finding React Hooks Patterns

**User Request:** "Find all React hooks in the codebase and identify any issues"

**Step 1 - Identify**: Pattern Detection analysis

**Step 2 - Gather Context:**
- Codebase: React/Next.js application
- Location: /Users/joel/my-app
- Focus: All .tsx and .jsx files
- Looking for: hooks usage and potential issues

**Step 3 - Spawn Subagent:**

```
Task tool with subagent_type: "gemini-code-analyzer"

Prompt:
"Analyze the React codebase at /Users/joel/my-app for hooks usage patterns.

Context:
- Next.js 14 application with App Router
- TypeScript-based React components
- Focus on all .tsx files in app/ and components/ directories

Analysis Request:
Find all React hooks usage in this codebase and analyze them:

1. Built-in hooks (useState, useEffect, useContext, etc.):
   - Count usage of each hook type
   - Identify the most commonly used hooks

2. Custom hooks:
   - List all custom hooks defined
   - Show where each custom hook is used
   - Describe each custom hook's purpose

3. Potential issues:
   - Missing dependencies in useEffect
   - Hooks called conditionally or in loops
   - Excessive re-renders from state updates
   - Complex hook chains that could be simplified

Output format:
Provide a structured report with file paths and approximate line numbers for each finding.

Run: gemini --all-files --yolo -p with the above analysis prompt
Return the raw gemini output."
```

**Step 5 - Process Results:**
```
Based on gemini's analysis, here's what I found:

## Hooks Usage Summary

### Built-in Hooks
- useState: 47 instances across 23 components
- useEffect: 31 instances across 18 components
- useContext: 12 instances (AuthContext, ThemeContext)
- useCallback: 8 instances
- useMemo: 5 instances

### Custom Hooks (4 found)
1. `useAuth` (hooks/useAuth.ts:12) - Used in 8 components
2. `useLocalStorage` (hooks/useLocalStorage.ts:8) - Used in 3 components
3. `useDebounce` (hooks/useDebounce.ts:5) - Used in 2 components
4. `useFetch` (hooks/useFetch.ts:15) - Used in 6 components

### Issues Identified
⚠️ Missing dependencies in components/Dashboard.tsx:45
⚠️ Conditional hook call in components/UserProfile.tsx:78
⚠️ Potential re-render issue in components/ProductList.tsx:92

Next steps:
1. Fix the missing dependencies in Dashboard component
2. Refactor conditional hook usage in UserProfile
3. Consider memoization in ProductList to reduce re-renders
```

### Example 2: Architecture Analysis

**User Request:** "I need to understand the authentication flow in this application"

**Spawn Subagent:**
```
Task tool with subagent_type: "gemini-code-analyzer"

Prompt:
"Analyze the authentication flow in the codebase at /Users/joel/my-app.

Context:
- Next.js application with API routes
- Using JWT for authentication
- Has both client and server-side auth checks

Analysis Request:
Trace the complete authentication flow through this application:

1. Authentication Entry Points:
   - Where does login/signup happen?