mcp-tools-efficiency

What this skill does

# MCP Tools Efficiency Skill

Use this skill to efficiently leverage MCP Docker tools for documentation lookup, error resolution, and learning without loading entire contexts.

## When to Use
- **When encountering errors** - Search for specific error solutions
- **When learning new libraries** - Get specific API documentation
- **When implementing features** - Look up specific patterns
- **When debugging** - Search for error messages
- **When stuck** - Find examples for specific use cases

## Why This Is Critical

### ❌ INEFFICIENT (Don't do this):
```javascript
// Loading ENTIRE Material-UI documentation
context7.load("Material-UI")
// This loads thousands of pages, slow and wasteful
```

### ✅ EFFICIENT (Do this instead):
```javascript
// Search for SPECIFIC topic
context7.search("Material-UI Grid2 responsive breakpoints")
// Gets only relevant pages, fast and precise
```

## Available MCP Docker Tools

### 1. **context7** - Documentation Search
Search documentation for specific topics.

**DON'T**: Load entire documentation
**DO**: Search for specific queries

### 2. **fetch** - Web Documentation
Fetch specific documentation pages.

**DON'T**: Fetch broad documentation
**DO**: Fetch specific API reference pages

### 3. **Docker Tools** (via MCP)
Other MCP Docker tools available in your setup.

## Efficient Patterns

### Pattern 1: Error Resolution

When you encounter an error:

```javascript
// ❌ WRONG - Load entire React docs
context7.load("React documentation")

// ✅ RIGHT - Search for specific error
const error = "Cannot read property 'map' of undefined"

// Search for the specific error
context7.search(`React ${error}`)
// or
context7.search("React undefined array map null check")

// Get focused results about:
// - Common cause (array is null/undefined)
// - Solution (add null check or optional chaining)
// - Best practices
```

### Pattern 2: Learning Specific API

When implementing a feature:

```javascript
// ❌ WRONG - Load all Material-UI docs
context7.load("Material-UI")

// ✅ RIGHT - Search for specific component
context7.search("Material-UI Grid2 component responsive breakpoints")

// Get focused results:
// - Grid2 API reference
// - Responsive breakpoint usage
// - Examples with xs, sm, md, lg, xl
```

### Pattern 3: Implementation Patterns

When building a feature:

```javascript
// ❌ WRONG - Load entire TypeScript docs
context7.load("TypeScript")

// ✅ RIGHT - Search for specific pattern
context7.search("TypeScript React useEffect dependency array typing")

// Get focused results:
// - useEffect type definitions
// - Dependency array best practices
// - Common typing issues
```

### Pattern 4: Debugging Issues

When debugging:

```javascript
// ❌ WRONG - Load entire Next.js docs
context7.load("Next.js")

// ✅ RIGHT - Search for specific issue
context7.search("Next.js hydration mismatch client server rendering")

// Get focused results:
// - Hydration error causes
// - Client vs server rendering differences
// - Solutions and workarounds
```

### Pattern 5: Best Practices Lookup

When unsure about approach:

```javascript
// ❌ WRONG - Load entire React docs
context7.load("React")

// ✅ RIGHT - Search for specific practice
context7.search("React form validation best practices Zod React Hook Form")

// Get focused results:
// - Form validation patterns
// - Zod integration with React Hook Form
// - Validation examples
```

## Specific Use Cases

### Use Case 1: Material-UI Grid2 Responsive Layout

**Scenario**: Need to implement responsive grid with Material-UI Grid2

```javascript
// EFFICIENT APPROACH:

// 1. Search for Grid2 basics
context7.search("Material-UI Grid2 responsive columns xs sm md lg")

// Results include:
// - Grid2 container/item props
// - Breakpoint syntax (xs={12} sm={6} md={4})
// - Spacing configuration

// 2. If need more specific info
context7.search("Material-UI Grid2 offset columns advanced layout")

// 3. Example lookup
fetch("https://mui.com/material-ui/react-grid2/#responsive-values")
```

