# Check what's currently loaded
claude mcp list
 
# Remove unnecessary MCPs
claude mcp remove puppeteer
claude mcp remove sqlite
 
# Add specific MCPs only when needed
# Example: Add Playwright for browser testing
claude mcp add playwright npx @playwright/mcp@latest
 
# Example: Add Context7 for getting latest documentation on libs/frameworks
claude mcp add context7 -- npx -y @upstash/context7-mcp

<!-- .claude/commands/react-patterns.md -->
 
You are a senior React/TypeScript developer writing production-ready code.
 
## Our Stack
 
- React 18 with TypeScript strict mode
- Tailwind CSS (utilities only, never custom CSS)
- Next.js 14 for routing and SSR
- Supabase for backend and auth
- Convex for real-time data
 
## Non-Negotiable Patterns
 
- Extract ALL business logic to custom hooks
- Components max 50 lines - compose smaller parts
- TypeScript interfaces for all props (no 'any' types)
- Tailwind utilities only - zero custom CSS
- Always include loading and error states
 
## File Structure
 
src/
├── components/ # UI only, no business logic
├── hooks/ # All business logic here
├── types/ # TypeScript interfaces
└── pages/ # Next.js pages
 
## Example of Our Pattern
 
// ✅ Correct: Clean component with extracted logic
interface UserProfileProps {
userId: string;
}
 
function UserProfile({ userId }: UserProfileProps) {
const { user, loading, error } = useUser(userId);
 
if (loading) return <ProfileSkeleton />;
if (error) return <ErrorBoundary error={error} />;
 
return (
 
<div className="p-6 border border-gray-200 rounded-lg">
<h2 className="text-xl font-semibold">{user.name}</h2>
<p className="text-gray-600">{user.email}</p>
</div>
);
}

claude
 
# Load your React patterns instantly
> /react-patterns Create a user settings component with form validation

<!-- .claude/commands/review.md -->
 
You are a senior engineer conducting a thorough code review.
 
Focus exclusively on reviewing code for:
 
- Adherence to our React patterns (hooks extracted, <50 lines)
- TypeScript strictness (no 'any' types)
- Tailwind usage (no custom CSS)
- Error handling (loading/error states)
- Test coverage
 
Provide focused, actionable feedback. Be specific about what needs to change.

<!-- .claude/commands/testing.md -->
 
You are a testing specialist using React Testing Library and Jest.
 
## Our Testing Standards
 
- Unit tests for all custom hooks
- Integration tests for user flows
- Test behavior, not implementation
- Focus on what users see and do
 
## Always Test
 
- Loading states
- Error states
- Success paths
- Edge cases

# Development work
claude
> /react-patterns Build the checkout flow
 
# Code review (same session or new one)
> /review @src/components/CheckoutForm.tsx
 
# Testing work
> /testing @src/components/CheckoutForm.tsx Write comprehensive tests

# When you establish important context, save it to memory
> # This project uses Supabase auth, TypeScript strict mode, Tailwind only
> # Components max 50 lines, custom hooks for all business logic
> # We're building an e-commerce platform with real-time inventory
 
# When context gets full, compact strategically
> /compact Keep only the current feature work and our coding standards
 
# For major context shifts, clear and start fresh
> /clear
 
# Reference previous work through CLAUDE.md
> Check CLAUDE.md for our auth implementation. Build the user settings page following the same patterns.

## <!-- .claude/agents/react-researcher.md -->
 
name: react-researcher
description: Use PROACTIVELY when researching React patterns, best practices, or implementation approaches. Research specialist who plans but never implements.
tools: read, search, bash
model: sonnet
 
---
 
You are a React research specialist who creates implementation plans.
 
## Your Role - CRITICAL
 
1. Research best practices for the requested feature
2. Analyze trade-offs and implementation approaches
3. Create detailed architectural plans with code examples
4. Save findings to docs/research/[feature]-plan.md
5. Return ONLY a 3-line summary to the main thread
 
