skills.rest
SaberAloui
SaberAlouiCOMMUNITY
Explore all skills by this author →
GitHub

infographic-builder

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

Updated Jul 10, 2026
Search Tags:#templates#data visualization#react#image export#infographic#visual summary#antv
One-click install
npx skills add https://github.com/SaberAloui/agri-hub --skill infographic-builder-saberaloui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-builder
Source: https://github.com/SaberAloui/agri-hub/tree/main/.local/secondary_skills/infographic-builder
Command: npx skills add https://github.com/SaberAloui/agri-hub --skill infographic-builder-saberaloui

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 a polished one-page visual usually 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 workflow: Choose from 60+ templates across categories like sequence, comparison, hierarchy, list, chart, and relation, then render them to HTML and export as JPG. - React fallback workflow: Build bespoke multi-section infographics (summary stats, charts, tables, callouts) as static React components when no single template fits 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 HTML, screenshots it, and delivers a ready-to-share infographic image. ## 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, renders it as HTML, and exports a JPG image you can share.

What infographic types does AntV Infographic support?▼

AntV Infographic offers 60+ templates across categories: sequence (steps, timelines, funnels, pyramids), compare (binary, SWOT, quadrant), hierarchy (trees, mind maps, org charts), list, chart (bar, pie, line, word cloud), and relation flow diagrams.

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

Use the React fallback when the infographic combines multiple visualization types, when raw data like CSV or transactions needs analysis before visualization, or when you need a fully bespoke design that no single AntV template covers.

Can I customize infographic colors and themes?▼

Yes. The AntV DSL supports custom color palettes, dark themes, hand-drawn rough styling, pattern fills, gradients, and custom fonts through the theme block. React components allow full control over colors and typography.

Why is my exported infographic image blank or cut off?▼

Blank screenshots usually mean the CDN script or dev server 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.

When should I not use this infographic skill?▼

Do not use it for interactive dashboards, multi-slide presentations, or simple charts embedded in an app. Those cases are better served by dashboard tools, slide generators, or charting libraries directly.

Related Skills

Explore More Design & Creative Skills→
nicepkgnicepkg
276

executive-dashboard-generator

Transform raw data from CSVs, spreadsheets, databases, and APIs into executive reports.

Official
Advanced
profmikegreeneprofmikegreene
1

media-asset-production

Produce and assemble multimedia assets from pilot findings into visuals and presentations.

Community
Intermediate
siddsacharsiddsachar
1.4k

data_analyst

Analyze CSV and tabular datasets to generate statistical summaries, narratives, and charts.

Community
Advanced
CompSci-SquadCompSci-Squad

plotly

Create interactive Plotly visualizations with Python for dashboards and presentations.

Official
Intermediate