Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/godmakereth/vibe-coding-tw/snapdomnpx skills add godmakereth/vibe-coding-tw --skill snapdomgit clone --depth 1 https://github.com/godmakereth/vibe-coding-twWrote this? Show the measurements
A badge for your README with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them.
[](https://agentmods.dev/skills/godmakereth/vibe-coding-tw/snapdom)What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00053 | $0.01894 |
| Opus 5 | $0.00026 | $0.00947 |
| Sonnet 5 | $0.00011 | $0.00379 |
| Haiku 4.5 | $0.00005 | $0.00189 |
Grade A, and why
snapdom scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
98% identical to snapdom — 1 line differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 275 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
npm install @zumer/snapdom
# or
yarn add @zumer/snapdom
CDN (ES Module)
<script type="module">
import { snapdom } from "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
</script>
CDN (UMD)
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.umd.js"></script>
Quick Start Examples
Basic Reusable Capture
// 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);
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 275 lines · 53 tokens per session scan A 0906facbc680
snapdom is a skill published in the GitHub repository godmakereth/vibe-coding-tw (47 stars, last pushed 8mo ago), licensed MIT. It adds 53 tokens to every session and 1,894 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. It is 98% identical to snapdom, differing in 1 line, and is treated as a copy.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
auto-perf-optimize
Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.
chat-perf
Run chat perf benchmarks and memory leak checks against the local dev build or any published VS Code version. Use when investigating chat rendering regressions, validating perf-sensitive changes to chat UI, or checking for memory leaks in the chat response pipeline.
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…