web-access

web-access Skill

Pre-checks

Before starting networking operations, first check CDP mode availability:

node "${CLAUDE_SKILL_DIR}/scripts/check-deps.mjs"

Node.js 22+ Required (uses native WebSocket).

Handle according to script output:

exit 0 → Continue
exit 2 → Need to ask the user's preference, write to ${CLAUDE_SKILL_DIR}/config.env of WEB_ACCESS_BROWSER
exit 1 → Handle according to the stdout error message. If the prompt includes "Agent processing order", execute according to its steps (e.g., first use a system command to open the browser and then rerun); if it can be resolved automatically, do not disturb the user; if it still fails, then ask the user for help

Supports the parameter --browser <chrome|edge> to express a temporary override for this run (does not write to config.env).

When switching browsers, proxy is a long-running process, so you need to first pkill -f cdp-proxy.mjs and then rerun check-deps.

After the check passes, you must directly show the following notice to the user in the reply, and then start the CDP Proxy to execute the operation:

温馨提示：部分站点对浏览器自动化操作检测严格，存在账号封禁风险。已内置防护措施但无法完全避免，Agent 继续操作即视为接受。

Browsing Philosophy

Think like a human, balancing efficiency and adaptability to complete the task.

When executing a task, do not over-rely on steps planned by fixed impressions; instead, enter with a goal, judge as you look, solve obstacles when encountered, and go deeper when discovering that the content is insufficient—make decisions throughout around "what am I trying 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 conditions for achievement, choose the method most likely to reach the goal directly as the first step to verify. One success is of course best; if not successful, adjust in ③. For example, if you need to operate a page, need a logged-in session, or know that a static method cannot reach the platform (Xiaohongshu, WeChat Official Accounts, etc.) → go directly to CDP

③ Process validation — The result of each step is evidence, not just a binary signal of success or failure. Use the result to compare against the success criteria in ①, and update your judgment of the goal: is the path advancing? Does the overall appearance of the results (quality, relevance, magnitude) indicate that the goal is reachable? If you find the direction is wrong, adjust immediately; do not repeatedly retry the same method—a search that does not hit 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 that it is time to reevaluate the direction. When encountering obstacles such as pop-ups or login walls, judge whether they truly block the goal: if they block it, handle it; if not, bypass it—the content may already be in the page DOM, and the interaction is only a presentation means.

④ Completion judgment — Compare against the defined task success criteria, and stop only after confirming the task is complete, but also do not over-operate and do not waste cost just for the sake of "completeness".

Networking tool selection

Ensure the authenticity of information; first-hand information is better than second-hand information: Search engines and aggregation platforms are information discovery entry points. When there is no qualitative improvement after multiple search attempts, upgrade to a more fundamental acquisition method: locate first-hand sources (official websites, official platforms, original pages).

Scenario	Tool
Search summaries or keyword results to discover information sources	WebSearch
The URL is known, and specific information needs to be extracted from the page in a targeted way.	WebFetch(Fetch the web page content, have a small model extract it according to the prompt, and return the processed result.)
The URL is known, and the raw HTML source code (structured fields such as meta, JSON-LD, etc.) is needed.	curl
Non-public content, or platforms where the static layer is known to be ineffective (public content on Xiaohongshu, WeChat Official Accounts, etc. is also restricted by anti-scraping measures).	Browser CDP(Direct, skip the static layer)
Needs login state, interactive operations, or the ability to freely navigate and explore inside 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 all do not handle login state.

Jina(Optional preprocessing layer, can be used in combination with WebFetch/curl; due to its characteristics it can save token consumption, so please actively use it in combination when appropriate for the task): A third-party web service that can convert 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 retaining the original website's http prefix), limited to 20 RPM. Suitable for pages centered on body text such as articles, blogs, documents, and PDFs; for non-article structured pages such as data dashboards and product pages, it may extract the wrong sections.

After entering the browser layer,/eval are your eyes and hands:

Look: Use /eval to query the DOM and discover links, buttons, forms, and text content on the page—equivalent to "see what this page has"
Do: Use /click to click elements,/scroll to scroll and load,/eval to fill out and submit forms—navigate naturally within the page like a human
Read: Use /eval to extract text content and determine whether images/videos carry core information—if so, extract the media URL for targeted reading or /screenshot visual 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.

