Guide · Agent skill
How to use the SnapDOM Screenshot Capture agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The SnapDOM skill teaches an AI agent how to use the SnapDOM JavaScript library, which captures a webpage element and converts it into an SVG, PNG, JPG, WebP, canvas or blob. This guide is for front-end developers and designers who may never have used an agent skill before. By the end you will know what the skill does, how to install it, how to ask for it in plain language, and what to check for safety.
SnapDOM Screenshot Capture2025Emma/vibe-coding-cn · MIT Download the skill Quick start
- 1Download and unzip. Download the SnapDOM skill ZIP from this page and unzip it. It contains SKILL.md.
- 2Place the skill folder. Move it into ~/.claude/skills/ for personal use or .claude/skills/ inside a project. Alternatively, upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
- 3Install the library. In your project, install the library with npm install @zumer/snapdom or yarn add @zumer/snapdom, or load it from a CDN in a browser page.
- 4Ask in plain language. Describe the element, the output format and any size or scale you need.
- 5Review and run the code. Check the code the agent writes, then run it in a browser page. Use exclude or the proxy option only when you need them.
What the SnapDOM skill makes the agent do
The skill is a reference guide, not a program. It gives the agent SnapDOM's code patterns, option names and troubleshooting notes, so the agent can write JavaScript that screenshots part of a page. It does not run anything on its own; the code it writes runs in a browser page.
According to the skill, SnapDOM preserves embedded fonts, icon fonts, CSS pseudo-elements, counters, line clamps, transforms and shadows. It can also set scale, custom width and height, exclude elements with a CSS selector, and enable a CORS proxy fallback.
- Export to SVG, PNG, JPG, WebP, canvas or blob
- Capture a styled element with its fonts and shadows
- Set scale, width and height
- Hide elements with an exclude selector
- Use a CORS proxy fallback for blocked resources
How to install the SnapDOM skill
Download the skill ZIP from this page and unzip it. The package contains a single file, SKILL.md. Put the unzipped skill folder in one of these locations, depending on how you want to use it:
- Personal: ~/.claude/skills/ so the skill is available across your projects
- Project: .claude/skills/ inside a specific project folder
- Claude apps: upload the ZIP under Settings → Capabilities → Skills
How to trigger the skill with natural requests
You do not need to type a command to use the skill. Describe what you want to capture in plain language and mention the output you need. The skill's own list of uses covers HTML-to-image conversion, capturing styled DOM with shadows and pseudo-elements, exporting elements with embedded icon fonts, custom-size screenshots, CORS-blocked resources and performance on large elements.
Good requests name the element, the format and any size or scale you need, for example: 'Export the #pricing-card element as a 2x PNG for my blog' or 'Capture the chart component as an SVG I can edit later.'
Examples of code the agent can write
The skill documents three basic patterns: a reusable capture object, one-step exports, and direct downloads. The first captures once and lets you export to several formats.
const result = await snapdom(document.querySelector('#target'));
const png = await result.toPng();
const svg = await result.toSvg();
await snapdom.download(element, 'screenshot.png');Options you can ask for
Options are passed as an object as the second argument. Use the English key names in the code, not the translated labels in the reference table. Common options include scale, width, height, embedFonts, exclude, useProxy, straighten and noShadows.
- scale: multiplies output resolution (2 gives 2x)
- width and height: custom output size in pixels
- embedFonts: includes @font-face rules, which the skill recommends for custom fonts
- exclude: a CSS selector for elements to hide during capture
- straighten: removes translate and rotate transforms
- noShadows: strips shadow effects
const result = await snapdom(element, { scale: 2, embedFonts: true, exclude: '.no-capture' });
const png = await result.toPng({ quality: 0.95 });Safety, requirements and what to check first
The skill's metadata says it runs no scripts and uses the network. Its own setup uses npm or yarn to install the @zumer/snapdom package, or loads the library from a CDN such as unpkg. Review any code the agent writes before running it, especially code that touches private pages.
The CORS proxy option sends resource requests through a third-party proxy URL. That can expose page content or resource URLs to that service, so do not enable it for confidential content unless you trust the proxy. SnapDOM only runs in a browser, so you need a web page or JavaScript environment. The skill lists minimum versions for Chrome, Edge, Firefox, Safari and mobile browsers.
- Requires Node.js with npm or yarn, or a browser page that loads the library from a CDN
- Requires the @zumer/snapdom npm package or the CDN build
- Runs in a modern browser only
- Does not run scripts itself
- Uses the network for installation, CDN loading and the optional proxy
Tips and troubleshooting
The skill's tips are practical. Prefer scale over width and height for better performance. Set embedFonts to true when custom fonts are missing. Use useProxy when images fail to load because of CORS. For large or complex pages, capture smaller parts.
If elements do not render, check that the element has enough height and width and that the CSS has finished loading. If the output looks wrong after a transform, try straighten set to false. The skill also notes that html2canvas is slower but more compatible, so use it if SnapDOM's output is not right in a browser you need.
- Lower scale if captures are slow
- Wait for fonts to load before calling SnapDOM
- Check the browser console for font loading errors
- Prefer SVG for charts and graphics
What people use it for
- Exporting a page component as a PNG or SVG for documentation
- Generating 1200×630 social media graphics from HTML layouts, using the width and height options
- Downloading a chart as an SVG file with snapdom.download
- Capturing a styled card with icon fonts and shadows at 2x scale for a blog post
Frequently asked questions
Is the SnapDOM skill free to use?
The skill is licensed under MIT, as listed on this page. The SnapDOM library is installed from the @zumer/snapdom npm package. Check the license file in the repository for the library's terms.
What do I need to use the SnapDOM skill?
You need Node.js with npm or yarn, or a browser page that loads the library from a CDN such as unpkg. You also need a modern browser, since SnapDOM only runs in the browser.
Does the SnapDOM skill run code by itself?
No. The skill is a reference guide with code examples. The agent writes code, and you run that code in a browser page.
How do I fix missing fonts in a SnapDOM capture?
Set embedFonts to true, and make sure the fonts have loaded before you call SnapDOM. If it still fails, check the browser console for font loading errors.
What should I do when images do not appear in the capture?
The skill suggests enabling useProxy for CORS-blocked images. You can also give a custom proxy URL. Be aware that the proxy sends requests through a third-party service.
How does SnapDOM compare to html2canvas?
The skill says SnapDOM is much faster on complex elements and has no dependencies. It also says html2canvas is slower but more compatible, so it may be the better choice when you need broader browser support.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer who needs to export HTML components as images or files, and you are comfortable reviewing code. Pick a different tool if you need captures of cross-origin content without a proxy, non-browser output, or identical rendering across every browser, where the skill itself points to html2canvas as more compatible.
Download the skill