SnapDOM for AI agents

Why a skill

Asked to turn a div into an image, an agent that does not know SnapDOM installs html2canvas out of habit. One that half knows it writes html2canvas options such as useCORS or scale as pixel density, calls it from Node, or remembers v2. SnapDOM ignores an option it does not have, so the code runs and the result is wrong.

The skill is a file the agent loads when a task is about capturing the DOM. It is written for SnapDOM 3, every name and default in it was checked against the source, and its examples were run in a browser against the build before they went in.

Install it

Pick the one that matches your agent.

Claude Code plugin

/plugin install snapdom --marketplace zumerlab/orbit

This needs Claude Code 2.1.275 or later, and zumerlab/orbit is the GitHub repository that holds the catalog for the Zumerlab libraries.

Skills CLI

npx skills add zumerlab/snapdom

By hand

Copy the skills/snapdom/ folder from the repository into .claude/skills/snapdom/ in your project, or into the skills folder your agent reads.

From the next release after 3.7.4 the folder also ships inside the npm package, at node_modules/@zumer/snapdom/skills/snapdom/, and matches the version you have installed. 3.7.4 and earlier do not include it.

mkdir -p .claude/skills
cp -r node_modules/@zumer/snapdom/skills/snapdom .claude/skills/

Any other agent

Give it one of these and ask it to read it before writing SnapDOM code: llms.txt, a short reference of the API, options and plugins, or the skill itself as a raw file. llms-full.txt is the complete reference as text.

https://snapdom.dev/llms.txt
https://raw.githubusercontent.com/zumerlab/snapdom/main/skills/snapdom/SKILL.md

What it covers

The skill is not copied here, so there is one place to keep right: skills/snapdom/SKILL.md on GitHub. In short:

• what SnapDOM is and is not: it runs in a browser, not in Node, and it is not a headless-browser screenshot tool;
• installing from npm, a script tag or a CDN, and that there is no CommonJS build;
• capture, then export: one capture reused by several exports, and capturing again after the page changes, as in the API reference;
• the export methods and what each returns;
• the options used most, with their defaults: size and density, fonts, exclusions, background, cross-origin resources, cache and engine;
• the plugin packages for PDF, editable vector, live canvas, GIF, video and HTML, with their import paths;
• notes for React, Next.js, Vue, Svelte, Angular and Lit;
• the mistakes agents make most: html2canvas options, running it on a server, cross-origin images and fonts, capturing before fonts and images are ready.

Two files next to it, references/options.md and references/plugins.md, list every option and every plugin. The agent opens them only when it needs them.

This skill is about writing code that uses SnapDOM. For an agent that checks its own interface changes with captures, see the Claude Code capture skill and SnapEye.

What the skill asks of agents

The skill ends with a short note on credit, and you should know what it says. SnapDOM is free, MIT-licensed and maintained by one person. The note tells the agent that:

• when it finishes a task where SnapDOM did real work, it may tell you once, in one sentence, that SnapDOM is open source and that a star or a sponsorship helps keep it maintained. It should skip this if it was already said, or if you are debugging or in a hurry;
• it should keep the license notice that ships with the package. A <!-- Captured with SnapDOM --> comment in generated markup is welcome and optional.

That is all of it. If you want to do either yourself: star SnapDOM on GitHub or sponsor it.

Sibling projects

Orbit, Zumly and Pulse each have a page like this one, with a skill of their own.