Skip to content
Get packs

SnapDOM DOM-to-Image Capture

Turn web page elements into SVG, PNG, JPG or WebP images in the browser

Source Download skill
Repository
2025Emma/vibe-coding-cn
Stars
23,127
Licence
MIT
Files
3 files

What it does

Once installed, the agent knows how to write JavaScript that takes a snapshot of an HTML element on a web page and converts it into an image file (SVG, PNG, JPG or WebP), keeping styles, fonts and pseudo-elements. It can also trigger a download of the result, and it knows the 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 rather than running anything itself.

Great for

  • Front-end developers who need screenshots or image exports of rendered page sections
  • Teams building share-card or report-export features in a web app
  • Developers who want a dependency-free alternative to html2canvas

Skip it if

  • Users who just want a screenshot of their screen, since this only works inside a web page's JavaScript and needs a browser environment
  • Projects that cannot load third-party scripts, since the library is pulled from npm or a CDN such as unpkg
  • Cases needing pixel-perfect fidelity on complex pages, because the skill's performance and browser claims are the project's own and were not independently verified here

Try asking

  • “Write a function that downloads the #pricing-table element as a 2x PNG, excluding the .controls buttons”
  • “Export this dashboard card as an SVG and show it in a preview modal”
  • “Set up snapdom with a CORS proxy so external images in my product card render in the capture”
Step-by-step guide: how to use SnapDOM DOM-to-Image CaptureInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    snapdom.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip snapdom.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip snapdom.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for the specific output format and options you need, such as scale or exclude selectors, so the agent picks the right calls
  • Test the generated code in a browser, since the skill itself does not run or verify captures
  • If you use the useProxy option, choose a proxy you trust, because it sends asset requests through a third party

What's inside

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

Redistributed unmodified from 2025Emma/vibe-coding-cn under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.