process-infographic

# Process Infographic Generator Generate step-by-step process infographics as PNG by writing HTML+CSS and rendering through Chrome headless. Each infographic is a self-contained HTML file with numbered steps, titles, and descriptions arranged in a vertical timeline, horizontal phases, or grid layout. The output is a static PNG suitable for blog posts, documentation, and presentations. No external images, no JavaScript, no server-side rendering. ## Overview Process infographics turn multi-step procedures into scannable visual flows. Use this skill when the content has a clear sequence: deployment pipelines, onboarding steps, request lifecycles, data transformation stages, or any numbered process. **What this skill produces:** - A PNG image at 1200x630 to 1200x1500px (height scales with step count) - Numbered steps with titles and one-line descriptions - Connected by a timeline thread or grouped into phases - Light or dark theme matching the content tone **When to use this skill:** - Blog posts explain a multi-step process - Documentation needs a visual procedure flow - A series of steps needs to be presented as a single image - A deployment pipeline, CI/CD flow, or lifecycle diagram is needed ## Detailed Workflow ### Step 1: Identify the Steps Extract process steps from the source content. Each step needs: - A short title (2-5 words) - A one-line description (under 15 words) - An optional phase or group label If the source content has headings or numbered items, use ...