Applies WebMCP patterns for SPA tool lifecycle, error handling, performance optimization, multi-site agents, accessibility, SEO, and production deployment.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin webmcp-browser-agentsThis skill is limited to using the following tools:
**Fetch live docs**:
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
Fetch live docs:
https://developer.chrome.com/blog/webmcp for the latest developer guidance and patternswebmcp development best practices patterns for community patternswebmcp SPA single page application routing for SPA-specific patternswebmcp SEO agent discovery for discoverability patternsIn single-page applications, tools must be managed across route changes:
// React example: register/unregister tools on route change
useEffect(() => {
const tools = getToolsForRoute(currentRoute);
tools.forEach(tool => navigator.modelContext.registerTool(tool));
return () => {
// Cleanup on route change
tools.forEach(tool => navigator.modelContext.unregisterTool(tool.name));
};
}, [currentRoute]);
Key principles:
clearContext() or selective unregisterTool)Tools should handle errors at multiple levels:
Network errors:
async execute(input) {
try {
const res = await fetch(`/api/products?q=${input.query}`);
if (!res.ok) {
return { status: "error", code: res.status, message: "Server error" };
}
return await res.json();
} catch (err) {
return { status: "error", code: "network_error", message: "Unable to reach server" };
}
}
Business logic errors:
async execute(input) {
const product = await fetchProduct(input.productId);
if (!product) {
return { status: "error", code: "not_found", message: "Product not found" };
}
if (!product.inStock) {
return { status: "error", code: "out_of_stock", message: "Product is out of stock" };
}
// proceed...
}
Consistent error format:
{ status: "error", code: "error_code", message: "Human-readable message" }
WebMCP tools are inherently faster than UI scraping, but optimize further:
Agents may navigate across multiple sites, each with WebMCP:
Agent Journey:
1. Open site-a.com → discovers tools [searchA, addToCartA, checkoutA]
2. Call searchA("wireless headphones") → get results
3. Open site-b.com → discovers tools [searchB, addToCartB, checkoutB]
4. Call searchB("wireless headphones") → get results
5. Agent compares results and recommends best option to user
6. User picks site-a → agent calls addToCartA and checkoutA
Design implications:
WebMCP tools should support accessible interactions:
WebMCP enhances AI discoverability:
As tools evolve:
searchProductsV2) for backward compatibilitydestructiveHint, etc.) set on all toolsTrack agent interactions in production:
Commerce platforms will likely add built-in WebMCP support:
toolname attributes to Liquid templatesMonitor your platform's announcements for native WebMCP support.
Fetch the latest community patterns, Chrome DevTools features, and platform integration announcements before architecting.