skills.rest
Amna-exe
Amna-exeCOMMUNITY
Explore all skills by this author →
GitHub

infographic-builder

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

Updated May 17, 2026
Search Tags:#timeline#data visualization#react#chart#image export#infographic#antv
One-click install
npx skills add https://github.com/Amna-exe/EventFlow_App --skill infographic-builder-amna-exe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-builder
Source: https://github.com/Amna-exe/EventFlow_App/tree/main/Final-MAD-project-main-4zipzipzipzipzip-1-ite1zipzip/.local/secondary_skills/infographic-builder
Command: npx skills add https://github.com/Amna-exe/EventFlow_App --skill infographic-builder-amna-exe

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 visuals 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 workflow: Choose from 60+ templates across categories like sequence, comparison, hierarchy, chart, list, and relation, then render them as 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 sales figures 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 showing our five-step onboarding process as a vertical timeline with icons for each step.

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.

What infographic templates does AntV Infographic support?▼

AntV Infographic provides over 60 templates across categories: sequence (steps, timelines, funnels, pyramids), compare (binary, SWOT, quadrant), hierarchy (trees, mind maps, org charts), list (grids, rows, zigzag), 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 and categorization first, or when you need a fully bespoke design with pixel-level control that no single AntV template covers.

Can I customize infographic colors, themes, and fonts?▼

Yes. The AntV DSL supports custom color palettes, dark themes, hand-drawn rough styling, pattern and gradient fills, and custom fonts through the theme block. React fallback components allow full control via Tailwind classes and inline SVG.

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

Blank screenshots usually mean the Vite dev server or CDN script has not finished loading; wait a few seconds after restart 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 an infographic for my data?▼

Do not use this approach for interactive dashboards, multi-slide presentations, or simple charts embedded in an app. Infographics are static one-page visuals; interactive exploration and slide decks require different tools.

Related Skills

Explore More Design & Creative Skills→
MichaelYang-lyxMichaelYang-lyx
110

numeric-format-normalization

Normalize numeric columns in Excel workbooks and verify totals against a Summary sheet.

Community
Intermediate
Marky-TeamMarky-Team
3

schedule-posts

Schedule and publish social media posts with captions and media via the Marky API.

Official
Advanced
liujiayi3703liujiayi3703

sci-figure

Convert Excel or CSV data into publication-grade scientific figures with statistical annotations.

Community
Advanced
gracefullightgracefullight
4

plotly

Create interactive Python charts with hover, zoom, and export to HTML or static images.

Community
Intermediate