browser-screenshot — Claude Code skill: focused page region
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.
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a claude-codeWhat browser-screenshot 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.
What it helps with
- 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 for the agent
- 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
How to install browser-screenshot
1Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a claude-code2Manually: put the files in place
~/.claude/skills/browser-screenshot/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/browser-screenshot/
1Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a codex2Manually: put the files in place
.agents/skills/browser-screenshot/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a cursor2Manually: put the files in place
.cursor/skills/browser-screenshot/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install zc277584121/marketing-skills browser-screenshot2Manually: put the files in place
.github/skills/browser-screenshot/SKILL.md1Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a gemini-cli2Platform CLI
gemini skills install https://github.com/zc277584121/marketing-skills --path skills/browser-screenshotManually: put the files in place
.devin/skills/browser-screenshot/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about browser-screenshot
How do I install browser-screenshot in Claude?
Run npx skills add zc277584121/marketing-skills --skill browser-screenshot -a claude-code. The skill lands at ~/.claude/skills/browser-screenshot/SKILL.md.
What does browser-screenshot do?
It finds the right page, opens it in a dedicated Chrome and crops the region you asked for by DOM selector. The output is a focused screenshot with no UI chrome.
What does browser-screenshot need to run?
agent-browser must be installed. The skill launches its own headed Chrome with a persistent profile, so remote debugging in your daily Chrome is not required.
