Make your agent a
WebMCP expert.
web-mcp-skill is a single agent skill that teaches your coding assistant the entire WebMCP standard — so it ships correct tools in any web app, on any framework, the first time.
works withClaude CodeCodexCursorOpenCode+ more
One file. The whole standard.
SKILL.md is a complete WebMCP reference your agent loads on demand — no guessing, no stale training data.
Imperative API
document.modelContext / navigator.modelContext, registerTool, provideContext, events, AbortSignal teardown, Permissions Policy.
Declarative API
toolname / tooldescription form attributes, schema synthesis from controls, SubmitEvent.respondWith, the :tool-form-active CSS hooks.
Security model
Prompt injection both ways, exposure scope, untrustedContentHint, and human-in-the-loop design as a first-class default.
Best practices
Tool granularity, action-oriented naming, tight schemas, compact outputs, actionable isError responses, lifecycle.
Testing & evals
The DevTools WebMCP panel, the official evals CLI, ModelContext mocking patterns for unit tests.
WebMCP vs. backend MCP
When to reach for an in-page tool versus a server one — and how the two compose in one product.
Works on everything.
The skill covers the standard itself, not a library. That makes it framework-agnostic by construction — vanilla JS, React, Vue, Svelte, Angular, or whatever you reach for next. The same guidance applies because it's the same browser API underneath.
Vanilla JS
React
Vue
Svelte
Angular
Anything else
Building in React?
Pair the skill with @cr4yfish/react-web-mcp — zero-dep hooks and components that already handle every integration gotcha the skill warns about.