Agent skill · software engineering · aiskillstore
snapdom
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.
Why this skill is useful
Provides specific commands and options for converting HTML elements to various image formats that the AI wouldn't reliably generate on its own.
What it needs
Requires @zumer/snapdom installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
SnapDOM Skill Fast, dependency-free DOM-to-image capture library for converting HTML elements into scalable SVG or raster image formats. When to Use This Skill Use SnapDOM when you need to: Convert HTML elements to images (SVG, PNG, JPG, WebP) Capture styled DOM with pseudo-elements and shadows Export elements with embedded fonts and icons Create screenshots with custom dimensions or scaling Handle CORS-blocked resources using proxy fallback Implement custom rendering pipelines with plugins Optimize performance on large or complex elements Key Features Universal Export Options SVG - Scalable vector format, embeds all styles PNG, JPG, WebP - Raster formats with configurable quality Canvas - Get raw Canvas element for further processing Blob - Raw binary data for custom handling Performance Ultra-fast capture (1.6ms for small elements, ~171ms for 4000×2000) No dependencies - Uses standard Web APIs only Outperforms html2canvas by 10-40x on complex elements Style Support Embedded fonts (including icon fonts) CSS pseudo-elements (::before, ::after) CSS counters CSS line-clamp Transform and shadow effects Shadow DOM content Advanced Capabilities Same-origin iframe support CORS proxy fallback for blocked assets Plugin system for custom transformations Straighten transforms (remove rotate/translate) Selective element exclusion Tight bounding box calculation Installation NPM/Yarn CDN (ES Module) CDN (UMD) Quick Start Examples Basic Reusable Capture One-Step Export Download Element With Options Essential Options Reference Option Type Purpose -------- ------ --------- scale Number Scale output (e.g., 2 for 2x resolution) width Number Custom output width in pixels height Number Custom output height in pixels embedFonts Boolean Include non-icon @font-face rules useProxy String\ Boolean Enable CORS proxy (URL or true for default) exclude String CSS selector for elements to hide straighten Boolean Remove translate/rotate transforms noShadows Boolean Strip shadow effects Common Pat …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/snapdom