## Research Process
 
1. Use Context7 MCP or web search for latest patterns
2. Check our codebase for existing similar implementations
3. Document pros/cons of different approaches
4. Provide specific, actionable recommendations
 
## Output Format
 
Save to docs/research/[feature]-plan.md:
 
# [Feature] Implementation Plan
 
## Recommended Approach
 
[Specific recommendation with reasoning]
 
## Implementation Steps
 
1. [Step with code example]
2. [Step with code example]
 
## Trade-offs
 
- Pro: [specific benefit]
- Con: [specific drawback]
 
## Examples
 
[Code examples showing the pattern]
 
NEVER write implementation code. Your job is to research and plan so the main agent can implement efficiently.

## <!-- .claude/agents/code-reviewer.md -->
 
name: code-reviewer
description: Use PROACTIVELY for code review. Expert at identifying issues with React patterns, TypeScript, and our coding standards.
tools: read, grep, bash
model: sonnet
 
---
 
You are a senior code reviewer specializing in our tech stack.
 
## Review Checklist
 
- React patterns (hooks extracted, <50 lines, proper composition)
- TypeScript strictness (no 'any', proper interfaces)
- Tailwind usage (no custom CSS)
- Error handling (loading/error states)
- Security considerations
- Performance implications
 
## Review Process
 
1. Read all relevant files
2. Analyze against our standards
3. Check for common anti-patterns
4. Verify test coverage
5. Save detailed review to docs/reviews/[feature]-review.md
6. Return ONLY summary with severity counts
 
## Output Format
 
Save to docs/reviews/[feature]-review.md:
 
# Code Review: [Feature]
 
## Critical Issues (Must Fix)
 
- [Issue with file:line reference]
 
## Warnings (Should Fix)
 
- [Issue with explanation]
 
## Suggestions (Consider)
 
- [Improvement opportunity]
 
## Strengths
 
- [What was done well]
 
Return to main thread: "Review complete. Found X critical, Y warnings, Z suggestions. Details in docs/reviews/[feature]-review.md"

claude
 
# Automatic invocation - Claude detects when to use sub-agent
> I need to implement user authentication with social login
# Claude automatically uses react-researcher sub-agent
# Sub-agent researches, saves to docs/research/auth-plan.md
# Returns: "Research complete. OAuth 2.0 recommended. Plan in docs/research/auth-plan.md"
 
# Manual invocation - You explicitly request a sub-agent
> Use react-researcher to analyze form validation patterns for our checkout flow
 
# Review with sub-agent
> Use code-reviewer to review the authentication implementation
> @src/components/LoginForm.tsx
> @src/hooks/useAuth.ts
# Sub-agent reviews, saves detailed findings
# Returns: "Review complete. Found 1 critical, 2 warnings. Details in docs/reviews/auth-review.md"
 
# Main agent stays clean and focused
> Read docs/research/auth-plan.md and implement OAuth login following our React patterns

WITHOUT SUB-AGENTS:
 
Main-context: 200K tokens
├─ Research on OAuth: 45K tokens
├─ API documentation: 30K tokens
├─ Implementation work: 60K tokens
├─ Test logs: 40K tokens
└─ Code review: 25K tokens
= TOTAL: 200K (context exhausted, performance degrading)
 
WITH SUB-AGENTS:
 
Main-context: 35K tokens
├─ Research sub-agent summary: 1K tokens
├─ Implementation work: 30K tokens
└─ Review sub-agent summary: 1K tokens
= TOTAL: 35K tokens (165K saved, context stays clean)
 
Sub-agent contexts (isolated):
├─ Researcher burned: 80K tokens (in its own window)
└─ Reviewer burned: 65K tokens (in its own window)

claude
 
# Interactive sub-agent creation
> /agents
 
# Choose "Create new agent"
# Claude guides you through:
# - Name and description
# - Tools needed
# - System prompt
 
