How to use the SnapDOM agent skill to capture HTML as images

What the snapdom skill makes the agent do

Once installed, the agent knows how to write JavaScript that takes a snapshot of an HTML element and converts it into an image file. The supported output formats are SVG, PNG, JPG and WebP. The skill says the capture keeps styles, embedded fonts and pseudo-elements such as ::before and ::after.

The agent can also trigger a download of the result and apply common options such as scaling, excluding elements, and using a CORS proxy for blocked images. The skill is a reference guide for the snapdom library, so the agent writes code that uses it. It does not take screenshots itself.

• Exports SVG, PNG, JPG and WebP, plus a raw canvas or blob if you need further processing
• Keeps fonts, icon fonts, pseudo-elements, transforms and shadows, according to the skill
• Offers options for scale, custom width and height, excluding selectors and a CORS proxy

Install the snapdom skill from a ZIP file

Download the snapdom ZIP from the skill's page on this directory and unzip it. The skill folder contains SKILL.md, plus references/index.md and references/other.md.

For a personal install, place the unzipped skill folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead. Restart or reopen your agent session if it does not pick up the new skill straight away.

• Personal: ~/.claude/skills/snapdom
• Project only: .claude/skills/snapdom inside your project folder

Upload the skill in the Claude apps

If you use the Claude apps rather than a local folder, you can upload the skill instead. Open Settings, go to Capabilities, then go to Skills and add the snapdom skill from the ZIP you downloaded.

The skill does not need a separate install of its own. The library it documents is installed in your web project, as described in the next section.

Install the snapdom library in your web project

The skill tells the agent how to use snapdom, but the library must be available to the page that runs the code. The skill lists two routes: install the @zumer/snapdom package with npm or yarn, or load the library from a CDN such as unpkg.

Use the npm or yarn route for a build-based project. Use a CDN script tag when you have no build step, for example a single HTML page.

• npm: npm install @zumer/snapdom
• yarn: yarn add @zumer/snapdom
• CDN ES module: import from https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs
• CDN UMD: script tag pointing to https://unpkg.com/@zumer/snapdom/dist/snapdom.umd.js

How to trigger the skill with natural requests

You do not need special syntax. Describe the capture you want in plain language, and mention the element, the output format and any options. The skill is most useful for requests about rendered web page content inside JavaScript.

Good requests name a target such as a CSS selector or a component, a format, and what to leave out. Vague requests such as 'screenshot my app' point to something this skill does not do, because it only works inside a web page's JavaScript.

• Write JavaScript that saves the #report-card element as a PNG with 2x scale.
• Add a button that downloads the .share-card section as an SVG file.
• Export the pricing table as a JPG and hide anything with the class .controls.
• Capture the chart container at 1200 by 630 for a social share image.

Options the agent can use

The skill documents a set of options passed to the capture call. The agent will usually pick the ones that match your request. You can also ask for a specific option by name.

• scale: multiplies output resolution, for example 2 for double resolution
• width and height: set a custom output size in pixels
• embedFonts: includes non-icon @font-face rules so custom fonts appear
• useProxy: enables a CORS proxy, either a URL you supply or true for the default
• exclude: a CSS selector for elements to hide during capture
• straighten: removes translate and rotate transforms
• noShadows: strips shadow effects

Safety notes: scripts, network and CORS proxies

This skill does not run scripts. Its code-generating role means the agent writes JavaScript for your project, and you run that code in your own browser environment. Review the generated code before you ship it.

The skill does use the network. The library is loaded from npm or from a CDN such as unpkg, and the useProxy option sends blocked asset requests through a proxy URL. If your project cannot load third-party scripts, or your images are sensitive, do not use the CDN route or the proxy without checking where the data goes.

• Runs scripts: no, according to the skill metadata
• Uses network: yes, for loading the library and for the optional CORS proxy
• Use a proxy URL you control rather than a public one when images contain private data

Tips for better results

The skill's own tips are practical. Prefer scale over setting width and height when you only need a sharper image. Set embedFonts to true when custom or Google fonts are missing from the output. Use SVG for charts and graphics, and PNG or JPG for photo-like content.

If a capture fails, check that the element has real width and height, that CSS and fonts have loaded before the call, and that the browser console shows no font or image errors. For very large pages, the skill suggests splitting the capture into smaller sections.

• Use scale instead of width and height for better performance
• Set embedFonts: true for custom fonts
• Use useProxy when images fail to load
• Lower scale or set noShadows: true if rendering is slow
• Break large captures into smaller chunks