html-shotlisted

# html-shot — a design in, the image assets out Render an HTML file, a URL, or an SVG into a **pixel-perfect** static image with **Playwright** (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. You never have to leave CSS. The skill handles **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 browser renders faithfully. - Anything where the copy is **CJK, emoji, or mixed-s