Webmcp Development Guide — Security skill for Claude Code

WebMCP Development Guide Skill

[English](README.md) | [繁體中文](README.zh-TW.md) | [简体中文](README.zh-CN.md) | [日本語](README.ja.md)

An AI Agent skill for designing, implementing, reviewing, and testing browser-side WebMCP tools. It also clarifies the boundaries between WebMCP, backend APIs, browser automation, and server-side MCP.

This repository contains only the `webmcp-development-guide` skill. It does not include a demo website or unrelated project files.

Installation

Install the skill globally for all supported Agents detected by [Skills CLI](https://skills.sh/):

npx skills add kevintsai1202/webmcp-development-guide -g --all

List the skills available in this repository without installing them:

npx skills add kevintsai1202/webmcp-development-guide --list

Or use interactive mode to choose the installation scope and Agent:

npx skills add kevintsai1202/webmcp-development-guide

When to use it

Ask your Agent to use `$webmcp-development-guide` when you need to:

• Add WebMCP to an existing HTML website or SPA.
• Choose between the Declarative and Imperative APIs.
• Design tool names, descriptions, JSON Schema inputs, and structured results.
• Connect WebMCP tools to existing frontend functions or backend APIs.
• Manage routes, component unmounting, authentication state, and tool lifecycles.
• Review input validation, authorization, sensitive-action confirmation, and prompt-injection risks.
• Verify tools and complete user journeys with Model Context Tool Inspector and Evals.
• Compare WebMCP with regular APIs, browser automation, and server-side MCP.

Example request:

Use $webmcp-development-guide to add WebMCP to my existing product search page.
Keep the current UI and API, and provide a fallback for unsupported browsers.

Adding WebMCP to an existing website

The skill follows progressive enhancement: existing forms, buttons, validation, authentication, APIs, and authorization flows