Loading...
Loading...
Found 7 Skills
Guide for building WebMCP tools — client-side JavaScript tools that expose web application functionality to AI agents via the browser's navigator.modelContext API.
Designs and reviews WebMCP instrumentation for existing web apps, especially SPAs. Use when adding agent-accessible tools, route maps, prompts, or WebMCP workflows to a React, Vue, Angular, or vanilla browser app, or when deciding whether WebMCP is the right fit.
Implements and debugs browser WebMCP integrations in JavaScript or TypeScript web apps. Use when exposing imperative tools through navigator.modelContext, annotating HTML forms for declarative tools, handling agent-invoked form flows, or validating WebMCP behavior in the current Chrome preview. Don't use for server-side MCP servers, REST tool backends, or non-browser providers.
Add, edit, debug, and test WebMCP tools built with webmcp-kit. Use when users ask to create or modify defineTool-based tools, fix missing tools, resolve schema/execution errors, or validate tools in dev panel/native mode.
Create, compile, and validate site-specific WebMCP init scripts from a target URL and desired tool capability. Use when the user wants to author WebMCP tools for a website, produce a webmcp.init.js artifact, or test WebMCP registration and invocation through Stagehand.
Audit and fix agent readiness: the Lighthouse Agentic Browsing fraction, accessibility tree for agents, robots.txt and Content-Signal for AI agents, WAF treatment of agent traffic, llms.txt, Markdown delivery, ai-catalog.json, /.well-known discovery files, and WebMCP tools. Exclude AI citability and brand signals (seo-geo) and commerce protocol depth (seo-ecommerce).
Capture and analyze Remotion Studio React render profiles through development-only WebMCP tools. Use when diagnosing unnecessary re-renders, slow commits, frame-reactive component trees, or when comparing render performance before and after a change.