Menu
Capture the current page or a DOM target as a PNG
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | Screenshots |
| description | Capture the current page or a DOM target as a PNG |
Use this skill when the user wants a browser screenshot.
load helper
/mod/_core/skillset/ext/skills/screenshots/screenshots.jshtml2canvas for you/mod/_core/skillset/ext/skills/screenshots/screenshots.js and pass custom html2canvasOptionshelpers
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
target for a full-page document.body screenshottarget may be a CSS selector string or a DOM elementpage-content.pngguidance
screenshotDownload(...) when the user wants an actual image filescreenshotBase64(...) only when JavaScript needs inline image data, because the return value is largeexamples 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()
Read the supplemental project documentation module
Frontend development router. Load deeper skills before editing
Use the frontend API surface correctly for app files, discovery, identity, and permission-aware browser data access.
Inspect, navigate, and interact with open browser surfaces through space.browser
Open or close stand-alone browser windows
Editable frontend runtime rules for framework pages, stores, shared runtime namespaces, and reusable visual patterns.