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):

// Loading ENTIRE Material-UI documentation
context7.load("Material-UI")
// This loads thousands of pages, slow and wasteful

✅ EFFICIENT (Do this instead):

// 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:

// ❌ 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:

// ❌ 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:

// ❌ 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:

// ❌ 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:

// ❌ 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

// 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:

// This loads 100+ pages
context7.load("Material-UI complete documentation")

Use Case 2: React Hook Form with Zod Validation

Scenario: Implementing form with validation

// 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

// 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

// 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

// 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

const errorInfo = {
  message: "Cannot read property 'map' of undefined",
  file: "ScheduleCalendar.tsx:42",
  context: "schedules.map(s => ...)"
}

Step 2: Search for Error

// 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

// 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

// Apply fix
const [schedules, setSchedules] = useState<Schedule[]>([])

// Verify in code
// Re-run QA

Integration with Agents

software-engineer-agent:

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

// Not loading entire Module Federation docs

ui-engineer-agent:

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

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

qa-frontend-engineer:

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

dotnet-engineer-agent:

// 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

// 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

// 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

// 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

// 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:

1. Search with specific keywords

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

2. Include error messages verbatim

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

3. Use library + feature + issue pattern

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

4. Fetch specific API pages

   fetch("https://mui.com/api/grid2/")
   

5. Search before implementing

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

❌ DON'T:

1. Load entire documentation

   context7.load("React") // Too broad
   

2. Use vague queries

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

3. Fetch entire sites

   fetch("https://mui.com/") // Too much
   

4. Search without context

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

5. Ignore MCP tools

   // Manual documentation reading instead of search
   

Query Templates

Error Resolution:

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

Feature Implementation:

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

API Lookup:

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

Best Practices:

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

// 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:

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.