infographic-builder

Generate static infographics from data using AntV Infographic DSL templates or React components.

Updated Apr 20, 2026
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill infographic-builder-amiremad11
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: infographic-builder
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/secondary_skills/infographic-builder
Command: npx skills add https://github.com/AmirEmad11/instabot --skill infographic-builder-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @antv/infographic, lucide-react, and includes references (resource) components.

What problem does it solve? Turning raw data, processes, comparisons, or timelines into polished one-page visual summaries normally requires design tools and manual layout work. This Skill automates infographic creation by mapping content to pre-built templates or custom React components and exporting the result as a static image. ## Core Features & Use Cases - AntV Infographic DSL: Choose from 60+ pre-built templates covering lists, sequences, timelines, comparisons (SWOT, quadrant), hierarchies, charts, word clouds, and relationship diagrams, then render them as HTML and export as JPG. - React Component Fallback: Build bespoke multi-section infographics with inline SVG charts and lucide-react icons when content combines multiple visualization types or raw data needs analysis first. - Use Case: A user provides quarterly survey results and asks for a visual summary. The Skill selects a chart template, writes the DSL, renders it in an HTML file, screenshots it, and delivers a ready-to-share JPG infographic. ## Quick Start Create an infographic visualizing the project timeline data I just provided and export it as an image.

Frequently Asked Questions about infographic-builder

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

FAQPage Schema
How do I create an infographic from my data?

Provide your content or data and describe the visual you want. The Skill selects an AntV Infographic template matching your content type, writes the DSL syntax, renders it as HTML, and exports a JPG image you can share.

What infographic templates does AntV Infographic support?

AntV Infographic provides over 60 templates across categories: list, sequence, timeline, roadmap, comparison (binary, SWOT, quadrant), hierarchy (tree, mindmap, structure), charts (bar, pie, line, wordcloud), and relation flow diagrams.

When should I use the React fallback instead of AntV templates?

Use the React fallback when content combines multiple visualization types, when raw data like CSV or transactions needs analysis before visualization, or when you need a fully bespoke design. Single-type content fits AntV templates better.

Can this skill create interactive dashboards or presentations?

No, it produces static image infographics only. For interactive dashboards use a data-visualization skill, and for multi-slide presentations use a slides skill. The output is a JPG image plus an HTML file viewable in a browser.

Why is my exported infographic image blank or cut off?

Blank screenshots usually mean the Vite dev server or CDN script is still loading; wait a few seconds and retake. Cut-off content means the viewport height is too short; increase it by 100-200px and screenshot again.