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.
/plugin marketplace add joel611/claude-plugins/plugin install gemini-research@joel-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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.
Use this skill when you need to:
Do NOT use this skill when:
Before using this skill:
npm install -g @anthropic/gemini-cliTo verify gemini-cli is installed:
gemini --version
Identify what type of research is needed:
Collect relevant information:
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:
The subagent needs detailed context to construct effective research prompts. Include:
Project Context:
Research Specifics:
Desired Output:
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.
Once the subagent returns gemini research results:
If the initial research needs more detail:
User Request: "How do I use React Server Components in Next.js 14?"
Step 1 - Identify: Documentation Lookup
Step 2 - Gather Context:
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 client
- Cannot use hooks or browser APIs
**Client Components ('use client'):**
- Run on both server (for SSR) and client
- Can use hooks and browser APIs
- Required for interactivity
- Add JavaScript bundle to client
### When to Use Each
Use Server Components for:
✓ Data fetching from databases/APIs
✓ Accessing backend resources
✓ Keeping sensitive data on server
✓ Reducing client-side JavaScript
Use Client Components for:
✓ Interactive elements (onClick, onChange)
✓ Using React hooks (useState, useEffect)
✓ Browser APIs (localStorage, geolocation)
✓ Third-party libraries requiring browser
### Implementation Example
Server Component (default):
\`\`\`tsx
// app/products/page.tsx
async function ProductsPage() {
// Direct database access - runs on server
const products = await db.products.findMany();
return (
<div>
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}
\`\`\`
Client Component:
\`\`\`tsx
// components/AddToCart.tsx
'use client';
import { useState } from 'react';
export function AddToCart({ productId }: { productId: string }) {
const [loading, setLoading] = useState(false);
const handleClick = async () => {
setLoading(true);
await addToCart(productId);
setLoading(false);
};
return (
<button onClick={handleClick} disabled={loading}>
Add to Cart
</button>
);
}
\`\`\`
### Best Practices
1. **Default to Server**: Use Server Components by default, only use 'use client' when needed
2. **Push Client Components down**: Keep interactivity at leaf nodes
3. **Fetch data where needed**: Server Components can fetch their own data
4. **Compose carefully**: Server Components can import Client Components, but not vice versa
5. **Avoid prop drilling**: Fetch data close to where it's used
Next step: Start using Server Components for data fetching and reserve Client Components for interactive elements.
User Request: "How can I fix hydration errors in my Next.js app?"
Spawn Subagent:
Task tool with subagent_type: "gemini-web-researcher"
Prompt:
"Research solutions for Next.js hydration errors.
Context:
- Next.js 14 application
- Getting hydration mismatch errors in production
- Need to understand causes and solutions
Research Request:
Find comprehensive information about fixing hydration errors in Next.js:
1. Common Causes:
- What causes hydration mismatches?
- Typical scenarios (dates, IDs, localStorage, etc.)
- Why they happen
2. Debugging:
- How to identify the source of hydration errors
- Tools and techniques for debugging
- Reading error messages
3. Solutions:
- Fixes for date/time hydration issues
- Handling localStorage and browser-only code
- Fixing random ID generation
- Third-party script issues
- Conditional rendering problems
4. Prevention:
- Best practices to avoid hydration errors
- Patterns to use
- Testing strategies
5. Next.js Specific:
- suppressHydrationWarning usage
- useEffect patterns
- Dynamic imports with { ssr: false }
Include:
- Official Next.js documentation links
- Stack Overflow solutions
- Code examples for each scenario
- Current best practices (2024)
Run: gemini -p with this research
Return raw output."
User Request: "Should I use Prisma or Drizzle ORM for my new project?"
Spawn Subagent:
Task tool with subagent_type: "gemini-web-researcher"
Prompt:
"Compare Prisma and Drizzle ORM for a new TypeScript project.
Context:
- Building a new Next.js application
- PostgreSQL database
- TypeScript-first development
- Team of 3 developers with varying SQL experience
Research Request:
Provide a comprehensive comparison of Prisma vs Drizzle ORM:
1. Features:
- Type safety capabilities
- Schema definition approaches
- Migration systems
- Query builders
- Relation handling
2. Performance:
- Query performance benchmarks
- Bundle size impact
- Cold start times (serverless)
- Caching mechanisms
3. Developer Experience:
- Learning curve
- Documentation quality
- IDE support
- Debugging experience
- Community and ecosystem
4. Use Cases:
- When to use Prisma
- When to use Drizzle
- Hybrid approaches
5. Trade-offs:
- Pros and cons of each
- Deal breakers or limitations
- Migration difficulty if switching later
6. Current State (2024):
- Maturity and stability
- Active development
- Community adoption trends
- Recent updates
Please include:
- Links to official documentation
- Benchmark comparisons if available
- Real-world use case examples
- Expert recommendations
- Community sentiment
Create a comparison table and provide a recommendation based on the context.
Run: gemini -p with comparison research
Return raw output."
User Request: "How do I integrate Stripe subscriptions into my app?"
Spawn Subagent:
Task tool with subagent_type: "gemini-web-researcher"
Prompt:
"Research Stripe subscription integration for a Next.js application.
Context:
- Next.js 14 with App Router
- Need to implement subscription billing
- SaaS application with multiple pricing tiers
- PostgreSQL database for user data
Research Request:
Find comprehensive information about implementing Stripe subscriptions:
1. Setup and Configuration:
- Stripe account setup
- API keys management
- Webhook configuration
- Test mode vs production
2. Subscription Creation:
- Creating subscription products and prices
- Implementing checkout flow
- Payment method collection
- Customer creation
3. Subscription Management:
- Handling billing cycles
- Managing pricing tiers
- Upgrades and downgrades
- Cancellations and pauses
4. Webhooks:
- Essential webhooks for subscriptions
- Webhook signature verification
- Handling subscription events
- Error handling and retries
5. Customer Portal:
- Implementing customer billing portal
- Self-service subscription management
- Invoice access
6. Next.js Integration:
- Recommended libraries (@stripe/stripe-js)
- API route implementation
- Server Actions for Stripe operations
- Security best practices
7. Testing:
- Test cards and scenarios
- Testing webhooks locally
- Stripe CLI usage
Include:
- Official Stripe documentation links
- Next.js integration examples
- Complete code snippets
- Best practices for production
- Common pitfalls to avoid
Run: gemini -p with Stripe research
Return raw output."
Problem: gemini-cli is not installed or not in PATH
Solutions:
npm install -g @anthropic/gemini-cligemini --versionProblem: Gemini returns old information or deprecated approaches
Solutions:
Problem: Results are too broad or not actionable
Solutions:
Problem: Research provides concepts but no practical examples
Solutions:
Problem: Technology comparison is generic, not tailored to use case
Solutions:
Problem: No links provided or links don't work
Solutions:
For complex research requiring multiple phases:
New Technology Evaluation:
Problem Solving Workflow:
API Integration Workflow:
Migration Planning Workflow:
Use both skills together for comprehensive understanding:
Audit and Improve Workflow:
Learning Codebase Workflow:
For complex topics requiring iterative exploration, the subagent can use gemini's interactive mode:
Example - Deep Technology Evaluation:
Prompt to subagent:
"Use interactive mode (gemini -i) to research GraphQL vs REST for my use case.
Start by asking gemini about the high-level differences, then based on the response, ask follow-up questions about:
- Performance implications for my scale (1000 req/sec)
- Client complexity differences
- Caching strategies
- Real-time data handling
Conduct this as an interactive research session and return the complete conversation."
The web-researcher skill uses the gemini-web-researcher agent, which:
For more information:
plugins/analysis/gemini-research/agents/web-researcher.mdThis skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.