html-to-image_skill

This skill renders HTML content into images by driving agent-browser and capturing screenshots for ready-to-publish visuals.

Python

1.1k

GitHub Stars

2

Bundled Files

2 months ago

Catalog Refreshed

3 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill inclusionai/aworld --skill html-to-image

html_to_image.sh4.2 KB
SKILL.md1.9 KB

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

FAQ

You can provide an HTML file path or pass HTML content as a string; one of these is required.

How do I control output dimensions?

Use -w to set viewport width and -e for viewport height. Omit -e or use --full to capture the full page height.

What if the browser is not reachable?

Confirm agent-browser is running and CDP is listening on the port (default 9222). Adjust -p if using a different port.