← ClaudeAtlas

browser-task-and-automation-and-delegationlisted

【强制】所有浏览器操作必须使用本技能,禁止在主对话中直接使用 mcp__chrome-devtools 工具。触发关键词:打开/访问/浏览网页、点击/填写/提交表单、截图/快照、性能分析、自动化测试、数据采集/爬取、网络模拟。本技能通过 chrome-devtools-expert agent 执行浏览器操作,避免大量页面快照、截图、网络请求数据污染主对话上下文。
aiskillstore/marketplace · ★ 329 · AI & Automation · score 79
Install: claude install-skill aiskillstore/marketplace
# 浏览器自动化调度技能 本技能负责将浏览器自动化任务委派给专业的 `chrome-devtools-expert` agent 执行,通过 agent 隔离来保持主对话上下文的清晰,避免浏览器操作过程中的大量 token 消耗污染主对话。 ## 核心功能 识别需要浏览器自动化操作的场景,并将任务委派给 `chrome-devtools-expert` agent,该 agent 专门使用 Chrome DevTools MCP 工具进行 Web 界面交互、自动化测试和性能分析。 ## 适用场景 本技能适用于以下场景: 1. **页面导航与浏览** - 打开指定 URL 的网页 - 在页面间导航(前进、后退) - 管理多个浏览器标签页 2. **元素交互操作** - 点击按钮、链接等元素 - 悬停在元素上触发效果 - 拖拽元素到指定位置 3. **表单填写与提交** - 填写输入框、文本域 - 选择下拉菜单选项 - 提交表单并等待响应 4. **页面截图与快照** - 截取整个页面或特定元素 - 获取页面的文本快照 - 保存截图到文件 5. **性能分析与测试** - 启动性能跟踪 - 分析页面加载性能 - 获取核心 Web 指标(CWV) 6. **自动化测试** - 执行功能测试流程 - 验证页面元素状态 - 检查控制台错误 7. **数据采集** - 从网页提取信息 - 执行 JavaScript 获取数据 - 监控网络请求 8. **网络与设备模拟** - 模拟不同网络条件 - 模拟 CPU 性能限制 - 调整页面尺寸 ## 调用规则 ### 1. 委派方式 使用 Task tool 调用 `chrome-devtools-expert` agent: ``` Task tool 参数: - subagent_type: "chrome-devtools-expert" - description: 简短描述任务(3-5个字) - prompt: 详细的操作需求和目标 ``` ## 场景示例 ### 示例 1:打开页面并截图 **用户需求**: "打开 example.com 并截图" **执行方式**: ``` 调用 Task tool: - subagent_type: "chrome-devtools-expert" - description: "打开页面并截图" - prompt: "打开 https://example.com,等待页面加载完成后截图,将截图保存到桌面" ``` ### 示例 2:表单自动化 **用户需求**: "帮我填写这个登录表单并提交" **执行方式**: ``` 调用 Task tool: - subagent_type: "chrome-devtools-expert" - description: "填写登录表单" - prompt: "在当前页面找到登录表单,填写用户名'test@example.com',密码'password123',然后点击登录按钮,等待响应并告诉我是否成功" ``` ### 示例 3:性能分析 **用户需求**: "分析这个页面的加载性能" **执行方式**: ``` 调用 Task tool: - subagent_type: "chrome-devtools-expert"