Supplement: Local browser resources

When the user points topages they have visited themselves("that article about X I read before", "the XX dashboard I opened last time") orinternal organizational systems("our XX platform", "that YY system at the company", and other targets that cannot be found on the public internet), search local browser (Chrome / Edge) bookmarks/history:

node "${CLAUDE_SKILL_DIR}/scripts/find-url.mjs" [关键词...] [--only bookmarks|history] [--browser chrome|edge] [--limit N] [--since 1d|7h|YYYY-MM-DD] [--sort recent|visits]

Keywords are split on spaces, multiple words are ANDed, matching title + url (can be omitted); by default it traverses all installed Chromium-based browsers (Chrome, Edge),--browser limits to a single source;--since / --sort applies only to history; by default it sorts in reverse chronological order of most recent visits,--sort visits sorts by visit count (suitable for scenarios like "frequently visited websites").

Programmatic operation and GUI interaction

There are two ways to operate pages within the browser:

Programmatic approach(constructing a URL to navigate directly, 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 input fields, scrolling): the GUI is designed for humans; websites do not restrict normal UI operations, so determinism is highest, but there are many steps and it is slow.

Choose the approach flexibly based on your understanding of the target platform. GUI interaction is also an effective probe for programmatic approaches—through one real interaction, observe the site's actual behavior (URL patterns, required parameters, page navigation logic), providing a basis for subsequent programmatic operations; at the same time, when programmatic approaches are 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, items, buttons) naturally reaches URLs that inherently carry the complete context required by the platform. Manually constructed URLs may lack implicitly required parameters, resulting in interception, error pages, or even triggering anti-scraping measures.

Browser CDP mode

Connect directly to the user's everyday browser (Chrome / Edge / Chromium and other Chromium-based browsers) via CDP Proxy, naturally carrying the login state without starting a separate browser. Unless the user explicitly requests it, do not proactively operate existing user tabs; perform all operations in background tabs you create yourself, maintaining minimal intrusion into the user's environment. Without closing user 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 browser debugging port in sequence, and ensures the Proxy is connected (if not running, it starts automatically and waits). After startup, the Proxy keeps running.

Proxy API

All operations call the HTTP API via curl:

# 列出用户已打开的 tab
curl -s http://localhost:3456/targets

# 创建新后台 tab（自动等待加载）— URL 走 POST body，避免目标 URL 含 query 时被切分
curl -s -X POST --data-raw 'https://example.com' http://localhost:3456/new

# 页面信息
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"

# 导航（URL 走 POST body，target 走 query）、后退
curl -s -X POST --data-raw 'https://example.com' "http://localhost:3456/navigate?target=ID"
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: directly click the interactive unit from the user's perspective within the current tab, simple and direct, processed serially. Suitable for scenarios requiring continuous operations within the same page, such as clicking to expand, pagination, entering details, etc.
/new + full URL: open the complete address of the target link (including all URL parameters) in a new tab. Suitable for scenarios requiring simultaneous access to multiple pages.

Many website links contain session-related parameters (such as tokens), which are necessary for normal access. When extracting URLs, preserve the complete address; do not trim or omit parameters. Pass the URL as-is via POST body to /new or /navigate。

