# Screenshots

> Capture the current page or a DOM target as a PNG

- Skill: `agent0ai/screenshots` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add agent0ai/screenshots`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agent0ai/screenshots/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: agent0ai (https://skillmd.com/u/agent0ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agent0ai/screenshots

---


Use this skill when the user wants a browser screenshot.

load helper
- Import `/mod/_core/skillset/ext/skills/screenshots/screenshots.js`
- The helper lazy-loads `html2canvas` for you
- Prefer these exports instead of pasting the whole capture script inline
- If you need lower-level control, inspect `/mod/_core/skillset/ext/skills/screenshots/screenshots.js` and pass custom `html2canvasOptions`

helpers
- `await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")`
- `takeScreenshot({ target?, filename?, type?, quality?, html2canvasOptions? })` -> `{ canvas, blob, width, height, type, filename }`
- `screenshotBase64(options)` -> `{ base64, width, height, type, filename }`
- `screenshotDownload("name.png", options?)` -> downloads and returns `{ downloaded: true, filename, width, height, type }`

target
- Omit `target` for a full-page `document.body` screenshot
- `target` may be a CSS selector string or a DOM element
- Default file name is `page-content.png`

guidance
- Prefer `screenshotDownload(...)` when the user wants an actual image file
- Use `screenshotBase64(...)` only when JavaScript needs inline image data, because the return value is large

examples
Taking a low-level screenshot result
_____javascript
const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
return await screenshots.takeScreenshot()

Downloading a full-page screenshot
_____javascript
const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
return await screenshots.screenshotDownload("page-content.png")

Capturing a specific panel
_____javascript
const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
return await screenshots.screenshotDownload("panel.png", {
  target: "[data-panel]"
})

Getting base64 image data
_____javascript
const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
return await screenshots.screenshotBase64()