Skip to content
Get packs

SnapDOM Screenshot Capture

Turn HTML elements into SVG, PNG, JPG or WebP images with styles and fonts kept intact

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

What it does

This skill teaches the agent how to use SnapDOM, a JavaScript library that captures a webpage element and converts it into an image file (SVG, PNG, JPG, WebP), canvas, or blob. Once installed, the agent can write code that screenshots parts of a page while preserving fonts, pseudo-elements, and shadows, and can set scale, size, exclusions, and CORS proxy options. The skill is a reference guide with code examples; it does not run anything on its own.

Great for

  • Front-end developers who need to export a page component as an image or downloadable file
  • Designers or builders generating social-media-sized graphics from HTML layouts
  • Developers who want a dependency-free alternative to html2canvas for faster captures

Skip it if

  • Capturing cross-origin content without care: the CORS proxy option sends resource requests through a third-party proxy URL, which may expose page content or URLs to that service
  • Non-developers without a web page or JavaScript environment, since the library only runs in a browser
  • Pixel-perfect output in every browser: the skill itself notes html2canvas is slower but more compatible, and SnapDOM requires modern browser versions

Try asking

  • “Use SnapDOM to download this dashboard card as a PNG at 2x scale”
  • “Write code that exports this chart to SVG and excludes the controls”
  • “Capture a 1200×630 social preview image from this HTML div using SnapDOM”
  • “Set up a SnapDOM plugin that adds a PDF export to my page”
Step-by-step guide: how to use SnapDOM Screenshot CaptureInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 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

  • Prefer the scale option over fixed width and height for better performance, as the skill itself recommends
  • If fonts or images appear missing, enable embedFonts and review the CORS proxy setting before relying on it
  • Review any generated code before running it in a page that handles private or logged-in data

What's inside

  • 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.