Image Creator

When to use

Use the Visual Renderer when you need to generate production-ready images from HTML/CSS. This skill uses Playwright to render complete, self-contained HTML files in a headless browser and capture pixel-perfect screenshots. It is the primary engine for creating social media graphics, carousel slides, infographics, and any other visual content defined by HTML templates.

Instructions

Core Workflow

1. Generate HTML -- Write a complete, self-contained HTML file with inline CSS. The HTML IS the design -- all styling, layout, fonts, colors, and content must be embedded.

2. Save HTML -- Write the HTML file to the squad's output folder (e.g., output/slides/slide-01.html)