skills.rest
ShawhinT
ShawhinTCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

infographic-builder

Render written briefs into retina PNG infographics via HTML/CSS/SVG.

40|5|Updated Mar 9, 2026
Search Tags:#infographic#headless chrome#logo assets#linkedin graphics#html to png#brand system tokens
One-click install
npx skills add https://github.com/ShawhinT/non-coding-skills --skill infographic-builder-shawhint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-builder
Source: https://github.com/ShawhinT/non-coding-skills/tree/main/infographic-builder
Command: npx skills add https://github.com/ShawhinT/non-coding-skills --skill infographic-builder-shawhint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

It removes the manual, time-consuming work of designing clear social graphics by generating a consistent infographic layout and rendering it into a crisp PNG.

Core Features & Use Cases

  • Single-idea infographic creation: Produce one message per image for LinkedIn and other social feeds (comparisons, vertical lists, and centered concepts).
  • HTML-to-PNG rendering pipeline: Author an infographic as HTML/CSS and render it to a 2x retina PNG using a bundled headless-Chrome script.
  • Brand-aware styling without template misuse: Apply brand tokens from aba-brand-system (colors/type/logo treatment) while keeping the composition infographic-native rather than website-like.
  • Bundled logo asset library: Reuse prepackaged logo assets or fetch missing ones using the skill’s approved sources, keeping project assets portable.

Quick Start

Ask the skill to make an infographic for your post idea, confirm the intended aspect ratio and any brand context, then render the resulting HTML into a 2x PNG.

Frequently Asked Questions about infographic-builder

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

FAQPage Schema
How do I generate LinkedIn infographics from HTML?▼

You can generate LinkedIn infographics by authoring HTML, CSS, and SVG compositions and rendering them to retina PNGs using a bundled headless-Chrome script. This pipeline transforms a written brief into a crisp 2x social graphic without manual design work.

What is the best way to convert HTML to PNG for social media graphics?▼

The best way to convert HTML to PNG for social media graphics is using a headless-Chrome rendering script that outputs at 2x resolution. This approach ensures single-image infographic layouts remain sharp and portable for social feeds.

Can I use brand system tokens to style social media infographics?▼

Yes, you can apply brand system tokens for colors, typography, and logo treatment to style social media infographics. This ensures brand-aware styling while keeping the composition infographic-native rather than looking like a website layout.

Does this HTML to PNG rendering pipeline support two-panel comparison layouts?▼

Yes, the HTML to PNG rendering pipeline supports two-panel comparisons, vertical lists, and single-centerpiece concept stills. It is designed to produce single-idea infographic graphics optimized for LinkedIn and similar social contexts.

Do I need headless Chrome to render HTML infographics into images?▼

Yes, you need headless Chrome to render HTML infographics into images. The Skill relies on a bundled rendering script that executes headless-Chrome at 2x scale to generate the final retina PNG output.

How do I reuse logo assets when building social graphics?▼

You can reuse prepackaged logo assets directly from the bundled library or fetch missing ones using approved sources. This keeps project assets portable and ensures consistent logo treatment across rendered infographic compositions.

Related Skills

Explore More Design & Creative Skills→
lucasloutayflucasloutayf

find-skills

Discover and install modular agent skills using the Skills CLI.

Community
Intermediate
Wike-CHIWike-CHI
2

holo-social-infographic

Generate social-media infographics from NAS-stored technical documents.

Community
Advanced
AntonySilverhandAntonySilverhand

slide-theme

Apply BPDU branding to an existing HTML slide deck via CSS tokens and brand bar edits.

Community
Intermediate
VYRE-StudiosVYRE-Studios

canvas-design

Generate HTML/CSS visual designs and render them to PNG or PDF.

Official
Intermediate