# Or ask Claude to generate one
> Create a sub-agent for analyzing database performance issues
# Claude generates the markdown file for you to customize

# List all sub-agents
> /agents
 
# View sub-agent details
> Show me the react-researcher sub-agent config
 
# Edit a sub-agent
> /agents
# Select agent to edit

claude
 
# Step 1: Research (sub-agent)
> I need to add real-time chat to our app
# react-researcher sub-agent activates
# Researches Convex patterns, WebSocket alternatives, state management
# Saves detailed plan to docs/research/realtime-chat-plan.md
# Returns: "Convex subscriptions recommended. Plan ready."
 
# Step 2: Implement (main agent)
> /react-patterns Read docs/research/realtime-chat-plan.md
> Implement the MessageList component with real-time updates
# Main agent implements following the plan
# Context stays clean, focused on implementation
 
# Step 3: Review (sub-agent)
> Use code-reviewer to review the chat implementation
# Reviewer sub-agent analyzes all files
# Checks patterns, security, performance
# Saves to docs/reviews/chat-review.md
# Returns: "2 warnings found. Review saved."
 
# Step 4: Fix (main agent)
> Read docs/reviews/chat-review.md and fix the warnings
# Main agent reads review, makes focused fixes
 
# Step 5: Verify (sub-agent)
> Use code-reviewer to verify fixes
# Returns: "All issues resolved. ✅"

<!-- Make your patterns more specific -->
 
## CRITICAL - Never Deviate
 
- TypeScript strict mode ONLY (no JavaScript)
- Tailwind utilities ONLY (if I see custom CSS, you failed)
- Custom hooks for ALL business logic (no exceptions)
- Components max 50 lines (hard limit, no negotiation)
 
## File Naming Rules
 
- Components: PascalCase (UserProfile.tsx)
- Hooks: camelCase with 'use' prefix (useUser.ts)
- Types: PascalCase with domain suffix (UserTypes.ts)
 
## Stack (Don't suggest alternatives)
 
- Database: Supabase (not Firebase, not MongoDB)
- Styling: Tailwind (not CSS Modules, not styled-components)
- State: React Query + Zustand (not Redux, not Context)

# Method 1: Reload your context command
> /react-patterns Remember our patterns and continue with the checkout flow
 
# Method 2: Add critical reminders to memory
> # Critical reminder: TypeScript strict, Tailwind only, custom hooks for logic
 
# Method 3: Compact at checkpoints
> /compact Preserve only: current feature work, our coding standards, decisions made

# Check if you're near limit (look for auto-compact warnings)
 
# Option 1: Compact and continue
> /compact Keep current feature and coding patterns only
 
# Option 2: Clear and start fresh
> Save progress summary to CLAUDE.md
> /clear
> Load from CLAUDE.md and continue

# See what's loaded
claude mcp list
 
# Remove what you're not using
claude mcp remove puppeteer
claude mcp remove sqlite
 
# Add back only when needed
claude mcp add playwright npx @playwright/mcp@latest

# Complete feature development with research and verification
claude
 
# Step 1: Research with sub-agent
> I need to add payment processing with Stripe
# react-researcher sub-agent activates automatically
# Researches Stripe best practices, security considerations
# Saves to docs/research/stripe-payment-plan.md
# Returns: "Research complete. Stripe Elements recommended. Plan ready."
 
# Step 2: Implementation with patterns
> /react-patterns Read docs/research/stripe-payment-plan.md and Implement the payment flow with Stripe Elements
 
# Step 3: Review with sub-agent
> Use code-reviewer to review the payment implementation
# Sub-agent reviews security, error handling, UX
# Saves to docs/reviews/payment-review.md
# Returns: "Review complete. 1 security concern, 2 warnings."
 
# Step 4: Fix issues
> Read docs/reviews/payment-review.md and address all issues
# Main context stays clean, focused on fixes
 
