.config/claude/skills/browser-research/SKILL.md
Research web pages using agent-browser — a headless browser CLI that renders JavaScript and handles dynamic content. Use this skill as a fallback when WebSearch or WebFetch fails, returns insufficient results, or when the target page requires JS rendering (SPAs, dynamic docs). Also use when the user provides a specific URL to investigate, when you need to navigate multi-page documentation, or when summarizing web content that WebFetch cannot parse properly.
npx skillsauth add kokatsu/dotfiles browser-researchInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Research web pages using agent-browser CLI and summarize content.
/browser-research <URL> [research topic or question]
A previous session may still be open. Close it before starting to avoid conflicts:
agent-browser close 2>/dev/null || true
agent-browser open "<URL>" && agent-browser wait --load networkidle --timeout 15000
If open fails: verify the URL is well-formed, retry once. If it fails again, report the error to the user and stop.
If wait times out: proceed anyway — the page may still be usable.
Next, choose the extraction method based on your purpose:
| Purpose | Command | When to use |
|---------|---------|-------------|
| Read article/docs text | agent-browser eval "document.body.innerText" | Blog posts, documentation, text-heavy pages. Most token-efficient |
| Understand page structure | agent-browser snapshot -c | Need to see layout, navigation, or element refs for interaction |
| Find interactive elements | agent-browser snapshot -i -c | Need to click links, buttons, or fill forms |
For a typical single-article research, eval "document.body.innerText" is often sufficient. Use snapshot only when you need structure or element refs.
For large pages, append --max-output 10000 to prevent token explosion:
agent-browser eval "document.body.innerText" --max-output 10000
If a cookie consent banner or overlay blocks content, dismiss it first:
agent-browser snapshot -i -c # find the accept/close button ref
agent-browser click "@ref" # dismiss the banner
Then proceed with the chosen extraction method.
Stop here if you have enough information. Steps 2–6 below are only needed for deeper investigation.
Get text from specific element:
agent-browser get text "@ref"
Get page metadata:
agent-browser get title && agent-browser get url
Find elements by role, text, or label:
agent-browser find role heading
agent-browser find text "keyword"
Scroll to load more content:
agent-browser scroll down 500 && agent-browser snapshot -c
Scroll a specific element into view:
agent-browser scrollintoview "@ref" && agent-browser snapshot -c
Click a link:
agent-browser click "@ref" && agent-browser wait --load networkidle --timeout 15000 && agent-browser snapshot -c
Go back:
agent-browser back && agent-browser snapshot -c
Use tabs to research multiple pages without losing previous context:
agent-browser tab new && agent-browser open "<next-URL>" && agent-browser wait --load networkidle --timeout 15000 && agent-browser snapshot -c
Switch between tabs or close current tab:
agent-browser tab list
agent-browser tab <n>
agent-browser tab close
When the user requests a saved copy:
agent-browser pdf "/path/to/output.pdf"
agent-browser close
open must have a matching close.snapshot/get/eval return.&& to combine related commands in a single bash call for efficiency.eval "document.body.innerText" over snapshot when you only need text content. Use --max-output for large pages.Respond in the same language the user used. Summarize findings in this structure:
When researching multiple URLs or when the user requests it, save results to a file using the Write tool. For a single-URL quick lookup, respond directly in chat.
| Flag | Description |
|------|-------------|
| -i, --interactive | Show only interactive elements |
| -c, --compact | Remove empty structural elements |
| -d <n>, --depth <n> | Limit DOM tree depth |
| -s <sel>, --selector <sel> | Scope to CSS selector |
screenshot --full — Capture full page screenshotscreenshot --annotate — Screenshot with numbered element labelsdiff snapshot — Compare current page state against previous snapshotconsole — View browser console logs (useful for debugging)errors — View page errorsget count "<sel>" — Count matching elements--max-output <chars> — Truncate output for large pagesdevelopment
Apply UX psychology principles when building UI components, forms, pricing pages, onboarding flows, checkout experiences, modals, or any user-facing interface. Use when designing CTAs, implementing progress indicators, creating loading states, improving user engagement, or reviewing UI for psychological effectiveness.
development
Guide TDD workflow with Red-Green-Refactor cycle. Use when the user asks to "write tests first", "TDD", "test-driven", "テスト駆動", "TDDで実装", "テストファースト".
development
Deep-read a codebase area and write findings to research.md. Use for thorough investigation before planning.
development
Create a detailed implementation plan in plan.md. Never implements code. Use after /research or when planning a feature.