skills.rest
capaas2
capaas2COMMUNITY
Explore all skills by this author →
GitHub

image-creator

Renders self-contained HTML and CSS pages to PNG screenshots via Playwright with viewport sizing and verification.

Updated Apr 4, 2026
Search Tags:#playwright#screenshot#viewport#carousel#social graphics#html to image
One-click install
npx skills add https://github.com/capaas2/Site-teste --skill image-creator-capaas2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-creator
Source: https://github.com/capaas2/Site-teste/tree/main/skills/image-creator
Command: npx skills add https://github.com/capaas2/Site-teste --skill image-creator-capaas2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the need to create polished, production-ready visuals directly from HTML and CSS without manual screenshot workflows, making it easy to generate social graphics, infographics, and other template-driven imagery.

Core Features & Use Cases

  • HTML-to-Image Rendering: Converts complete, self-contained HTML pages into PNG screenshots with Playwright.
  • Viewport Control: Supports platform-specific sizes for Instagram, LinkedIn, Facebook, YouTube, and custom layouts.
  • Batch Production: Handles multi-slide outputs by rendering a sequence of HTML files into a consistent image set.
  • Use Case: A designer can build a LinkedIn post template in HTML, render it at the correct viewport, and verify the final image before publishing.

Quick Start

Ask the skill to render your self-contained HTML design into a PNG at the target social media size.

Frequently Asked Questions about image-creator

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

FAQPage Schema
How do I convert HTML to an image for social graphics?▼

To convert HTML to an image, the Skill renders self-contained HTML and CSS into pixel-perfect PNG screenshots using Playwright, making it ideal for social graphics and infographics.

Can I render HTML screenshots at specific viewport sizes for Instagram or LinkedIn?▼

Yes, you can render HTML screenshots at specific viewport sizes for Instagram, LinkedIn, Facebook, and YouTube, ensuring your visual output matches platform-specific dimensions precisely.

What is the best way to generate a batch of carousel images from HTML?▼

The best way to generate a batch of carousel images is by rendering a sequence of HTML files into a consistent image set, handling multi-slide outputs through deterministic browser screenshots.

Does HTML to image rendering require Playwright and local HTTP serving?▼

Yes, HTML to image rendering requires Playwright for browser rendering, local HTTP serving, and screenshot verification to ensure deterministic, production-ready visual output.

Why does my HTML to image screenshot look misaligned?▼

Your HTML to image screenshot may look misaligned if the viewport sizing is incorrect for your target platform; applying platform-specific viewport dimensions ensures pixel-perfect rendering.

Related Skills

Explore More Design & Creative Skills→
8GG-Git8GG-Git

interactive-dashboard-builder

Generate self-contained HTML dashboards with Chart.js and dropdown filters.

Community
Intermediate
bear2ubear2u
905

card-news-generator-v2

Generate 5–7 card Instagram-style news series with PNG output.

Community
Intermediate
black-ytblack-yt
7

browser-render-visualization

Render web pages in a real browser to diagnose blank screens and runtime errors.

Community
Intermediate
Maccio-huangMaccio-huang

html-ppt-zhangzara-block-frame

Create a neobrutalist presentation template using HTML and CSS.

Community
Intermediate