# Step 5: Generate tests with sub-agent
> Use test-generator to create comprehensive payment tests @src/components/PaymentForm.tsx
# Sub-agent generates tests, runs them
# Returns: "Generated 12 tests, all passing."
 
# Step 6: Performance check
> Use performance-analyzer to check payment flow performance
# Returns: "No bottlenecks found. Load time: 1.2s"

claude
 
# Quick review with sub-agent
> Use code-reviewer to analyze this PR
> @src/components/Dashboard.tsx
> @src/components/DashboardStats.tsx
> @src/hooks/useDashboardData.ts
 
# Sub-agent reviews everything, saves detailed report
# Returns: "Review complete. 3 issues found. Details in docs/reviews/dashboard-pr-review.md"
 
# Main agent fixes based on review
> Read docs/reviews/dashboard-pr-review.md and fix all issues
 
# Verify fixes
> Use code-reviewer to verify the fixes are correct
# Returns: "All issues resolved. ✅"

claude
 
# Performance analysis with sub-agent
> The user list page feels slow. Use performance-analyzer to investigate
# Sub-agent profiles the page, analyzes renders
# Saves to docs/performance/user-list-analysis.md
# Returns: "Found 2 bottlenecks: unnecessary re-renders, unoptimized queries"
 
# Read analysis and implement fixes
> /react-patterns Read docs/performance/user-list-analysis.md and Implement the recommended optimizations
 
# Verify improvements
> Use performance-analyzer to measure improvements
# Returns: "Performance improved 3x. Load time: 0.4s (was 1.2s)"

claude
 
# Analysis
> Analyze this legacy component for modernization opportunities @src/legacy/OldDashboard.js
 
# Add findings to memory
> # Legacy: Class components, inline styles, prop drilling
> # Plan: Function components, Tailwind, custom hooks
> # Constraint: Keep same props interface
 
# Research modern patterns with sub-agent
> Use react-researcher to research the best patterns for this refactor
# Sub-agent researches, saves plan
# Returns: "Modernization plan ready in docs/research/dashboard-refactor-plan.md"
 
# Implement refactor
> /react-patterns Read docs/research/dashboard-refactor-plan.md and Refactor OldDashboard using our modern patterns. Maintain the same props interface for backward compatibility
 
# Review the refactor
> Use code-reviewer to ensure the refactor follows our patterns
# Returns: "Refactor looks good. All patterns followed. ✅"

claude
 
# Research phase
> I need to build a real-time collaborative document editor
# react-researcher sub-agent activates
# Researches: WebSocket vs Convex, CRDT libraries, conflict resolution
# Saves comprehensive plan
# Returns: "Recommend Convex + Yjs. Full plan in docs/research/collab-editor-plan.md"
 
# Implementation phase
> /react-patterns Read docs/research/collab-editor-plan.md and Implement the DocumentEditor component with real-time collaboration
 
# Testing phase
> Use test-generator to create tests for collaborative editing @src/components/DocumentEditor.tsx
# Returns: "Generated 15 tests including concurrent editing scenarios"
 
# Performance check
> Use performance-analyzer to check performance with 10 concurrent users
# Returns: "Performance excellent. Latency <50ms for 10 users"
 
# Security review
> Use code-reviewer to review for security issues in collaborative features
# Returns: "1 critical: Need rate limiting. 2 warnings about data validation"
 
# Fix security issues
> Fix the security issues found in the review
 
# Final verification
> Use code-reviewer to verify all security issues are resolved
# Returns: "All security issues resolved. Ready for production. ✅"

# Context commands AND sub-agents are version controlled
.claude/
├── commands/           # Commit to git
│   ├── react-patterns.md
│   ├── review.md
│   └── testing.md
└── agents/            # Commit to git
    ├── react-researcher.md
    ├── code-reviewer.md
    └── test-generator.md
 
# Everyone on the team gets the same context
git clone your-repo
claude
> /react-patterns      # Same patterns for all devs
> Use code-reviewer to review my code  # Same review standards