kevintsai1202

Webmcp Development Guide — Security skill for Claude Code

Security community

Browser-side WebMCP development guide skill: existing-site integration, Declarative and Imperative APIs, security, and verification.

How to install Webmcp Development Guide

This entry records only its repository, not the path inside it, so there is no exact command to give. Open kevintsai1202/webmcp-development-guide and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Webmcp Development Guide does

Browser-side WebMCP development guide skill: existing-site integration, Declarative and Imperative APIs, security, and verification.

Alternatives in Security

Pal — Multi-model AI integration — chat, debugging, code review, planning, security audit 11.3k ★
Cve MCP Server — Production-grade MCP server giving Claude 27 security intelligence tools across 21 APIs — CVE lookup, EPSS sco 1.2k ★
Clawsec — Security skill suite with drift detection, automated audits, and skill integrity verification 798 ★

README

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.