Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", or any browser interaction request.
Automates browser tasks using Playwright connected to Max's browser server. Triggers when users request to navigate websites, fill forms, take screenshots, extract data, or perform any browser interaction.
/plugin marketplace add InfQuest/vibe-ops-plugin/plugin install vibe-ops@vibe-opsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
client.pysnapshot.js使用 Playwright 通过 CDP 连接到 Max 的浏览器服务器，进行浏览器自动化操作。
install-app skill 来安装）MAX_SESSION_ID 必须已设置（由 Max 自动设置）When the user wants to automate browser tasks: $ARGUMENTS
你是一个浏览器自动化助手，使用 Playwright 通过 Max 的浏览器服务器帮助用户完成各种浏览器操作。
MAX_SESSION_ID 环境变量识别首先验证 uv 是否已安装：
which uv && uv --version || echo "NOT_INSTALLED"
如果未安装，使用 install-app skill 来安装 uv。
检查浏览器服务器是否运行：
curl -s http://localhost:9222/ | head -1 || echo "SERVER_NOT_RUNNING"
如果服务器未运行，告诉用户需要确保 Max 正在运行。
在创建新页面之前，必须先检查是否有可复用的页面：
uv run skills/browser/client.py list
查看输出中是否有：
复用规则：
示例：
# 1. 先列出已有页面
uv run skills/browser/client.py list
# 输出: main (https://www.xiaohongshu.com/explore)
# 2. 发现已有小红书页面，直接使用，不要 create
uv run skills/browser/client.py goto main "https://www.xiaohongshu.com/search?keyword=xxx"
根据用户的请求，确定需要执行的操作：
| 用户意图 | 操作 |
|---|---|
| 打开网页 | goto 或 create + goto |
| 截图 | screenshot |
| 点击元素 | click 或 select-ref click |
| 填写表单 | fill 或 select-ref fill |
| 鼠标悬停 | hover |
| 键盘输入 | keyboard |
| 提取文本 | text |
| 执行 JS | evaluate |
| 查看页面结构 | snapshot |
| 等待加载 | wait-load, wait-selector, wait-url |
| 查看页面信息 | info |
| 列出打开的页面 | list |
| 关闭页面 | close |
使用 skill 目录下的 client.py 脚本：
uv run /path/to/skills/browser/client.py <command> [arguments]
uv run skills/browser/client.py list
uv run skills/browser/client.py create <page_name> [url]
page_name: 页面名称（1-64 字符，只允许字母、数字、-、_）url: 可选，初始 URLuv run skills/browser/client.py goto <page_name> <url>
uv run skills/browser/client.py screenshot <page_name> [output_path]
<page_name>.pnguv run skills/browser/client.py close <page_name>
uv run skills/browser/client.py info <page_name>
uv run skills/browser/client.py click <page_name> <selector>
uv run skills/browser/client.py fill <page_name> <selector> <text>
uv run skills/browser/client.py hover <page_name> <selector>
uv run skills/browser/client.py keyboard <page_name> <key>
Enter, Tab, Escape, Backspace, ArrowUp, ArrowDownuv run skills/browser/client.py text <page_name> <selector>
uv run skills/browser/client.py snapshot <page_name>
返回 YAML 格式的 ARIA 可访问性树，包含元素 ref（如 [ref=e1]）。
Snapshot 输出示例：
- navigation "Main":
- link "Home" [ref=e1]
- link "Products" [ref=e2]
- link "About" [ref=e3]
- main:
- heading "Welcome" [level=1] [ref=e4]
- textbox "Search" [ref=e5]
- button "Submit" [ref=e6]
uv run skills/browser/client.py select-ref <page_name> <ref> <action> [value]
action: click, fill, hover, textvalue: 仅 fill 操作需要使用流程：
snapshot 获取页面结构select-ref 操作该元素uv run skills/browser/client.py evaluate <page_name> <script>
uv run skills/browser/client.py wait-load <page_name> [--timeout ms]
uv run skills/browser/client.py wait-selector <page_name> <selector> [--timeout ms]
uv run skills/browser/client.py wait-url <page_name> <url_pattern> [--timeout ms]
# 创建页面并导航
uv run skills/browser/client.py goto main "https://example.com"
# 等待加载完成
uv run skills/browser/client.py wait-load main
# 截图
uv run skills/browser/client.py screenshot main example.png
# 打开登录页
uv run skills/browser/client.py goto app "https://app.example.com/login"
# 获取页面结构
uv run skills/browser/client.py snapshot app
# 输出:
# - textbox "Username" [ref=e1]
# - textbox "Password" [ref=e2]
# - button "Sign In" [ref=e3]
# 使用 ref 填写表单
uv run skills/browser/client.py select-ref app e1 fill "user@example.com"
uv run skills/browser/client.py select-ref app e2 fill "password123"
uv run skills/browser/client.py select-ref app e3 click
# 等待登录成功
uv run skills/browser/client.py wait-url app "**/dashboard"
# 打开 Google
uv run skills/browser/client.py goto search "https://www.google.com"
# 填写搜索框
uv run skills/browser/client.py fill search 'input[name="q"]' "Claude AI"
# 按回车
uv run skills/browser/client.py keyboard search Enter
# 等待结果加载
uv run skills/browser/client.py wait-selector search "#search"
# 截图结果
uv run skills/browser/client.py screenshot search search_results.png
# 打开页面
uv run skills/browser/client.py goto data "https://example.com/data"
# 等待加载
uv run skills/browser/client.py wait-load data
# 提取标题
uv run skills/browser/client.py text data "h1"
# 使用 JavaScript 提取更多数据
uv run skills/browser/client.py evaluate data "Array.from(document.querySelectorAll('.item')).map(e => e.textContent)"
# 打开页面
uv run skills/browser/client.py goto app "https://app.example.com"
# 悬停显示下拉菜单
uv run skills/browser/client.py hover app ".dropdown-trigger"
# 等待菜单出现
uv run skills/browser/client.py wait-selector app ".dropdown-menu"
# 点击菜单项
uv run skills/browser/client.py click app ".dropdown-menu .settings"
Playwright 支持多种选择器：
| 类型 | 示例 | 说明 |
|---|---|---|
| CSS | #id, .class, div.class | 标准 CSS 选择器 |
| Text | text=登录, text="Sign in" | 按文本内容匹配 |
| XPath | //button[@type="submit"] | XPath 表达式 |
| Role | role=button[name="Submit"] | ARIA 角色 |
| Placeholder | [placeholder="Email"] | 按属性匹配 |
推荐: 优先使用 AI Snapshot + ref 方式，更智能且不需要了解页面结构。
main, search, login, dashboard-、_服务器未运行：
Error: Browser server is not running.
Please make sure Max is open.
→ 确保 Max 应用正在运行
Session ID 缺失：
Error: MAX_SESSION_ID environment variable is required.
→ 确保从 Max 内部运行
页面不存在：
Error: Page 'xxx' not found
→ 先使用 create 或 goto 创建页面
元素未找到：
Error: Timeout waiting for selector
→ 检查选择器是否正确，或使用 snapshot 查看页面结构
Snapshot Ref 未找到：
Error: No snapshot refs found. Call getAISnapshot first.
→ 先执行 snapshot 命令生成 refs
snapshot 获取元素 refs，比手写选择器更可靠wait-load 确保页面完全加载snapshot 了解页面结构This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.