Vibe Coding is a Chinese-language guide to developing software through structured collaboration with AI, covering planning, architecture, implementation, debugging, and iteration. It is intended for developers who want to turn ideas into software while keeping AI-assisted work organized. The catalogue contains skills and an instruction related to this workflow.
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/2025emma/vibe-coding-cn/snapdomnpx skills add 2025Emma/vibe-coding-cn --skill snapdomgit clone --depth 1 https://github.com/2025Emma/vibe-coding-cnWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/2025emma/vibe-coding-cn/snapdom)<a href="https://agentmods.dev/skills/2025emma/vibe-coding-cn/snapdom"><img src="https://agentmods.dev/badge/skills/2025emma/vibe-coding-cn/snapdom.svg" alt="Measured on agentmods" height="20"></a>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.1 | $0.00000 | $0.01899 |
| Opus 5 | $0.00000 | $0.00949 |
| Sonnet 5 | $0.00000 | $0.00380 |
| Haiku 4.5 | $0.00000 | $0.00190 |
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 6d 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- snapdom — 98% identical, 1 lines differ
How it starts
The opening of the file, as written. The whole thing — 276 lines — stays where its author put it; the contents beside it link to each section on GitHub.
TRANSLATED CONTENT:
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.
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>
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.
- 6d ago First seen · 276 lines · 0 tokens per session scan A bd6c74c1526e
snapdom is a skill published in the GitHub repository 2025Emma/vibe-coding-cn (22,942 stars, last pushed 8mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,899 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
feature-demo-recording
Record a demo video of a web feature from a real browser. Two modes -- a NARRATED film where measured voiceover drives the timeline (designed slides, subtitles, punch-in camera, rendered from an HTML timeline), and a SILENT evidence clip for a PR or a QA pass. Use when the user asks to record a video, demo, or screen…
browser-video-recording
Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography, zoom-follow framing, ffprobe/thumbnail verification, and optional native recording compatibility checks. Use when the user asks to…
html-to-video-pipeline
Reliable HTML-to-MP4 rendering via headless browser recording (Playwright/Puppeteer) + ffmpeg — the ordering, gotchas, and verification steps you MUST get right or the output silently rots. Trigger whenever the user is building or debugging any pipeline that turns an HTML/CSS/JS page (single-file, multi-composition…
record-video
Record and upload a short browser interaction video artifact.
playwright-recording
Record browser interactions as video using Playwright. Use for capturing demo videos, app walkthroughs, and UI flows for Remotion videos. Triggers include recording a demo, capturing browser video, screen recording a website, or creating walkthrough footage.
playwright-recording
Record browser interactions as video using Playwright. Use for capturing demo videos, app walkthroughs, and UI flows for Remotion videos. Triggers include recording a demo, capturing browser video, screen recording a website, or creating walkthrough footage.