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:

code

"{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:

code

"{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:

code

"{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:

code

"{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

Integration with Agents

software-engineer-agent:

javascript

// When planning implementation
context7.search("React Module Federation shared dependencies config")

// Not loading entire Module Federation docs

ui-engineer-agent:

javascript

// When implementing Grid layout
context7.search("Material-UI Grid2 responsive mobile first columns")

// When error occurs
context7.search(`Material-UI ${errorMessage}`)

qa-frontend-engineer:

javascript

// When Playwright error occurs
const error = await playwright_browser_click(...)
if (error) {
  context7.search(`Playwright MCP ${error.message} solution`)
}

dotnet-engineer-agent:

javascript

// When implementing JWT auth
context7.search("ASP.NET Core JWT Bearer authentication setup")

// When compilation error
context7.search(`C# ${errorMessage} fix`)

Common Scenarios

Scenario 1: Material-UI Styling Issue

Problem: Grid not responsive

javascript

// EFFICIENT:
context7.search("Material-UI Grid2 breakpoints not working common issues")

// Likely finds:
// - Missing container prop
// - Incorrect spacing syntax
// - Theme breakpoint configuration

Scenario 2: React Hook Dependency Warning

Problem: useEffect missing dependency

javascript

// EFFICIENT:
context7.search("React useEffect missing dependency warning fix")

// Finds:
// - Add dependency to array
// - Use useCallback for functions
// - Disable ESLint rule (if intentional)

Scenario 3: TypeScript Generic Type Issue

Problem: Generic type not inferring

javascript

// EFFICIENT:
context7.search("TypeScript React generic type inference function component")

// Finds:
// - Proper generic syntax
// - Type parameter constraints
// - Common inference issues

Scenario 4: Playwright Element Not Found

Problem: Element not clickable

javascript

// EFFICIENT:
context7.search("Playwright MCP element not found wait for selector")

// Finds:
// - Use wait_for before click
// - Check selector syntax
// - Verify element is visible

Best Practices

✅ DO:

•

Search with specific keywords

javascript

context7.search("Material-UI Grid2 xs sm md responsive")

•

Include error messages verbatim

javascript

context7.search(`React ${actualErrorMessage}`)

•

Use library + feature + issue pattern

javascript

context7.search("Next.js image optimization lazy loading")

•
Fetch specific API pages
javascript
```
fetch("https://mui.com/api/grid2/")
```

•

Search before implementing

javascript

context7.search("React form validation best practices 2024")

❌ DON'T:

•
Load entire documentation
javascript
```
context7.load("React") // Too broad
```

•

Use vague queries

javascript

context7.search("grid") // What grid? Which library?

•
Fetch entire sites
javascript
```
fetch("https://mui.com/") // Too much
```

•

Search without context

javascript

context7.search("error") // Which error? Where?

•

Ignore MCP tools

javascript

// Manual documentation reading instead of search

Query Templates

Error Resolution:

code

"{Library} {ExactErrorMessage}"
"{Library} {ErrorType} how to fix"
"{Library} {ErrorMessage} common causes solutions"

Feature Implementation:

code

"{Library} {Component} {Feature} example code"
"{Library} {Pattern} implementation guide"
"{Library} how to {Task}"

API Lookup:

code

"{Library} {Component} props API reference"
"{Library} {Function} parameters return type"
"{Library} {Hook} usage syntax"

Best Practices:

code

"{Library} {Feature} best practices"
"{Library} {Pattern} recommended approach"
"{Library} {UseCase} production ready"

Performance Benefits

Time Saved:

•❌ Loading all Material-UI docs: 30-60 seconds
•✅ Searching "Grid2 responsive": 2-5 seconds

Relevance:

•❌ 1000+ pages to review
•✅ 3-5 highly relevant results

Accuracy:

•❌ Might miss important info in huge docs
•✅ Targeted results for exact need

Context:

•❌ Overwhelming amount of information
•✅ Just enough to solve the problem

Example Workflow

Building a Responsive Form:

javascript

// Step 1: Grid layout
context7.search("Material-UI Grid2 form layout responsive mobile")
// Get: Grid2 responsive patterns

// Step 2: Form validation
context7.search("React Hook Form Zod validation setup")
// Get: Integration guide

// Step 3: Error encountered
// Error: "Failed to resolve module"
context7.search("Vite failed to resolve module Material-UI")
// Get: Fix for import paths

// Step 4: Styling
context7.search("Material-UI sx prop responsive breakpoints")
// Get: sx prop usage at breakpoints

// Total time: ~20 seconds
// vs loading all docs: ~3 minutes

Integration with Agents

In Agent Prompts:

markdown

When encountering errors:
1. Capture exact error message
2. Search: context7.search("{Library} {ErrorMessage}")
3. Apply solution
4. Verify fix

When implementing features:
1. Search: context7.search("{Library} {Feature} example")
2. Review 2-3 top results
3. Implement
4. Test

When learning APIs:
1. Search: context7.search("{Library} {Component} API")
2. Or fetch: specific API page
3. Reference while coding

This skill ensures agents use MCP Docker tools efficiently, getting exactly the information needed without overwhelming context or wasted time.