Renders HTML/CSS into production-ready images via Playwright. Accepts complete HTML content, opens it in a headless browser at the specified viewport, and captures a pixel-perfect screenshot. Generic engine -- any visual format is defined by the HTML template.
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.
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.
Save HTML -- Write the HTML file to the squad's output folder (e.g., output/slides/slide-01.html)
Start HTTP server -- Before rendering, start a local HTTP server in the squad's output folder:
python -m http.server 8765 --directory "OUTPUT_DIR" &
for i in $(seq 1 30); do curl -s http://localhost:8765 > /dev/null 2>&1 && break || sleep 0.1; done
Replace OUTPUT_DIR with the actual absolute path to the output folder (quote paths that contain spaces).
Render -- Use Playwright to:
browser_navigate to http://localhost:8765/slide-01.html (filename only, not full path)browser_resize to target viewport dimensionsbrowser_take_screenshot to save as PNGVerify -- Read the screenshot to confirm quality. Re-render if needed.
Stop server -- After all slides are rendered, stop the HTTP server:
pkill -f "http.server 8765" 2>/dev/null || true
Use these standard dimensions:
The HTML you generate MUST:
@importmargin: 0; padding: 0; overflow: hidden on bodyExample minimal structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 1080px; height: 1440px; overflow: hidden; }
/* ... your design ... */
</style>
</head>
<body>
<!-- Your content -->
</body>
</html>
For multi-image outputs like carousels:
border-radius + overflowText must be legible in the target platform's smallest viewing context (mobile feed for social platforms). Text inside linked or embedded image files (JPG, PNG, base64 assets) is decorative and exempt. All HTML text nodes and inline SVG text are subject to these rules.
These are HARD minimums -- never go below them for readable text.
| Text Role | Instagram Post/Carousel | Instagram Story/Reel | LinkedIn/Facebook | YouTube Thumb |
|---|---|---|---|---|
| Hero / Display | 58px | 56px | 40px | 60px |
| Heading | 43px | 42px | 32px | 36px |
| Body / Bullets | 34px | 32px | 24px | 36px |
| Caption / Footer | 24px | 20px | 20px | 32px |
Universal rule: No text element meant to be read may use a font size smaller than 20px, on any platform.
Before calling browser_take_screenshot, scan your HTML and confirm: