SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsweb-access

web-access

General & other

View repository

Updated 10-24 16:15

About this skill

web-access Skill

First-time installation

When the user uses it for the first time, execute the following process:

Step 1: Detect the runtime environment

bash ~/.claude/skills/web-access/scripts/check-deps.sh

Step 2: AI handles missing dependencies based on the output

The detection script only reports facts; installation decisions are made by the AI. Install whatever is missing; when Chrome is missing, prompt the user to download it manually (it cannot be installed automatically).

Step 3: After installation is complete, explain the following to the user

web-access is ready. Just state any networked need directly, and I will automatically choose the most suitable method:

  • Only need search results → search directly, fastest
  • Need to view the full page → scrape the page content without launching a browser
  • Need login or a dynamic page → automatically launch the browser; after logging in once, it is persistently saved

Windows users need a Git Bash environment (installing Git for Windows is sufficient).

Browsing philosophy

Browse like a human, not execute programs like a robot.

When humans browse web pages, they do not list complete steps before starting; instead, they enter with a goal, judge as they look, solve obstacles when encountered, and go deeper when they find the content insufficient—making decisions throughout around "what do I want to get". All behavior of this skill should follow this logic.

Three core judgments:

① What do I need? — Task-driven: first think clearly about the nature of the target information, then choose the lightest method that can reach it directly. Do not use heavy tools for lightweight tasks, and do not use lightweight tools for content they cannot cover.

② Is it enough? — If the information obtained can complete the task, it is enough. Do not over-collect, and do not waste cost for the sake of "completeness". To roughly understand a video, a few frames are enough; to understand an article, reading the text is enough; there is no need for a full-page screenshot to do something that can be done with the accessibility tree.

③ What to do when encountering obstacles? — Solve within the layer, do not fall back, do not disturb the user. Pop-ups, login walls, ads, loading failures—judge like a human whether this obstacle really blocks the target content: if it blocks, handle it; if not, bypass it and continue. Only inform the user when it is confirmed that it cannot be solved independently.

Information acquisition channel selection

  • Evaluate the task first, then choose the channel: Decide the starting point based on "the nature of the target information and which tool can obtain it directly", and choose the lightest solution that can reach it directly.
  • 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 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 Channel
Only need search summaries or keyword results, or need to discover information sources WebSearch
URL known, static public page WebFetch
Social media, content platforms (WeChat Official Accounts, Weibo, Xiaohongshu, X/Twitter, etc.) Browser CDP(Directly, skip WebFetch)
Needs dynamic content, login state, interactive operations, or needs to freely navigate and explore in 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.

Add header when WebFetch requests Accept: text/markdown, text/html; websites that support this protocol return Markdown directly, saving about 80% of tokens. When it fails (empty content / 403 / JS rendering), escalate to the browser layer.

No downgrading: after entering a heavier channel, you must not go back and use a lightweight tool to accomplish the same goal—that is equivalent to re-walking a path known to be blocked. Obstacles encountered at the browser layer should be solved within that layer (e.g., handling login) rather than looping back. The only exception: new sub-goals derived during browser operations may re-select a channel.

After entering the browser layer, distinguish the nature of the task:

  • Operational(navigation, form filling, clicking): use the accessibility tree to perceive the interface, and only use screenshots as an aid when recognition fails
  • Content-oriented(reading posts, viewing news, analyzing pages): use the accessibility tree to read the text structure, and at the same time judge whether images carry core information—if so, extract the image URLs and read them in a targeted manner

Image judgment: for social media, image-text blogs, and screenshot-type content, images are valuable by default, actively fetch them; for tool-type and navigation-type pages, the accessibility tree is sufficient by default.

Browser CDP mode

Startup

bash ~/.claude/skills/web-access/scripts/ensure-browser.sh
  • Browser ready on port 9222 → started by the script itself, state is trustworthy, use directly (close after the task ends)
  • already running → residual process detected, state is untrustworthy, must verify: run agent-browser --cdp 9222 open about:blank, if successful it is usable; if failed, execute close and then ensure again (do not close after the task ends)
  • ERROR or agent-browser not responding → execute bash ~/.claude/skills/web-access/scripts/close-browser.sh and then run again

⚠️ Strictly no downgrading: only use agent-browser CDP mode, do not switch to other browser tools. Playwright MCP is underlying the same playwright-core + launchPersistentContext, with equivalent capabilities, but the profile path is different—switching will lose the existing login state and require re-login.

Common commands

agent-browser --cdp 9222 open <url>           # 打开页面
agent-browser --cdp 9222 snapshot -i          # 可交互元素（操作用）
agent-browser --cdp 9222 snapshot             # 完整无障碍树（读文字用）
agent-browser --cdp 9222 click @ref-123       # 点击元素
agent-browser --cdp 9222 fill @ref-123 "内容" # 填写输入框
agent-browser --cdp 9222 wait load networkidle  # 仅用于 click/fill 触发导航后；open 已内置等待，勿在 open 后使用
agent-browser --cdp 9222 scroll down 3000     # 触发懒加载
agent-browser --cdp 9222 screenshot /tmp/x.png
agent-browser --cdp 9222 screenshot --annotate      # snapshot -i ref 失效时的升级方案，见 references/commands.md
agent-browser --cdp 9222 eval "<js>"          # 执行 JS，用于提取 DOM 信息

Image extraction

When judging that the content is in images, use eval to get the image URLs directly from the DOM, then open them in a targeted manner and read the screenshots—much more precise than full-page screenshots.

Two technical details you need to know:

  • Lazy loading: for images not yet in the viewport, naturalWidth is 0; scroll to the bottom before eval to get the complete list
  • Filter noise：naturalWidth > 200 to exclude icons and avatars, keeping content images
agent-browser --cdp 9222 scroll down 3000
agent-browser --cdp 9222 eval "JSON.stringify(Array.from(document.querySelectorAll('img')).map((img,i)=>({i,src:img.src,w:img.naturalWidth,h:img.naturalHeight})).filter(x=>x.w>200))"
# 对每张目标图片：
agent-browser --cdp 9222 open <img_url>
agent-browser --cdp 9222 screenshot /tmp/img_n.png
# 用 Read tool 读取截图内容

Video content acquisition

In CDP headed mode the browser renders for real, and screenshots can capture the current video frame. Core capability:seek to any point in time and take a screenshot, enabling discrete sampling analysis of video content.

# 获取总时长，制定采样计划
agent-browser --cdp 9222 eval "document.querySelector('video').duration"
# seek + 播放 + 截图
agent-browser --cdp 9222 eval "var v=document.querySelector('video'); v.currentTime=60; v.play()"
sleep 2
agent-browser --cdp 9222 screenshot /tmp/frame.png
# 全屏截图画面更清晰
agent-browser --cdp 9222 eval "document.querySelector('video').requestFullscreen()"

The frame sampling granularity (for reference only, analyze each video specifically: roughly understand → 30-60s interval; understand narrative → 10s; fine-grained analysis → 1-2s) is determined by the task requirements yourself, no need for the user to specify.

Login judgment

The core question of login judgment is only one:Have you obtained the target content?

After opening the page, first try to obtain the target content and keep executing. During this process, make a judgment based on two aspects of information:

  1. Domain knowledge: Knowledge of the website—X/Twitter's latest timeline, Xiaohongshu's private content, Weibo's full comments, etc. This type of content usually requires login to obtain complete data
  2. Actual page feedback: Does the content meet expectations? Is it a degraded version (e.g., popular posts instead of latest posts)? Are there obvious omissions?

Even if the page shows a login prompt, as long as the target content has been obtained, there is no need to bother the user to log in.

Only when it is confirmed thatthe target content cannot be obtained, infer: can login solve this problem? If the inference holds, tell the user:

"The current page cannot obtain [specific content] without login. Please log in to [website name] in the already-open Chrome window, and tell me to continue when done."

After login is complete, there is no need to restart the browser; directly continue the original task.

Task ends

ensure-browser.sh returns Browser ready(started this time) → close the browser (this script must be used; do not kill directly, otherwise a crash window will be left behind）：

bash ~/.claude/skills/web-access/scripts/close-browser.sh

Special task rules

Verification task

The goal of verification isprimary sources, not more secondary reports—multiple media outlets citing the same error creates the illusion of circular corroboration.

Search is used tolocatesources, not toproveauthenticity. After finding the source, directly visit and read the original text.

Information type Primary source
Policy/regulation Official website of the issuing agency
Corporate announcement Company official news page
Academic statement Original paper/institutional official website

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: "No official original text was found; the following verification comes from a [media name] report, and there may be transcription errors."

Understanding the boundaries of tool capabilities

When in doubt about the capabilities of any tool (MCP, CLI, library),if you do not have sufficient knowledge to be sure, check the official documentation first; if there is not enough documentation, consider examining the source code, and then make a judgment, do not guess, and do not shift uncertainty onto the user.

References index

File When to load
references/commands.md When less commonly used commands are needed (drag, storage, pdf, etc.)
references/login-flow.md When details of the login flow need to be understood