**DON'T**:
```javascript
// This loads 100+ pages
context7.load("Material-UI complete documentation")
```

### Use Case 2: React Hook Form with Zod Validation

**Scenario**: Implementing form with validation

```javascript
// EFFICIENT APPROACH:

// 1. Search for integration pattern
context7.search("React Hook Form Zod resolver validation schema")

// 2. Search for specific field types
context7.search("React Hook Form Zod email validation custom error messages")

// 3. Fetch specific example
fetch("https://react-hook-form.com/get-started#SchemaValidation")
```

**Result**: Get exactly what you need in seconds.

### Use Case 3: Playwright MCP Browser Actions

**Scenario**: Need to click a button in Playwright

```javascript
// EFFICIENT APPROACH:

// 1. Search for specific action
context7.search("Playwright MCP browser click selector wait for element")

// 2. If error occurs
const error = "Target closed"
context7.search(`Playwright ${error} wait for navigation`)

// Get solutions without loading all Playwright docs
```

### Use Case 4: Docker Container Networking

**Scenario**: Docker containers can't communicate

```javascript
// EFFICIENT APPROACH:

// 1. Search for specific issue
context7.search("Docker container network communication bridge IP address")

// 2. Search for solution
context7.search("Docker inspect container IP network connect")

// Get targeted solutions
```

### Use Case 5: TypeScript Type Errors

**Scenario**: Type error in React component

```javascript
// Error: Type 'string | undefined' is not assignable to type 'string'

// EFFICIENT APPROACH:
context7.search("TypeScript React props optional undefined type guard")

// Get:
// - Optional chaining syntax (props.value?.toString())
// - Nullish coalescing (props.value ?? 'default')
// - Type guards
```

## Search Query Patterns

### For Errors:
```
"{Library} {ErrorMessage}"
"{Library} {ErrorType} common causes"
"{Library} {ErrorMessage} solution"
```

**Examples**:
- "React Cannot read property of undefined"
- "Material-UI Grid2 breakpoint not working"
- "Playwright browser closed error solution"

### For Implementation:
```
"{Library} {Component} {Feature} example"
"{Library} {Pattern} best practices"
"{Library} {UseCase} implementation"
```

**Examples**:
- "Material-UI Grid2 responsive columns example"
- "React Hook Form nested fields best practices"
- "Playwright form filling implementation"

### For API Reference:
```
"{Library} {Component} API props"
"{Library} {Method} parameters return type"
"{Library} {Hook} usage"
```

**Examples**:
- "Material-UI Grid2 container props"
- "React useEffect cleanup return"
- "Playwright browser_click parameters"

### For Debugging:
```
"{Library} {Component} {Issue} debug"
"{Library} {Behavior} why happening"
"{Library} {Problem} troubleshooting"
```

**Examples**:
- "React useEffect infinite loop debug"
- "Material-UI Grid2 not responsive why"
- "Playwright screenshot not capturing troubleshooting"

## Error-Driven Learning

When you encounter an error, use this pattern:

### Step 1: Capture Error Details
```javascript
const errorInfo = {
  message: "Cannot read property 'map' of undefined",
  file: "ScheduleCalendar.tsx:42",
  context: "schedules.map(s => ...)"
}
```

### Step 2: Search for Error
```javascript
// Search with full context
context7.search(`React ${errorInfo.message} array null check`)

// Get immediate solutions:
// - Add optional chaining: schedules?.map()
// - Add null check: schedules && schedules.map()
// - Initialize state: useState<Schedule[]>([])
```

### Step 3: Search for Prevention
```javascript
// Learn how to avoid it
context7.search("React useState array initial value TypeScript")

// Learn best practices:
// - Always initialize arrays: useState<T[]>([])
// - Use optional chaining for safety
// - Add loading state checks
```

### Step 4: Apply and Verify
```javascript
// Apply fix
const [schedules, setSchedules] = useState<Schedule[]>([])

// Verify in code
// Re-run QA
```

##