web-researcher

What this skill does

# Web Researcher Skill

## Purpose

Perform comprehensive web research for technical documentation, solutions, and technology comparisons using Gemini's web access capabilities through the gemini-web-researcher subagent. This skill finds current documentation, researches best practices, compares technologies, and gathers technical information by spawning a specialized subagent that wraps gemini-cli.

## When to Use This Skill

Use this skill when you need to:
- Find latest documentation for libraries, frameworks, or APIs
- Research solutions to technical problems and troubleshooting
- Compare technologies, libraries, frameworks, or approaches
- Look up best practices and current recommendations
- Understand third-party APIs and SDKs
- Research security patterns and vulnerability mitigations
- Find performance optimization techniques
- Stay updated on framework/tool changes and migrations

Do NOT use this skill when:
- Information is already in the codebase (use Read tool or code-analyzer skill)
- You need to analyze code patterns (use code-analyzer skill)
- The question can be answered from your training data
- Real-time information isn't necessary

## 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 and web access
3. **Clear research goals**: Know what information you're looking for
4. **Context about the problem**: Understand why this research is needed

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

## Instructions

### Step 1: Understand the Research Request

Identify what type of research is needed:
- **Documentation Lookup**: Finding official docs, API references, guides
- **Solution Research**: Finding fixes, workarounds, best practices
- **Technology Comparison**: Evaluating different options and trade-offs
- **API/SDK Research**: Understanding third-party integrations
- **Updates & Migrations**: Learning about new features and changes
- **Architecture Patterns**: Researching design patterns and approaches
- **Security Research**: Finding security best practices and mitigations
- **Performance**: Researching optimization techniques

### Step 2: Gather Context

Collect relevant information:
- **Current tech stack**: What technologies are being used
- **Specific problem**: What issue needs solving or information needed
- **Constraints**: Version requirements, compatibility needs, limitations
- **Use case**: How the information will be applied
- **Urgency**: Whether latest/cutting-edge info is needed

### Step 3: Spawn the Gemini Web Researcher Subagent

Use the Task tool to spawn the gemini-web-researcher subagent with a detailed research request.

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

**Your prompt should include:**
1. **Context**: What project/problem this research is for
2. **Research type**: Which category from Step 1
3. **Specific question**: Exactly what to research
4. **Information needed**: What details are important
5. **Current year/relevance**: Request current/recent information
6. **Output format**: How to structure the results

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

The subagent needs detailed context to construct effective research prompts. Include:

**Project Context:**
- Technology stack being used
- Current implementation or approach
- Version numbers if relevant
- Scale or complexity of the project

**Research Specifics:**
- Exact question or problem to research
- Why this information is needed
- How it will be applied
- Any specific requirements or constraints

**Desired Output:**
- Links to official documentation
- Code examples if applicable
- Comparison tables for evaluations
- Step-by-step guides for implementations
- Current best practices and recommendations

**Example Prompt to Subagent:**
```
I need to research authentication solutions for a Next.js 14 application.

Context:
- Next.js 14 App Router application
- Need user authentication with email/password and OAuth
- Planning to use PostgreSQL for user data
- Must support session management and protected routes

Research Request:
Find current best practices and solutions for implementing authentication in Next.js 14 applications. Specifically research:

1. Authentication Libraries:
   - Compare NextAuth.js, Clerk, Supabase Auth, and Lucia
   - Pros and cons of each
   - Which works best with Next.js 14 App Router

2. Implementation Patterns:
   - How to protect routes in App Router
   - Session management approaches
   - Token storage best practices

3. OAuth Integration:
   - Setting up Google and GitHub OAuth
   - Recommended providers

4. Security Considerations:
   - CSRF protection
   - Secure token handling
   - Best practices for 2024

Please include:
- Links to official documentation
- Code examples where relevant
- Current recommendations (2024)
- Migration guides if applicable

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

### Step 5: Process Subagent Results

Once the subagent returns gemini research results:

1. **Review the raw findings**: The subagent returns uninterpreted gemini output
2. **Extract key information**: Pull out relevant documentation, solutions, comparisons
3. **Summarize for the user**: Create a clear, actionable summary
4. **Provide links**: Include all documentation links found
5. **Make recommendations**: Suggest best approaches based on research
6. **Identify next steps**: What should be done with this information

### Step 6: Follow Up If Needed

If the initial research needs more detail:
- Spawn the subagent again with a more focused request
- Research specific aspects in more depth
- Compare specific options more thoroughly
- Find additional examples or use cases

## Examples

### Example 1: Documentation Lookup

**User Request:** "How do I use React Server Components in Next.js 14?"

**Step 1 - Identify**: Documentation Lookup

**Step 2 - Gather Context:**
- Tech: Next.js 14 with React
- Need: Understanding Server Components
- Use case: Building new features correctly

**Step 3 - Spawn Subagent:**

```
Task tool with subagent_type: "gemini-web-researcher"

Prompt:
"Research React Server Components in Next.js 14.

Context:
- Next.js 14 application using App Router
- Need to understand Server Components vs Client Components
- Want to use this for building new features

Research Request:
Find the latest Next.js 14 documentation on React Server Components. Include:

1. Core Concepts:
   - What are Server Components?
   - Server vs Client Components differences
   - When to use each type

2. Implementation:
   - How to create Server Components
   - How to mark Client Components ('use client')
   - Data fetching in Server Components
   - Passing props between Server and Client Components

3. Best Practices:
   - Component composition patterns
   - Common pitfalls to avoid
   - Performance considerations

4. Examples:
   - Code examples of Server Components
   - Common patterns (layouts, data fetching, etc.)
   - Real-world use cases

Please provide:
- Links to official Next.js documentation
- Code examples
- Best practices for 2024
- Any recent updates or changes

Run: gemini -p with this research request
Return the raw gemini output."
```

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

## React Server Components in Next.js 14

### Official Documentation
- Next.js Server Components: https://nextjs.org/docs/app/building-your-application/rendering/server-components
- React Server Components RFC: https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md

### Key Concepts

**Server Components (Default in App Router):**
- Run on the server only
- Can directly access backend resources (databases, file system)
- Don't send JavaScript to the c