How do I handle pages with cookie banners or JavaScript?

The skill includes parameters like 'block_consent_banners' to hide popups and 'ms_delay' to wait for JavaScript to finish rendering before capturing the image.

What can I do with the HTML CSS to Image skill?

You can convert HTML/CSS code into images, take screenshots of URLs, generate high-resolution social media cards, and capture specific web elements using CSS selectors.

Can I generate high-resolution images for retina displays?

Yes, by using the 'device_scale' parameter, you can generate 2x or 3x resolution images suitable for high-density displays.

Does it support custom fonts and CSS?

Yes, the skill supports full CSS styling and allows you to integrate Google Fonts to create beautifully typographed images.

Are the generated image URLs permanent?

Yes, the HTMLCSStoImage API provides permanent URLs for generated images, which are served globally via the Cloudflare CDN.

HTML CSS to Image

Name: HTML CSS to Image
Author: vm0-ai

byvm0-ai

•

Design Tools

Generates high-quality images from HTML/CSS code or captures screenshots of web pages using the HTMLCSStoImage API.

The HTML CSS to Image skill enables Claude to programmatically convert HTML and CSS snippets into production-ready images or capture high-resolution screenshots of live websites. It supports advanced features such as Google Fonts integration, custom viewport dimensions for social media (OG images), high-density retina scaling, and CSS selectors to crop specific page elements. This skill is ideal for developers and designers who need to automate the creation of social cards, certificates, thumbnails, or visual documentation directly within their coding workflow.

Key Features

01Support for Google Fonts and custom styling for dynamic image generation

0218 GitHub stars

03Capture full-page or element-specific web screenshots via public URLs

04Adjustable viewport dimensions and device scaling for retina-quality output

05Built-in delay handling for JavaScript-heavy pages and automated cookie banner blocking

06Convert HTML and CSS code directly into PNG or JPG images

Use Cases

01Creating dynamic certificates, badges, or thumbnails from code templates

02Automating the generation of Open Graph (OG) social media sharing images

03Capturing visual snapshots of web components for documentation or UI reviews

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vm0-ai/vm0-skills htmlcsstoimage

For use in Claude.ai and ChatGPT

Download Skill