dev-browser-claude-skill
为Claude Code提供持久化浏览器自动化能力，支持增量式脚本开发。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：dev-browser-claude-skill。 它的用途是：为Claude Code提供持久化浏览器自动化能力，支持增量式脚本开发。 完整的 Skill 内容见：https://321skill.com/skills/dev-browser-claude-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我写一个脚本，先导航到登录页面，然后填写用户名和密码。” 它会生成一个连接到持久化浏览器服务器的脚本，执行登录操作，并将登录后的页面状态（如会话Cookie）保存下来。接着你可以说：“在刚才登录后的页面上，点击‘仪表盘’链接并截图。” AI会生成第二个脚本，直接操作同一个持久化页面，完成后续操作。
介绍
Dev Browser Skill 解决了传统一次性浏览器自动化脚本状态无法保留的痛点。它通过一个常驻的浏览器服务器，允许页面（包括Cookie、本地存储和DOM状态）在多个独立的脚本执行之间持久存在，从而支持编写小型、聚焦的脚本，并基于前序脚本的执行结果进行迭代开发。
使用时，开发者首先启动一个独立的浏览器服务器，然后通过客户端API连接到该服务器，获取或创建命名页面。每个脚本可以专注于单一操作（如导航、点击、填写表单），脚本结束后页面状态会被保留，供下一个脚本继续使用。核心功能包括获取页面的ARIA结构快照以辅助元素定位、截图以及完整的Playwright Page API。
该Skill非常适合需要进行网页交互探索、数据抓取、UI测试或复杂多步骤工作流自动化的开发者。它尤其适合那些希望将大型自动化任务拆解为可管理、可调试的小步骤的场景。
建议开发者遵循其倡导的“小脚本、勤评估”工作流：每个脚本只做一件事，运行后立即检查输出和页面状态，确认无误后再编写下一步脚本。注意，在page.evaluate()中只能使用原生JavaScript，不能使用TypeScript。
核心特点
与普通的一次性浏览器自动化工具不同，此Skill的核心在于其持久化的页面状态，允许脚本像搭积木一样逐步构建复杂的工作流，而非每次从头开始。
注意事项
不适合需要一次性、独立运行且不依赖历史状态的简单网页抓取或自动化任务。
常见问题
如何查看当前有哪些持久化的页面？
使用 `const pages = await client.list();` 可以列出服务器上所有已命名的页面。
脚本中的 `page` 对象是什么？
`page` 对象是标准的 Playwright Page 实例，你可以使用所有 Playwright 提供的页面操作方法。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/dev-browser-claude-skill/raw/index.md 读取 dev-browser-claude-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/dev-browser-claude-skill/raw/index.md（查看排版版本）