Prerequisite: agent-browser must be installed and Chrome must have remote debugging enabled. See

references/agent-browser-setup.md

if unsure.

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

• Official blog posts are ideal: they have hero images, prominent titles, and concise descriptions designed for sharing
• Product landing pages work well: hero sections with taglines and key features
• 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

agent-browser --auto-connect wait --load networkidle

Note: Some sites (Reddit, X, LinkedIn) never reach

networkidle

. If

open

already shows the page title in its output, skip the wait. Use

wait 2000

as a safe alternative.

1. Take an annotated screenshot to understand the page layout:
   bash

   agent-browser --auto-connect screenshot --annotate

2. Take a snapshot to see the page's accessibility tree:
   bash

   agent-browser --auto-connect snapshot -i

3. Identify the target container element. Look for:
   • Semantic HTML containers:

     <article>

     ,

     <main>

     ,

     <section>

   • Platform-specific components (see Platform Selectors)
   • Data attributes:

     [data-testid="..."]

     ,

     [data-id="..."]

4. Verify with

   get box

   to confirm the element has a reasonable bounding box:
   bash

   agent-browser --auto-connect get box "<selector>"

   This returns

   { x, y, width, height }

   . Sanity-check:
   • Width should be > 100px and < viewport width
   • Height should be > 50px
   • If the box is the entire page, the selector is too broad — refine it
5. If the selector is hard to find, use

   eval

   to explore the DOM:
   bash

   agent-browser --auto-connect eval "document.querySelector('article')?.getBoundingClientRect()"

shreddit-post

[data-testid="post-container"]

article[data-testid="tweet"]

.feed-shared-update-v2

#hnmain .fatitem

[data-hpc]

.repository-content

#player-container-outer

article

main

[role="main"]

.post-content

.article-body

These selectors may change over time. Always verify with

get box

before using.

1. Detect the scale factor: Compare viewport size vs actual image dimensions:
   bash

   # Check actual image dimensions
   magick identify /tmp/screenshot.png
   # → 3456x1880 means 2x scale on a 1728x940 viewport

2. Multiply

   get box

   coordinates by the scale factor before cropping:
   bash

   # get box returns viewport coordinates: { x: 200, y: 450, width: 680, height: 520 }
   # For 2x Retina, actual image coordinates are:
   SCALE=2
   X=$((200 * SCALE))
   Y=$((450 * SCALE))
   W=$((680 * SCALE))
   H=$((520 * SCALE))
   PADDING=$((16 * SCALE))

magick /tmp/browser-screenshot-full.png \
  -crop $((W + PADDING*2))x$((H + PADDING*2))+$((X - PADDING))+$((Y - PADDING)) \
  +repage \
  <output-path>.png

Important:

get box

returns floating-point values. Round them to integers before passing to ImageMagick.

Padding: Use 12–20px (viewport px). Increase to ~30px if the target has a distinct visual boundary (card, bordered box). Use 0 if the user wants a tight crop.

• If the user specifies an output path, use that
• Otherwise, save to a descriptive name in the current directory, e.g.,

  reddit-post-screenshot.png

  ,

  tweet-screenshot.png

1. Inject a highlight border on the candidate element:
   bash

   agent-browser --auto-connect eval --stdin <<'EOF'
   (function() {
     const el = document.querySelector('<selector>');
     if (!el) { console.log('NOT_FOUND'); return; }
     el.style.outline = '4px solid red';
     el.style.outlineOffset = '2px';
     el.scrollIntoView({ block: 'center' });
   })();
   EOF

2. Take a screenshot and visually inspect:
   bash

   agent-browser --auto-connect screenshot /tmp/highlight-check.png

   Read the screenshot to check if the red border surrounds the correct content.
3. If correct, remove the highlight and proceed with cropping:
   bash

   agent-browser --auto-connect eval "document.querySelector('<selector>').style.outline = ''; document.querySelector('<selector>').style.outlineOffset = '';"

4. If wrong, try the next candidate or refine the selector, re-highlight, and re-check.

• The page has complex/nested components and you're not sure which container is right
• Multiple similar elements exist and you need to pick the correct one
• The user's description is vague ("that chart in the middle of the page")
• The

  get box

  result looks suspicious (too large, too small, zero-sized)

click()

remove()

1. Crop it out — if the banner is at the top or bottom, simply adjust the crop region to exclude it. This is the fastest and most reliable approach.
2. Scroll past it — scroll the target content away from the banner area before capturing.

• The selector doesn't match any element. Use

  get count "<selector>"

  to verify.
• The element may be hidden or not yet rendered. Try

  wait 2000

  and retry.

• The full-page screenshot coordinates may differ from viewport coordinates. Use

  screenshot --full

  with

  get box

  (they use the same coordinate system).
• Check if the page has horizontal scroll —

  get box

  x values may be offset.

• get box

  and

  snapshot -i

  cannot see inside iframes.
• Use

  eval

  to access iframe content:
  bash

  agent-browser --auto-connect eval "document.querySelector('iframe').contentDocument.querySelector('<sel>').getBoundingClientRect()"

  Note: Only works for same-origin iframes.

• The browser may have switched to a different tab (e.g., a popup or redirect opened a new tab). Always verify after navigation:
  bash

  agent-browser --auto-connect eval "document.location.href"

• If the URL is wrong, use

  tab list

  to find the correct tab and

  tab goto <N>

  to switch.

• Some pages (e.g., Google developer docs) hang on

  document.fonts.ready

  . Force-resolve it first:
  bash

  agent-browser --auto-connect eval "document.fonts.ready.then(() => 'ok')"

  Then retry the screenshot.

• Scroll down to trigger loading before taking the screenshot:
  bash

  agent-browser --auto-connect scroll down 1000
  agent-browser --auto-connect wait 1500
  agent-browser --auto-connect scroll up 1000