From 864bde7d28a5a1f663a3c16bf052818a833edb51 Mon Sep 17 00:00:00 2001
From: LIU <47735347+2019-02-18@users.noreply.github.com>
Date: Wed, 6 May 2026 17:14:46 +0800
Subject: [PATCH 1/2] Create webmcp-bridge.mdfeat: add webmcp-bridge skill (zh)

---
 src/content/skills-zh/webmcp-bridge.md | 58 ++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/content/skills-zh/webmcp-bridge.md

diff --git a/src/content/skills-zh/webmcp-bridge.md b/src/content/skills-zh/webmcp-bridge.md
new file mode 100644
index 0000000..7220137
--- /dev/null
+++ b/src/content/skills-zh/webmcp-bridge.md
@@ -0,0 +1,58 @@
+---
+name: webmcp-bridge
+title: WebMCP Bridge - AI 代理发现并执行网页工具
+description: 让 AI 代理通过浏览器 evaluate 能力直接调用网页上通过 navigator.modelContext 注册的 WebMCP 工具。支持工具发现、参数校验、结果解析，兼容任何具备浏览器执行能力的 AI 代理。
+source: community
+author: LIU
+githubUrl: https://github.com/2019-02-18/agent-skills
+docsUrl: https://github.com/2019-02-18/agent-skills
+category: automation
+tags:
+  - webmcp
+  - mcp
+  - browser
+  - ai-agent
+  - web-automation
+roles:
+  - developer
+featured: false
+popular: false
+isOfficial: false
+installCommand: |
+  git clone https://github.com/2019-02-18/agent-skills.git
+  cp -r agent-skills/webmcp-bridge ~/.cursor/skills/
+date: 2026-05-06
+---
+
+## 使用场景
+
+- AI 代理发现当前网页注册的所有 WebMCP 工具（名称、描述、参数 Schema）
+- AI 代理通过函数调用直接执行网页上的 WebMCP 工具
+- 处理动态工具注册/注销（页面切换时自动重新发现）
+- 让 AI 代理与 WebMCP 应用深度交互：读取数据、操控 UI、触发操作
+
+## 示例
+
+```javascript
+// 1. 发现当前页面所有 WebMCP 工具
+(async () => {
+  const tools = await navigator.modelContextTesting.listTools()
+  return tools.map(t => ({ name: t.name, description: t.description }))
+})()
+
+// 2. 执行一个工具（参数必须 JSON.stringify）
+(async () => {
+  const result = await navigator.modelContextTesting.executeTool(
+    'code_read',
+    JSON.stringify({ file: "html" })
+  )
+  return JSON.parse(result.content[0].text)
+})()
+```
+
+## 注意事项
+
+- 需要 Chrome 146+ 并启用 `chrome://flags/#enable-webmcp-testing`
+- 所有代码通过浏览器 evaluate 执行，必须用 async IIFE 包裹（不支持顶层 await）
+- `executeTool` 的第二个参数是 JSON **字符串**，不是对象
+- 工具是页面级作用域，导航后需重新调用 `listTools()` 发现新工具

From 26964674eda003d6078eebbb56912c45234476ae Mon Sep 17 00:00:00 2001
From: LIU <47735347+2019-02-18@users.noreply.github.com>
Date: Wed, 6 May 2026 17:22:27 +0800
Subject: [PATCH 2/2] Create webmcp-bridge.mdfeat: add webmcp-bridge skill (en)

---
 src/content/skills/webmcp-bridge.md | 58 +++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/content/skills/webmcp-bridge.md

diff --git a/src/content/skills/webmcp-bridge.md b/src/content/skills/webmcp-bridge.md
new file mode 100644
index 0000000..29d0b05
--- /dev/null
+++ b/src/content/skills/webmcp-bridge.md
@@ -0,0 +1,58 @@
+---
+name: webmcp-bridge
+title: WebMCP Bridge - AI Agent Discovers and Executes Web Page Tools
+description: Enable AI agents to discover and execute WebMCP tools registered on web pages via browser evaluate capability and navigator.modelContextTesting API. Supports tool discovery, parameter validation, and result parsing.
+source: community
+author: LIU
+githubUrl: https://github.com/2019-02-18/agent-skills
+docsUrl: https://github.com/2019-02-18/agent-skills
+category: automation
+tags:
+  - webmcp
+  - mcp
+  - browser
+  - ai-agent
+  - web-automation
+roles:
+  - developer
+featured: false
+popular: false
+isOfficial: false
+installCommand: |
+  git clone https://github.com/2019-02-18/agent-skills.git
+  cp -r agent-skills/webmcp-bridge ~/.cursor/skills/
+date: 2026-05-06
+---
+
+## Use Cases
+
+- AI agent discovers all WebMCP tools registered on the current page (name, description, input schema)
+- AI agent executes WebMCP tools directly through function calls
+- Handle dynamic tool registration/unregistration (auto-rediscover on page navigation)
+- Deep interaction between AI agents and WebMCP applications: read data, control UI, trigger actions
+
+## Examples
+
+```javascript
+// 1. Discover all WebMCP tools on the current page
+(async () => {
+  const tools = await navigator.modelContextTesting.listTools()
+  return tools.map(t => ({ name: t.name, description: t.description }))
+})()
+
+// 2. Execute a tool (arguments must be JSON.stringify'd)
+(async () => {
+  const result = await navigator.modelContextTesting.executeTool(
+    'code_read',
+    JSON.stringify({ file: "html" })
+  )
+  return JSON.parse(result.content[0].text)
+})()
+```
+
+## Notes
+
+- Requires Chrome 146+ with `chrome://flags/#enable-webmcp-testing` enabled
+- All code runs via browser evaluate, must use async IIFE wrapper (top-level await not supported)
+- The second argument of `executeTool` is a JSON **string**, not an object
+- Tools are page-scoped; call `listTools()` again after navigation to discover new tools