Skill: Browser Screenshot

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

references/agent-browser-setup.md

if unsure.

Overview

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

Step 0: Research — Find the Right Page First

Page Selection Strategy

"<model name>" site:<vendor-domain> blog

"<model name>" official page

huggingface.co/<org>/<model>

"<service name>" API docs

What Makes a Good Screenshot Source

• 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

Pre-Flight URL Validation

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

Region Selection Strategy

Step 1: Navigate to the Target Page

Always Start by Listing Tabs

agent-browser --auto-connect tab list

Navigation by Input Type

agent-browser --auto-connect open <url>

open https://www.google.com/search?q=<encoded-query>

Platform-Specific Search URLs

https://www.reddit.com/search/?q=<query>

https://x.com/search?q=<query>

https://www.linkedin.com/search/results/content/?keywords=<query>

https://hn.algolia.com/?q=<query>

https://github.com/search?q=<query>

https://www.youtube.com/results?search_query=<query>

Wait for Page Load

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.

Step 2: Locate the Target Region

Primary Method: DOM Selector Discovery

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()"

Platform Selectors

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.

Multiple Matching Elements

# Count matches
agent-browser --auto-connect get count "article[data-testid='tweet']"

# Use nth-child or :first-of-type, or a more specific selector
# Or use eval to find the right one by text content:
agent-browser --auto-connect eval --stdin <<'EOF'
const posts = document.querySelectorAll('article[data-testid="tweet"]');
for (let i = 0; i < posts.length; i++) {
  const text = posts[i].textContent.substring(0, 80);
  console.log(i, text);
}
EOF

:nth-of-type(N)

Step 3: Capture the Focused Screenshot

Method A: Scroll + Viewport Screenshot (Preferred for Viewport-Sized Targets)

# Scroll the target into view
agent-browser --auto-connect scrollintoview "<selector>"
agent-browser --auto-connect wait 500

# Take viewport screenshot
agent-browser --auto-connect screenshot /tmp/browser-screenshot-raw.png

Method B: Full-Page Screenshot + Crop (For Any Size Target)

# Take full-page screenshot
agent-browser --auto-connect screenshot --full /tmp/browser-screenshot-full.png

# Get the target element's bounding box
agent-browser --auto-connect get box "<selector>"
# Output: { x: 200, y: 450, width: 680, height: 520 }

Cropping

magick

convert

Retina Display Handling

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))

Crop Command

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.

Output Path

• 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

Step 4: Verify the Result

# Use the Read tool to visually inspect the cropped screenshot

Fallback: Visual Highlight Confirmation

How It Works

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.

When to Use This Fallback

• 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)

Page Preparation: Clean Up Before Capture

# Dismiss cookie banners, popups, overlays
agent-browser --auto-connect eval --stdin <<'EOF'
(function() {
  // Common cookie/popup selectors
  const selectors = [
    '[class*="cookie"] button',
    '[class*="consent"] button',
    '[class*="banner"] [class*="close"]',
    '[class*="modal"] [class*="close"]',
    '[class*="popup"] [class*="close"]',
    '[aria-label="Close"]',
    '[data-testid="close"]'
  ];
  selectors.forEach(sel => {
    document.querySelectorAll(sel).forEach(el => {
      if (el.offsetParent !== null) el.click();
    });
  });

  // Hide fixed/sticky elements that overlay content (nav bars, banners)
  document.querySelectorAll('*').forEach(el => {
    const style = getComputedStyle(el);
    if ((style.position === 'fixed' || style.position === 'sticky') && el.tagName !== 'HTML' && el.tagName !== 'BODY') {
      el.style.display = 'none';
    }
  });
})();
EOF

Use with caution: Hiding fixed elements might remove important context. Only run this when overlays visibly obstruct the target region.

Cookie Banners That Won't Dismiss

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.

Viewport Sizing

# Standard desktop viewport
agent-browser --auto-connect set viewport 1280 800

# Wider for dashboard/data-heavy pages
agent-browser --auto-connect set viewport 1440 900

# Narrower for mobile-like content (social media posts)
agent-browser --auto-connect set viewport 800 600

Complete Example: Screenshot a Reddit Post

# 1. List existing tabs
agent-browser --auto-connect tab list

# 2. Navigate to subreddit
agent-browser --auto-connect open https://www.reddit.com/r/programming/
agent-browser --auto-connect wait 2000

# 3. Find the first post container
agent-browser --auto-connect eval "document.querySelector('shreddit-post')?.getBoundingClientRect()"

# 4. Scroll it into view
agent-browser --auto-connect scrollintoview "shreddit-post"
agent-browser --auto-connect wait 500

# 5. Get bounding box
agent-browser --auto-connect get box "shreddit-post"
# → { x: 312, y: 80, width: 656, height: 420 }

# 6. Take full-page screenshot
agent-browser --auto-connect screenshot --full /tmp/reddit-raw.png

# 7. Crop with padding
convert /tmp/reddit-raw.png \
  -crop 688x452+296+64 +repage \
  reddit-post-screenshot.png

# 8. Verify by reading the output image

Key Commands Quick Reference

tab list

open <url>

wait 2000

snapshot -i

screenshot --annotate

screenshot --full <path>

get box "<selector>"

scrollintoview "<sel>"

eval <js>

set viewport <w> <h>

Troubleshooting

get box

returns null or zero-sized

• 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.

Cropped image is blank or wrong area

• 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.

Target element is inside an iframe

• 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.

open

succeeded but page content is wrong

• 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.

Screenshot command times out on fonts

• 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.

Page has lazy-loaded content

• 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