# browser-screenshot

Captures one block of a page — a post, a tweet, a chart, a section of an article — instead of a full-page dump. Useful when you need a clean illustration.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4100 installs
- Author: zc277584121
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/zc277584121/marketing-skills/tree/HEAD/skills/browser-screenshot/SKILL.md
- Updated: 2026-08-28
- HTML: https://affpapa.org/en/nevibecode/skills/browser-screenshot

## What it does

The skill walks the agent through the whole pipeline: research candidate pages with search and text fetch first, then open the winner in a browser, locate the target element by DOM selector and crop to it. An uncropped viewport or full-page shot is not allowed as a final result — nav bars, sidebars and ads make it useless as an illustration.

It drives a dedicated headed Chrome with a persistent profile, so cookies and login state survive between tasks and your daily browser stays untouched. `agent-browser` has to be installed. When a site sits behind a login wall, the skill opens the window and waits while you sign in or clear a verification step, then continues in the same profile and session.

Do not point two tasks at one profile at the same time: a second Chrome launch may exit before it creates a DevTools endpoint. Reuse the profile sequentially. If it is already running, the skill looks for a process whose command line carries the exact `--user-data-dir=$PROFILE_DIR` value and attaches to its CDP port; when those values are ambiguous it asks you to close the automation window and retry.

## Requirements
- Works with: Chrome

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/browser-screenshot/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/browser-screenshot/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/browser-screenshot/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/browser-screenshot/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install zc277584121/marketing-skills browser-screenshot
```

2. **Manually: put the files in place**
- File: `.github/skills/browser-screenshot/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/zc277584121/marketing-skills --path skills/browser-screenshot
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/browser-screenshot/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/zc277584121/marketing-skills/tree/HEAD/skills/browser-screenshot/SKILL.md

## When to use it
- screenshot a single post instead of a whole feed
- crop a chart or table out of an article
- keep a logged-in session across several captures
- pick a page worth shooting before opening a browser
- get a clean frame with no navigation or ads

## Example prompts
- take a screenshot of this Reddit post
- find an article about this model and capture the description block
- grab that tweet about the release, just the tweet itself

## Similar
- [dev-browser](https://affpapa.org/en/nevibecode/skills/dev-browser.md) — skill · 2500 installs
- [browser](https://affpapa.org/en/nevibecode/skills/browser.md) — skill · 5900 installs
- [browser-harness](https://affpapa.org/en/nevibecode/plugins/browser-harness.md) — plugin · ★ 18622
- [full-page-screenshot](https://affpapa.org/en/nevibecode/skills/full-page-screenshot.md) — skill · 564 installs
- [browser-screenshot-diff](https://affpapa.org/en/nevibecode/skills/browser-screenshot-diff.md) — skill · 696 installs
- [opencli-browser](https://affpapa.org/en/nevibecode/skills/opencli-browser.md) — skill · 20200 installs

From the same set: [zc277584121/marketing-skills](https://affpapa.org/en/nevibecode/by/zc277584121/marketing-skills.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md