skills.rest
shiker1996
shiker1996COMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-pages-to-images

Convert HTML elements matching a CSS selector into PNG screenshots using Puppeteer.

5|1|Updated Jul 31, 2026
Search Tags:#html#png#puppeteer#screenshot#chromium#image conversion#social cards
One-click install
npx skills add https://github.com/shiker1996/wechat-editroom --skill html-pages-to-images-shiker1996
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-pages-to-images
Source: https://github.com/shiker1996/wechat-editroom/tree/main/skills/html-pages-to-images
Command: npx skills add https://github.com/shiker1996/wechat-editroom --skill html-pages-to-images-shiker1996

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer.

What problem does it solve? Turning designed HTML pages, cards, or chart blocks into shareable images usually requires manual screenshots or external services. This Skill batch-screenshots every element matching a CSS selector in a local HTML file and saves each one as a separate PNG, ready for social media cards or WeChat article modules. ## Core Features & Use Cases - Batch Element Screenshots: Renders a local HTML file in headless Chromium via Puppeteer and captures every element matching a given CSS selector (e.g., .page) as an individual PNG file. - Viewport and Density Control: Configurable page width, height, and deviceScaleFactor (default 2-3) to produce high-resolution images sized for mobile feeds like Xiaohongshu (375x667). - Render Readiness Gates: Waits for fonts, network idle, and optional global flags (e.g., ECharts initialization) before capturing, and fails rather than emitting blank images when nothing matches the selector. - Use Case: After generating a multi-page HTML carousel for a Xiaohongshu post, run this Skill to produce one numbered PNG per page in a task-specific output directory. ## Quick Start Ask the agent to screenshot every element matching the .page selector in your local HTML file into a specified output folder using this Skill.

Frequently Asked Questions about html-pages-to-images

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I screenshot HTML elements with Puppeteer?▼

Load the HTML into a Puppeteer page with setContent, query elements with page.$$ using your CSS selector, then call element.screenshot for each match. This Skill wraps that flow in a single CLI command with htmlFile, outputDir, and selector parameters.

How to convert HTML pages to PNG images in Node.js?▼

Run node index.js with --htmlFile, --outputDir, and --selector arguments. Each element matching the selector is saved as a numbered PNG such as page-01.png in the output directory.

Can I use system Chrome instead of bundled Chromium with Puppeteer?▼

Yes. Set the PUPPETEER_EXECUTABLE_PATH environment variable, or on Windows the script auto-detects Chrome and Edge in standard install locations and uses them as the browser executable.

Why are my Puppeteer screenshots blank or missing fonts?▼

Blank captures happen when screenshots are taken before fonts, charts, or remote resources finish loading. The script waits for networkidle0, document.fonts.ready, and an optional global readiness flag, and fails on timeout instead of emitting empty images.

Is it safe to render untrusted HTML files with this tool?▼

No. Rendered HTML can execute scripts and load remote resources, so only local files from the current task or trusted templates should be processed. The Skill also never uploads images; publishing requires a separate authorized upload step.

Related Skills

Explore More Content & Communication Skills→
nexu-ionexu-io
8.2k

card-xiaohongshu

Generate Xiaohongshu-style knowledge card carousels with configurable palettes and watermarking.

Official
Intermediate
solar-lunasolar-luna
66

xiaohongshu-publisher

Convert WeChat HTML content into Xiaohongshu posts and publish via MCP.

Community
Advanced
modu-aimodu-ai
267

data-visualizer

Convert datasets into diagrams or interactive dashboards using Mermaid, Recharts, Chart.js, Tremor, or ECharts.

Official
Intermediate
maximoseomaximoseo

Screenshots

Capture web pages or DOM elements as PNG images via html2canvas.

Community
Intermediate