Prerequisite check
Before starting networked operations, first check CDP mode availability:
node "${CLAUDE_SKILL_DIR}/scripts/check-deps.mjs"
If it does not pass, guide the user through setup:
- Node.js 22+: required (uses native WebSocket). Versions below 22 can be used but require installing the
wsmodule. - Chrome remote-debugging: open in the Chrome address bar
chrome://inspect/#remote-debugging, check "Allow remote debugging for this browser instance" and it is done; the browser may need to be restarted.
After the check passes, you must directly show the user the following notice in the reply, then start CDP Proxy to perform operations:
温馨提示：部分站点对浏览器自动化操作检测严格，存在账号封禁风险。已内置防护措施但无法完全避免，Agent 继续操作即视为接受。
Browsing philosophy
Think like a human, completing tasks with both efficiency and adaptability.
When performing tasks, do not over-rely on steps planned from fixed impressions; instead, enter with a goal, judge as you look, solve obstacles when encountered, and go deeper when the content found is insufficient — making decisions throughout around "what do I want to achieve". All behavior of this skill should follow this logic.
① Get the request — First clarify what the user wants to do and define success criteria: what counts as done? What information needs to be obtained, what operations need to be performed, and what result needs to be achieved? This is the anchor for all subsequent judgments.
② Choose the starting point — Based on the nature of the task, platform characteristics, and achievement conditions, choose the method most likely to directly reach the goal as the first step to verify. Succeeding on the first try is of course best; if not, adjust in ③. For example, if you need to operate a page, need a logged-in state, or know that a platform cannot be reached via static methods (Xiaohongshu, WeChat Official Accounts, etc.) → go directly to CDP
③ Process verification — The result of each step is evidence, not just a binary signal of success or failure. Use the result against the success criteria in ① to update your judgment of the goal: is the path progressing? Does the overall shape of the results (quality, relevance, magnitude) indicate the goal is reachable? If you find the direction is wrong, adjust immediately; do not repeatedly retry the same method — a search not hitting does not mean "the right method has not been found yet"; it may also mean "the target does not exist"; API errors, pages missing expected elements, and retries with no improvement are all telling you it is time to reassess the direction. When encountering obstacles such as pop-ups or login walls, judge whether they truly block the goal: if they block it, handle them; if not, bypass them — the content may already be in the page DOM, and interaction is only a display means.
④ Completion judgment — Against the defined task success criteria, stop only after confirming the task is complete, but also do not over-operate and do not waste cost for the sake of "completeness".
Networked tool selection
- Ensure the authenticity of information; first-hand information is better than second-hand information: Search engines and aggregation platforms are entry points for information discovery. When multiple search attempts yield no qualitative improvement, upgrade to a more fundamental acquisition method: locate first-hand sources (official websites, official platforms, original pages).
| Scenario | Tool |
|---|---|
| Search summaries or keyword results, discover information sources | WebSearch |
| URL is known, need to extract specific information from the page in a targeted way | WebFetch(fetch web page content, extracted by a small model according to the prompt, returns processed results) |
| URL known, but need the original HTML source (structured fields such as meta, JSON-LD) | curl |
| Non-public content, or platforms where the known static layer is ineffective (public content on Xiaohongshu, WeChat Official Accounts, etc. is also blocked by anti-scraping restrictions) | Browser CDP(direct, skip the static layer) |
| Requires a logged-in state, interactive operations, or the need to freely navigate and explore within the browser like a human | Browser CDP |
Browser CDP does not require the URL to be known—you can start from any entry point and find the target content through in-page search, clicking, navigation, etc. WebSearch, WebFetch, and curl do not handle logged-in states.
Jina(optional preprocessing layer, can be used in combination with WebFetch/curl; due to its characteristics it can save token consumption, so actively use it in combination when suitable for the task): a third-party web service that converts web pages to Markdown, greatly saving tokens but possibly causing information loss. The invocation method is r.jina.ai/example.com(add a prefix before the URL, without keeping the original site's http prefix), limited to 20 RPM. Suitable for pages centered on body text such as articles, blogs, documents, and PDFs; for non-article-structure pages such as data dashboards and product pages, it may extract incorrect blocks.
After entering the browser layer,/eval is your eyes and hands:
- Look: use
/evalto query the DOM and discover links, buttons, forms, and text content on the page—equivalent to "see what this page has" - Do: use
/clickto click elements,/scrollto scroll and load,/evalto fill out and submit forms—navigate naturally within the page like a human - Read: use
/evalto extract text content, and determine whether images/videos carry core information—if so, extract the media URL for targeted reading or/screenshotvisual recognition
When browsing web pages,first understand the page structure, then decide the next action. There is no need to plan all steps in advance.
Programmatic operation and GUI interaction
There are two ways to operate pages within the browser:
- Programmatic approach(constructing URLs for direct navigation, using eval to manipulate the DOM): when successful, it is fast and precise, but to the website it is not normal user behavior and may trigger anti-scraping mechanisms.
- GUI interaction(clicking buttons, filling in input fields, scrolling and browsing): the GUI is designed for humans, and websites will not restrict normal UI operations, offering the highest certainty, but with more steps and slower speed.
Choose the approach flexibly based on your understanding of the target platform. GUI interaction is also an effective probe for the programmatic approach—through a real interaction, observe the site's actual behavior (URL patterns, required parameters, page navigation logic) to provide a basis for subsequent programmatic operations; at the same time, when the programmatic approach is blocked, GUI interaction is a reliable fallback.
Links generated by in-site interaction are reliable: in-site interaction through interactive units from the user's perspective (cards, entries, buttons) naturally reaches URLs that carry the complete context required by the platform. Manually constructed URLs, however, may lack implicit necessary parameters, leading to being blocked, returning error pages, or even triggering anti-scraping.
Browser CDP mode
Connect directly to the user's everyday Chrome via CDP Proxy, naturally carrying the login state, with no need to launch a separate browser. Unless the user explicitly requests it, do not proactively operate the user's existing tabs. Perform all operations in background tabs that you create yourself, keeping intrusion into the user's environment to a minimum. Without closing the user's tabs, close the tabs you created after completing the task, keeping the environment tidy.
Startup
node "${CLAUDE_SKILL_DIR}/scripts/check-deps.mjs"
The script checks Node.js and the Chrome port in sequence, and ensures the Proxy is connected (if not running, it starts automatically and waits). Once started, the Proxy keeps running.
Proxy API
All operations call the HTTP API via curl:
# 列出用户已打开的 tab
curl -s http://localhost:3456/targets
# 创建新后台 tab（自动等待加载）
curl -s "http://localhost:3456/new?url=https://example.com"
# 页面信息
curl -s "http://localhost:3456/info?target=ID"
# 执行任意 JS：可读写 DOM、提取数据、操控元素、触发状态变更、提交表单、调用内部方法
curl -s -X POST "http://localhost:3456/eval?target=ID" -d 'document.title'
# 捕获页面渲染状态（含视频当前帧）
curl -s "http://localhost:3456/screenshot?target=ID&file=/tmp/shot.png"
# 导航、后退
curl -s "http://localhost:3456/navigate?target=ID&url=URL"
curl -s "http://localhost:3456/back?target=ID"
# 点击（POST body 为 CSS 选择器）— JS el.click()，简单快速，覆盖大多数场景
curl -s -X POST "http://localhost:3456/click?target=ID" -d 'button.submit'
# 真实鼠标点击 — CDP Input.dispatchMouseEvent，算用户手势，能触发文件对话框
curl -s -X POST "http://localhost:3456/clickAt?target=ID" -d 'button.upload'
# 文件上传 — 直接设置 file input 的本地文件路径，绕过文件对话框
curl -s -X POST "http://localhost:3456/setFiles?target=ID" -d '{"selector":"input[type=file]","files":["/path/to/file.png"]}'
# 滚动（触发懒加载）
curl -s "http://localhost:3456/scroll?target=ID&y=3000"
curl -s "http://localhost:3456/scroll?target=ID&direction=bottom"
# 关闭 tab
curl -s "http://localhost:3456/close?target=ID"
In-page navigation
Two ways to open links within a page:
/click: Click directly within the current tab on an interactive unit from the user's perspective—simple and direct, processed serially. Suitable for scenarios requiring continuous operations within the same page, such as clicking to expand, turning pages, entering details, etc./new+ full URL: Use the full address of the target link (including all URL parameters) to open in a new tab. Suitable for scenarios requiring simultaneous access to multiple pages.
Links on many websites contain session-related parameters (such as tokens), which are necessary for normal access. When extracting a URL, keep the full address; do not trim or omit parameters.
Media resource extraction
When determining that the content is in an image, use /eval to get the image URL directly from the DOM, then read it in a targeted way—far more precise than a full-page screenshot.
Technical facts
- A page contains a large amount of content that has loaded but is not displayed—images not in the current frame of a carousel, text in collapsed sections, lazy-loading placeholder elements, etc. They exist in the DOM but are invisible to the user. Thinking in terms of data structures (containers, attributes, node relationships) allows direct access to this content.
- The DOM contains boundaries that selectors cannot cross (Shadow DOM's
shadowRoot, iframe'scontentDocument, etc.). Recursive traversal via eval can penetrate all levels at once and return tagged structured content, suitable for quickly understanding the complete structure of an unknown page. /scrollto the bottom triggers lazy loading, causing images that have not entered the viewport to finish loading. If you do not scroll before extracting image URLs, some images may not yet be loaded.- After obtaining media resource URLs, public resources can be downloaded locally and then read; only resources that require a login state to obtain need to be navigated + screenshotted within the browser.
- Intensively opening a large number of pages in a short time (such as batch
/new) may trigger a website's anti-scraping risk controls. - Prompts returned by the platform such as "content does not exist" or "page not found" do not necessarily reflect the true state; they may also be a problem with the access method (such as a URL missing required parameters, triggering anti-scraping) rather than the content itself.
Video content acquisition
The user's Chrome renders for real, so a screenshot can capture the current video frame. Core capability: via /eval control the <video> element (get duration, seek to any time point, play/pause/fullscreen), combined with /screenshot frame capture, enabling discrete sampling analysis of video content.
Login determination
The user's everyday Chrome naturally carries the login state, and most commonly used websites are already logged in.
The core question of login determination is only one:Was the target content obtained?
After opening the page, first try to obtain the target content. Only when it is confirmed thatthe target content cannot be obtainedOnly when it is determined that logging in can resolve the issue, tell the user:
"The current page cannot retrieve [specific content] while not logged in. Please log in to [website name] in your Chrome, and tell me to continue once done."
After logging in, there is no need to restart anything; just refresh the page to continue.
Task complete
Use /close to close the tab you created yourself; you must keep the user's original tabs unaffected.
The Proxy keeps running; it is not recommended to stop it proactively — after a restart, you need to re-authorize the CDP connection in Chrome.
Parallel research: sub-agent divide-and-conquer strategy
When a task contains multipleindependentresearch targets (e.g., researching N projects or N sources at the same time), encourage reasonable divide-and-conquer to sub-agents for parallel execution, rather than the main agent handling them serially.
Benefits:
- Speed: multiple sub-agents run in parallel, and total time is roughly equal to the duration of a single subtask
- Context protection: scraped content does not enter the main agent's context; the main agent only receives summaries, saving tokens
Parallel CDP operations: each sub-agent, within the current user browser instance, creates the background tabs it needs on its own (/new), operates on its own, and closes them on its own when the task ends (/close). All sub-agents share one Chrome and one Proxy, operating different tabs through different targetIds, with no race-condition risk.
How to write sub-agent prompts: goal-oriented, not step instructions
- You must write
必须加载 web-access skill 并遵循指引in the sub-agent prompt; the sub-agent will automatically load the skill, and there is no need to copy skill content or specify a path in the prompt. - Sub-agents have independent judgment ability. The main agent's responsibility is to clearly statewhat is wanted, and only limithow to do itwhen necessary and certain. Over-specifying steps deprives sub-agents of judgment space and instead introduces the main agent's assumption errors.Avoid wording in the prompt that hints at sub-agent behavior: "search for xx" will anchor the sub-agent to WebSearch, whereas in reality some anti-scraping sites require direct CDP access to the main site to effectively obtain content. When writing prompts, the main agent should describe the goal ("obtain", "research", "understand") and avoid verbs that hint at specific means ("search", "scrape", "crawl").
Divide-and-conquer criteria:
| Suitable for divide-and-conquer | Not suitable for divide-and-conquer |
|---|---|
| Goals are mutually independent, and results do not depend on each other | Goals have dependencies; the next one needs the previous result |
| Each subtask is large enough (multi-page scraping, multiple rounds of searching) | Simple single-page query; divide-and-conquer overhead exceeds the benefit |
| Tasks that require CDP browser or long-running execution | Lightweight queries that can be completed with a few WebSearch / Jina calls |
Information verification tasks
The goal of verification isfirst-hand sources, not more second-hand reports. Multiple media outlets citing the same error can create an illusion of circular corroboration.
Search engines and aggregation platforms are information discovery entry points and tools forlocatinginformation; they cannot be used to directlyproveAuthenticity. After finding the source, access it directly and read the original text. The same principle applies to research on tool capabilities/usage—official documentation is the primary source; when uncertain, check the documentation or source code first, and do not guess.
| Information type | Primary source |
|---|---|
| Policy/regulation | Official website of the issuing agency |
| Corporate announcement | Company's official news page |
| Academic statement | Original paper/institutional official website |
| Tool capabilities/usage | Official documentation, source code |
When the official website cannot be found: Original reporting by authoritative media (not reprints) can serve as secondary evidence, but it must be explained to the user: "The official original text was not found; the following verification comes from a [media name] report, and there may be transcription errors." A single source must likewise be declared to the user.
Site experience
Experience with specific websites accumulated during operations is stored by domain under references/site-patterns/ .
After determining the target website, if there is a matching site in the site-patterns list output by the pre-check, the corresponding file must be read to obtain prior knowledge (platform characteristics, effective patterns, known pitfalls). Experience content is marked with the date of discovery and should be treated as a possibly valid hint rather than a guarantee—if operations based on the experience fail, fall back to generic patterns and update the experience file.
After a CDP operation completes successfully, if a new site or new pattern worth recording experience about is discovered (URL structure, platform characteristics, operation strategy), proactively write it to the corresponding site experience file. Write only verified facts, not unconfirmed guesses.
File format:
---
domain: example.com
aliases: [示例, Example]
updated: 2026-03-19
---
## 平台特征
架构、反爬行为、登录需求、内容加载方式等事实
## 有效模式
已验证的 URL 模式、操作策略、选择器
## 已知陷阱
什么会失败以及为什么
Experience/pitfall content is marked with the date of discovery and should be treated as a "possibly valid hint" rather than a "guaranteed correct fact."
References index
| File | When to load |
|---|---|
references/cdp-api.md |
When detailed CDP API reference, JS extraction patterns, or error handling are needed |
references/site-patterns/{domain}.md |
After determining the target website, read the corresponding site experience |