| name | take-screenshot |
| description | Capture screenshots of the current work-in-progress UI via agent-browser against a running local dev server, then open them with google-chrome-stable. For UI changes, capture before/after pairs (and Figma reference shots when a design URL is provided) so visual diffs can be reviewed at a glance. |
| disable-model-invocation | true |
take-screenshot
Drive agent-browser to capture what the user is currently working on, save the PNG(s) to the scratchpad, and open them in google-chrome-stable for review.
When to use
- The user asks to "screenshot", "撮影", "見せて", "before/after" the current change.
- After implementing a UI / frontend change that should be visually verified.
- The user shares a Figma URL and wants a side-by-side with the rendered UI.
Output location
All PNGs go into the scratchpad directory (never the project tree):
<scratchpad>/take-screenshot-<short-timestamp>-<label>.png
Use labels like before, after, figma, current so the filenames are self-describing.
Steps
1. Identify the dev server
- Look for a running local dev server first (
lsof -iTCP -sTCP:LISTEN -P -n | grep -E ':(3000|5173|4321|8080|8000)' or similar). Reuse it if present.
- If none is running, start one in the background using whatever the project defines:
- Prefer a project skill (e.g. a
/run skill) when available.
- Otherwise fall back to
npm run dev / pnpm dev / bun dev / yarn dev / cargo run / python -m http.server etc. as appropriate.
- Launch with
Bash(run_in_background=true) and wait until the port responds (curl -sI http://localhost:<port> returns a response) before screenshotting.
- Record the URL of the page being worked on (the user's working route, not just
/).
2. Decide what to capture
| Situation | Captures |
|---|
| Pure UI change with reachable previous state (git stash / separate branch / deployed URL) | before.png + after.png |
| UI change without a clean "before" | after.png only — note this in the response |
| Figma URL supplied or referenced in the task | Additionally capture figma.png via the Figma MCP (mcp__claude_ai_Figma__get_screenshot) — never agent-browser against figma.com |
| Non-UI work (asked anyway) | A single current.png of the relevant page |
For before/after: stash or check out the prior state, screenshot, restore, re-run the dev server if it watches files, then screenshot the after. Be careful not to lose uncommitted work — prefer git stash --keep-index and always restore before reporting.
3. Capture
agent-browser open <URL>
agent-browser screenshot <path>
agent-browser screenshot <path> --full-page
Reuse an existing agent-browser session — only call agent-browser open when the URL changes.
For Figma captures, always use the Figma MCP (mcp__claude_ai_Figma__get_screenshot, get_design_context, get_metadata, etc.). Do not point agent-browser at figma.com — the MCP returns the actual design surface, while a browser shot would capture the Figma editor chrome. If only a URL is given, extract the node-id from it and pass that to the MCP.
4. Open for review
Open all captured PNGs in one Chrome window (background, non-blocking):
google-chrome-stable <path1> <path2> ... &
Always use the system google-chrome-stable (per global instructions), never a Nix wrapper.
5. Report
Print, in order:
- The dev-server URL used (and whether it was reused or freshly started).
- The absolute path of each PNG with its label.
- A one-line note on what to look at (e.g. "header spacing changed", "color token differs from Figma").
Notes
- Do not write PNGs into the project tree — scratchpad only.
- If you started a dev server, leave it running unless the user asks otherwise; mention how to stop it.
- If the page requires auth or specific state, ask the user once how to reach it rather than guessing.
- For mobile/responsive checks, pass viewport flags to
agent-browser (e.g. --viewport 390x844).
