image-creator

name	image-creator
description	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.
description_pt-BR	Renderiza HTML/CSS em imagens prontas para produção via Playwright. Aceita conteúdo HTML completo, abre em um navegador headless na viewport especificada e captura uma screenshot pixel-perfect. Motor genérico -- qualquer formato visual é definido pelo template HTML.
description_es	Renderiza HTML/CSS en imágenes listas para producción vía Playwright. Acepta contenido HTML completo, lo abre en un navegador headless en el viewport especificado y captura una screenshot pixel-perfect. Motor genérico -- cualquier formato visual se define por el template HTML.
type	mcp
version	1.0.0
mcp	{"server_name":"playwright"}
categories	["design","automation","images"]

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)

3. 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).

4. Render -- Use Playwright to:

   • browser_navigate to http://localhost:8765/slide-01.html (filename only, not full path)
   • browser_resize to target viewport dimensions
   • browser_take_screenshot to save as PNG

5. Verify -- Read the screenshot to confirm quality. Re-render if needed.

6. Stop server -- After all slides are rendered, stop the HTTP server:

   pkill -f "http.server 8765" 2>/dev/null || true
   

Viewport Presets (width x height)

Use these standard dimensions:

• Instagram Post: 1080 x 1080
• Instagram Carousel: 1080 x 1440
• Instagram Story/Reel: 1080 x 1920
• Facebook Post: 1200 x 630
• Twitter/X Post: 1200 x 675