Browser Screenshot

Skill: Browser Screenshot

Take focused screenshots of specific regions on web pages — a Reddit post, a tweet, an article section, a chart, etc. — not just a full-page dump.

Prerequisite: agent-browser must be installed. This skill uses its own headed Chrome with a dedicated persistent profile; the user's daily Chrome does not need remote debugging.

Dedicated Browser Profile

Use the same dedicated persistent profile convention as my-chrome-automation:

PROFILE_DIR="${AGENT_BROWSER_PROFILE:-$HOME/.agent-browser-chrome}"
NAMESPACE="${NAMESPACE:-browser-screenshot}"
SESSION="${SESSION:-focused-capture}"

ab() {
  agent-browser --namespace "$NAMESPACE" --session "$SESSION" --headed --profile "$PROFILE_DIR" "$@"
}

Run every browser command through ab. Do not use --auto-connect, generic CDP discovery, or the user's daily Chrome profile. The dedicated profile preserves cookies and login state across tasks while allowing the user's normal Chrome to remain open and untouched.

Choose a descriptive SESSION for the task when practical. Do not run multiple tasks against the same profile concurrently; reuse it sequentially to avoid profile-lock conflicts.

If the target site requires login, open it with ab, pause for the user to complete login or verification in the dedicated headed window, and then continue with the same profile and session.

If the Dedicated Profile Is Already Running

A second Chrome launch with the same profile may exit before creating a DevTools endpoint. Never fall back to whichever Chrome happens to be open. Either reuse a known Agent Browser session for this profile, or explicitly attach only to a Chrome process whose command line contains the exact --user-data-dir=$PROFILE_DIR value.

On macOS, identify that dedicated process and its local CDP port like this:

PROFILE_PID="$(ps -axo pid=,command= | awk -v profile="--user-data-dir=$PROFILE_DIR" 'index($0, profile) && index($0, "--remote-debugging-port=") && $0 !~ /Helper/ {print $1; exit}')"
CDP_PORT="$(lsof -nP -a -p "$PROFILE_PID" -iTCP -sTCP:LISTEN | awk 'NR > 1 && $9 ~ /^127\.0\.0\.1:[0-9]+$/ {split($9, parts, ":"); print parts[2]; exit}')"

ab() {
  agent-browser --namespace "$NAMESPACE" --session "$SESSION" --cdp "$CDP_PORT" "$@"
}

Require non-empty, unambiguous PROFILE_PID and CDP_PORT values before attaching. If they cannot be verified, ask the user to close the dedicated automation window and retry. Do not close a browser that this task only attached to.

Overview

This skill handles the full pipeline:

1. Research the best page to screenshot (web search, fetch)
2. Navigate to the right page in the browser
3. Locate the target element/region on the page
4. Capture a focused, cropped screenshot of just that region

Hard Rule: No Full-Screen Screenshots

NEVER output an uncropped full-viewport or full-page screenshot as a final result. Full screenshots contain too much noise (nav bars, sidebars, ads, unrelated content) and are unsuitable as article illustrations. Every screenshot MUST be cropped to a focused region.

Step 0: Research — Find and Validate Sources Before Opening the Browser

The browser is for capturing, not for browsing. Before opening anything in Chrome, use text-based tools (WebSearch, WebFetch) to find candidate pages, read their content, and decide which ones are actually worth screenshotting.

Research-First Workflow

1. WebSearch to find candidate pages for the topic
2. WebFetch each candidate to read its text content — check if it has the information/visual you need
3. Evaluate: Is this page worth a screenshot? Does it have a clear, focused region that would work as an illustration?
4. Only then open the browser to capture the screenshot

This saves significant time — most candidate pages won't be worth screenshotting, and you can eliminate them without the overhead of browser navigation.

When to Use Browser-First Instead

Skip the WebSearch/WebFetch phase and go directly to Chrome browsing when:

• The target platform requires login — Reddit, LinkedIn, X/Twitter, and other social platforms often gate content behind login walls. Use the dedicated profile directly so its saved login state can be reused.
• The user specifies a platform with a clear search need — e.g., "find a Reddit post about X" or "screenshot a tweet about Y". Go straight to the platform's search in Chrome.
• WebFetch returns blocked/incomplete content — some sites aggressively block non-browser requests. If you get a 403, a CAPTCHA page, or stripped content, switch to Chrome.

In these cases, Chrome browsing replaces WebSearch — navigate to the platform's search page, browse results, and evaluate pages visually before deciding what to screenshot.

Page Selection Strategy

The right page depends on the context of the article and how recent/notable the subject is:

Note: This table lists common subject types but is not exhaustive. Apply the same research-first strategy to any subject type — find the most authoritative and visually clean source page for the topic at hand.

What Makes a Good Screenshot Source

Core principle: Less is more. Focus on content, not chrome.

A good screenshot source contains a focused, self-contained piece of information — a paragraph of text, a key quote, a data table, a diagram. It should NOT be a busy page full of buttons, navigation, sidebars, and interactive elements.

• Prefer: A section of a blog post with a clear heading and 1-2 paragraphs of text. A single chart or diagram. A model card header with name and description. A quote or key finding.
• Avoid: Full landing pages with CTAs and navigation. Dashboard views with multiple panels. Pages dominated by UI controls (buttons, dropdowns, forms) rather than readable content.
• Official blog posts are ideal: they have hero images, prominent titles, and concise descriptions designed for sharing
• Product landing pages can work but only if you crop to the hero section — ignore the rest
• HuggingFace model cards are reliable for open-source models: consistent layout, model name + description always at top
• API docs are acceptable fallback: show the product name and key specs

Rule of thumb: If the region you plan to capture contains more interactive UI elements (buttons, links, nav items) than readable text content, it's a bad crop. Find a more content-rich region, or pick a different page entirely.

Pre-Flight URL Validation

Before opening in the browser, validate URLs with WebFetch (lightweight HEAD/GET) to avoid wasting time on 404s or redirects:

WebFetch: <candidate-url>
→ Check status code, title, and content snippet
→ If 404 or redirect to unrelated page, try next candidate

Region Selection Strategy

Think about what the article reader needs to see in this screenshot: