html-shot

# html-shot — a design in, the image assets out Render an HTML file, a URL, or an SVG into a **pixel-perfect** static image. The engine is **Playwright** (mature headless Chromium): any CSS renders faithfully and **CJK text and emoji come from system fonts with nothing to bundle**. A local file is served over a throwaway `127.0.0.1` server, so Chromium resolves every reference itself — relative paths, site-absolute `/xxx`, `@import`, `srcset`, fonts named inside a stylesheet — and a card renders correctly with the project's dev server down. The browser does the rendering; this skill takes care of everything around it, so you never have to leave CSS: **what to shoot** (the whole body, one element, the full page), **how sharp** (supersampling, `--dpr`), and **what ships** (format, palette size, and for an icon set, the per-platform files). Two entry points, one engine: | | | |---|---| | `render.mjs` | one design → **one image** (og card, badge, element, page, SVG) | | `icons.mjs` | one design → **a favicon or app-icon set** (`.ico`/`.icns`/apple-touch/PWA) | ## When to use - Generating or refreshing an **og:image / social preview card** (1200×630) for a site or repo. - Turning a **design written in HTML/CSS** — badge, banner, diagram, certificate — into a PNG. - **Screenshotting a page or one element** of it, from a URL or a local file. - **Rasterising an SVG** — a logo or app-icon master at an exact size, with transparency — when the mark leans on filters that only a b...