README.md

title: webmcp-skill — WebMCP 導入プラグイン

about: Webアプリのフォームや操作を、ブラウザ内AIエージェントへ構造化ツールとして公開するClaude Codeプラグイン。非対応ブラウザでも壊れない既定値と、入力検証や確認処理を含む実装パターンを提供する。

year: 2026

role: System Design / Software Development

category: 探索

stack: JavaScriptWebMCPClaude Code PluginAgent Skills

>git remotehttps://github.com/hayashiii-ghub/webmcp-skill

> cat details.md

webmcp-skill は、Web アプリに WebMCP を追加するための Claude Code プラグインです。サイトのフォームや操作を、ブラウザ内の AI エージェントが navigator.modelContext 経由で呼べる「構造化ツール」として公開します。画面から推測させるのではなく、確実に操作させる設計です。

宣言型（フォーム注釈）と命令型（registerTool）の両方をカバーします。progressive enhancement により非対応ブラウザでは no-op、実行時の入力検証、上限値の単一ソース化、破壊的・外向き操作の確認といった安全な既定値を内蔵しています。toban の WebMCP 実装から蒸留したパターンを、他サイトへ導入するときのガイダンスとして提供します。

サイトのコードベースを Claude Code で開き、「コンタクトページに WebMCP を追加して」のように頼むと、スキルが API 選定・フォーム注釈／ツール登録の手順・機微な操作の扱い・非対応訪問者でも壊れない実装方法を案内します。examples/ には registerTool 雛形（読み取り専用 / 変更系 / 確認付き）と注釈フォーム雛形を同梱しています。

配布

Claude Code の plugin marketplace からインストールします。ローカル検証では marketplace にリポジトリパスを追加して試せます。

claude plugin marketplace add https://github.com/hayashiii-ghub/webmcp-skill
claude plugin install webmcp@webmcp

WebMCP は Chrome origin trial / W3C draft 段階の実験的仕様です。スキルは最新リファレンスを参照させ、正確なフィールド名・メソッド名は都度確認するよう促します。

技術スタック

カテゴリ	ツール	選定理由
配布形態	Claude Code Plugin	marketplace 経由で skill と examples を一括配布
エージェント連携	Agent Skills (`SKILL.md`)	実装判断をエージェントが読める手順として同梱
API	WebMCP (`navigator.modelContext`)	ブラウザ内 AI エージェント向けの構造化ツール公開
雛形	JavaScript / HTML	命令型・宣言型それぞれの最小実装例を examples に配置

← cd /works