SnapDOM Capture Guide

What it does

When your agent uses it

• Turning a styled HTML element into a downloadable PNG, JPG or WebP image
• Exporting a DOM element as a scalable SVG that preserves its CSS styling
• Capturing an element that uses pseudo-elements, custom fonts or shadow DOM
• Generating a screenshot-like image of a page section without a headless browser

Example prompts

• “Add a button that exports the #report element as a PNG using snapDOM.”
• “Capture this card component as an SVG that keeps its icon font.”
• “Use snapDOM to download the chart div as image.png when the user clicks export.”

Requirements

• The @zumer/snapdom package or its CDN build

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

1. 1Performance: Use scale instead of width/height for better performance
2. 2Fonts: Set embedFonts: true to ensure custom fonts appear correctly
3. 3CORS Issues: Use useProxy: true if images fail to load
4. 4Large Elements: Break into smaller chunks for complex pages
5. 5Quality: For PNG/JPG, use quality: 0.95 for best quality
6. 6SVG Vectors: Prefer SVG export for charts and graphics

What it can do on your machine

Read from SKILL.md and the folder at commit 9b42dd1. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • npm
  • yarn
  • git

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Hosts in commands or code, which the agent is likely to contact:

  • github.com
  • unpkg.com

  Also links to:

  • snapdom.dev
  • npmjs.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

SnapDOM Capture Guide loads about 1.9k tokens when it runs, and up to ~2.2k if it reads all its reference files. Until then it costs about 61 tokens; SKILL.md has 549 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~61

When it runs · the whole SKILL.md, loaded when a task matches

~1.9k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~2.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from 2025Emma/vibe-coding-cn at commit 9b42dd1, republished under its MIT licence (© 2025Emma). 549 words, ~1,916 tokens.

name

snapdom

description

snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving styles, fonts, and pseudo-elements.

npm install @zumer/snapdom
# or
yarn add @zumer/snapdom

<script type="module">
  import { snapdom } from "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
</script>

<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.umd.js"></script>

// Create reusable capture object
const result = await snapdom(document.querySelector('#target'));

// Export to different formats
const png = await result.toPng();
const jpg = await result.toJpg();
const svg = await result.toSvg();
const canvas = await result.toCanvas();
const blob = await result.toBlob();

// Use the result
document.body.appendChild(png);

// Direct export without intermediate object
const png = await snapdom.toPng(document.querySelector('#target'));
const svg = await snapdom.toSvg(element);

// Automatically download as file
await snapdom.download(element, 'screenshot.png');
await snapdom.download(element, 'image.svg');

const result = await snapdom(element, {
  scale: 2,                    // 2x resolution
  width: 800,                  // Custom width
  height: 600,                 // Custom height
  embedFonts: true,            // Include @font-face
  exclude: '.no-capture',      // Hide elements
  useProxy: true,              // Enable CORS proxy
  straighten: true,            // Remove transforms
  noShadows: false             // Keep shadows
});

const png = await result.toPng({ quality: 0.95 });

// Capture at different scales
const mobile = await snapdom.toPng(element, { scale: 1 });
const tablet = await snapdom.toPng(element, { scale: 1.5 });
const desktop = await snapdom.toPng(element, { scale: 2 });

// Hide specific elements from capture
const png = await snapdom.toPng(element, {
  exclude: '.controls, .watermark, [data-no-capture]'
});

// Capture with specific size
const result = await snapdom(element, {
  width: 1200,
  height: 630  // Standard social media size
});

// Fallback for CORS-blocked resources
const png = await snapdom.toPng(element, {
  useProxy: 'https://cors.example.com/?' // Custom proxy
});

// Extend with custom exporters
snapdom.plugins([pluginFactory, { colorOverlay: true }]);

// Hook into lifecycle
defineExports(context) {
  return {
    pdf: async (ctx, opts) => { /* generate PDF */ }
  };
}

// Lifecycle hooks available:
// beforeSnap → beforeClone → afterClone →
// beforeRender → beforeExport → afterExport

git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install

npm run compile

npm test

© 2025Emma, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in i18n/zh/skills/snapdom of 2025Emma/vibe-coding-cn.

• SKILL.md
• references/index.md
• references/other.md

Open the folder on GitHubat commit 9b42dd1

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in 2025Emma/vibe-coding-cn, which our catalogue first saw on October 7, 2026.

• aiskillstore/marketplaceskills/2025emma/snapdom