html-to-image_skill

Overview

This skill converts HTML files or inline HTML content into PNG images by rendering them in an agent-connected browser and taking a screenshot. It is designed to turn generated HTML (cards, infographics, visualizations) into publishable images quickly. The tool is script-driven and works with a Chromium Debugging Protocol (CDP) connection.

How this skill works

The script loads given HTML (from a file or a content string) into an agent-browser instance connected via CDP, sets a viewport size, and captures a screenshot. You can request a viewport-limited capture or a full-page screenshot. The output is a PNG file written to the specified path.

When to use it

• Generate shareable images from programmatically produced HTML
• Create social media cards or blog visuals from HTML templates
• Capture data visualizations rendered in-browser for reports
• Batch-convert HTML snippets into images for publishing workflows

Best practices

• Provide complete HTML including styles and fonts to ensure consistent rendering
• Prefer full-page screenshots for long content; use viewport height for fixed-size artboards
• Test viewport width and height locally to match target platform aspect ratios
• Ensure agent-browser/CDP is running and accessible on the specified port before invoking the script
• Use semantic, self-contained HTML so screenshots do not depend on external network resources

Example use cases

• Turn Claude-generated HTML templates into PNGs for social posts
• Snapshot interactive charts or dashboards into static images for documents
• Produce thumbnails or preview images for web content pipelines
• Create sized images for mobile feeds by setting a mobile-width viewport
• Integrate into a publish workflow: generate HTML → capture PNG → upload to a platform