skills.rest
dheejay282002
dheejay282002COMMUNITY
Explore all skills by this author →
WebsiteGitHub

infographic-builder

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

Updated May 25, 2026
Search Tags:#timeline#data visualization#react#chart#image export#infographic#antv
One-click install
npx skills add https://github.com/dheejay282002/final_project --skill infographic-builder-dheejay282002
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-builder
Source: https://github.com/dheejay282002/final_project/tree/main/.local/secondary_skills/infographic-builder
Command: npx skills add https://github.com/dheejay282002/final_project --skill infographic-builder-dheejay282002

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: Choose from 60+ templates across categories like sequence, timeline, comparison, SWOT, hierarchy, charts, and word clouds, 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 maps it to an AntV Infographic template (list, sequence, comparison, hierarchy, chart, or relation), writes the DSL, renders it as HTML, and exports a JPG image.

What infographic templates does AntV Infographic support?▼

AntV Infographic provides 60+ templates across categories: chart (bar, pie, line, wordcloud), sequence (steps, timeline, funnel, pyramid, roadmap), compare (binary, SWOT, quadrant), hierarchy (tree, mindmap, structure), list (grid, row, zigzag), and relation (dagre flow).

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. Single-type content fits AntV templates better.

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

Yes. The AntV DSL supports custom color palettes, dark themes, hand-drawn style via stylize rough, pattern fills, gradients, and custom fonts through the theme block. React components allow full pixel-level control with Tailwind.

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 and retake. Cut-off content means the viewport height is too small; start at 1500-1600px and increase as needed.

When should I not use this infographic skill?▼

Do not use it for interactive dashboards (use a data-visualization skill), multi-slide presentations (use a slides skill), or simple charts embedded in an app (use a charting library directly). It produces static one-page visuals only.

Related Skills

Explore More Design & Creative Skills→
47network47network
5

xlsx-generator

Generate Excel-compatible XLSX workbooks from structured data and CSV exports.

Community
Intermediate
rakibulismrakibulism
2

seo-image-gen

Generate SEO-focused images with preset aspect ratios and WebP conversion.

Community
Advanced
picskypicsky

data-handler

Clean and analyze CSV, XLSX, or JSON tabular data into charts and reports.

Community
Intermediate
gracefullightgracefullight

plotly

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

Community
Intermediate