v2.5.3 migration notice: if the referenced site experience file (references/site-patterns/*.md) or other scripts still contain the old usage of GET /new?url=... or /navigate?target=...&url=... , the call will receive migration guidance. Rewrite it in place as a POST body according to references/migration-2.5.3.md before use, and update that site experience file along the way.

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—much more precise than a full-page screenshot.

Technical facts

A page contains a large amount of loaded but undisplayed content—images in carousels that are not the current frame, 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's contentDocument, etc.). Recursive traversal with eval can penetrate all levels at once and return structured content with labels, suitable for quickly understanding the complete structure of an unknown page.
/scroll Scrolling to 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 be loaded yet.
After obtaining the media resource URL, public resources can be downloaded directly to local storage and then read; only resources that require a logged-in state to obtain need to be navigated to + screenshot within the browser.
Opening a large number of pages in a short period of time (such as batch /new) may trigger the 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 real status; they may also be issues with the access method (such as the URL missing required parameters, or anti-scraping being triggered) rather than a problem with the content itself.

Video Content Acquisition

The user's browser renders for real, and screenshots can capture the current video frame. Core capabilities: through /eval controlling the <video> element (getting duration, seeking to any point in time, play/pause/fullscreen), combined with /screenshot frame capture, discrete sampling analysis can be performed on video content.

Login Determination

The user's everyday browser naturally carries the logged-in state, and most commonly used websites are already logged in.

There is only one core question for login determination:Have you obtained the target content?

After opening the page, first try to obtain the target content. Only when it is confirmed thatthe target content cannot be obtainedand it is determined that logging in can solve it, inform the user:

"The current page cannot obtain [specific content] in a logged-out state. Please log in to [website name] in your browser, and tell me to continue after you are done."

After logging in is complete, there is no need to restart anything; just refresh the page and continue.

Task End

Use /close to close the tab you created yourself; the user's original tabs must be preserved and unaffected.

The Proxy keeps running, and it is not recommended to stop it proactively — after a restart, the CDP connection needs to be re-authorized in the browser.

Parallel Research: Sub-Agent Divide-and-Conquer Strategy

When a task contains multipleindependentresearch targets (such as researching N projects or N sources at the same time), it is encouraged to reasonably divide the work among sub-agents for parallel execution, rather than having the main Agent handle it serially.

Benefits:

Speed: multiple sub-agents in parallel, total elapsed time is approximately 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 browser and one Proxy, operating different tabs through different targetIds, with no race-condition risk.

How to Write a Sub-Agent Prompt: 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 the skill content or specify the path in the prompt.
Sub-agents have independent judgment capability. The main Agent's responsibility is to state clearlywhat is wanted, and to limithow to do itonly when necessary and certain. Over-specifying steps deprives the sub-agent of its room for judgment, and instead introduces the main Agent's assumption errors.Avoid wording in prompts that hints at sub-agent behavior: "Search xx" will anchor the sub-agent to WebSearch, whereas in reality some anti-scraping sites require CDP to directly access the main site to effectively obtain content. When the main agent writes a prompt, it should describe the goal ("obtain", "research", "learn about") and avoid verbs that hint at specific means ("search", "scrape", "crawl").

Criteria for divide-and-conquer:

Suitable for divide-and-conquer	Not suitable for divide-and-conquer
Goals are mutually independent, results do not depend on each other	Goals have dependencies, the next one needs the previous one's result
Each subtask is large enough (multi-page scraping, multi-round search)	Simple single-page query; divide-and-conquer overhead exceeds the benefit
Tasks that require a CDP browser or run for a long time	Lightweight queries that can be completed with a few WebSearch / Jina calls

Information verification tasks

The target of verification isprimary sources, not more secondary reports. Multiple media outlets citing the same error create an illusion of circular corroboration.

Search engines and aggregation platforms are information discovery entry points and are tools forlocatinginformation; they cannot be used to directlyproveauthenticity. After finding a source, directly access and read the original text. The same principle applies to research on tool capabilities/usage—official documentation is a primary source; when uncertain, consult the documentation or source code first, do not guess.

Information type	Primary source
Policies/regulations	Official website of the issuing agency
Corporate announcements	Company's official news page
Academic statements	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 the user must be informed: "The official original text was not found; the following verification comes from [media name] reporting and may contain transcription errors." When there is only a single source, likewise declare it to the user.

Site experience

Experience with specific websites accumulated during operations, 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 annotated with the discovery date; treat it as a possibly valid hint rather than a guarantee—if operations based on the experience fail, fall back to the general pattern and update the experience file.

After a CDP operation completes successfully, if a new site or new pattern worth recording experience is discovered (URL structure, platform characteristics, operation strategy), proactively write it into the corresponding site experience file. Only write verified facts, not unconfirmed guesses.

File format:

---
domain: example.com
aliases: [示例, Example]
updated: 2026-03-19
---
## 平台特征
架构、反爬行为、登录需求、内容加载方式等事实

## 有效模式
已验证的 URL 模式、操作策略、选择器

## 已知陷阱
什么会失败以及为什么

Experience/pitfall content is annotated with the discovery date and is 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