Convert text content into visually compelling infographics using AntV Infographic syntax.
Works with
Supports 50+ templates across eight categories: sequences, lists, hierarchies, comparisons, charts, relations, and more
Uses a custom DSL with indentation-based syntax for describing structure, data, and themes; designed for AI streaming and rendering
Includes theme customization (palettes, fonts, stylization effects like hand-drawn and gradient fills) and icon support
Generates responsive HT
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versioninfographic-creatorExecute the skills CLI command in your project's root directory to begin installation:
Fetches infographic-creator from antvis/chart-visualization-skills and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate infographic-creator. Access via /infographic-creator in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Create detailed user stories, acceptance criteria, and feature specs
Example
Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios
Reduce spec writing time by 50%, ensure comprehensive coverage
Research competitors, compare features, identify gaps
Example
Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities
Complete competitive research in 2 hours instead of 2 days
Evaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs
Example
Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale
2
total installs
2
this week
50
GitHub stars
0
upvotes
Run in your terminal
2
installs
2
this week
50
stars
Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.
Infographic = Information Structure + Visual Expression
This task uses AntV Infographic to create visual infographics.
Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.
AntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for AI streaming output and infographic rendering. It mainly contains the following information:
For example:
infographic list-row-horizontal-icon-arrow
data
title Title
desc Description
lists
- label Label
value 12.5
desc Explanation
icon document text
theme
palette #3b82f6 #8b5cf6 #f97316
The first line must be infographic <template-name>, template selected from the list below (see "Available Templates" section).
Use data / theme blocks, with two-space indentation within blocks.
Key-value pairs use "key space value"; arrays use - as entry prefix.
icon uses icon keywords (e.g., star fill).
data should contain title/desc + template-specific main data field (not necessarily items).
Main data field selection (use only one, avoid mixing):
list-* → listssequence-* → sequences (optional order asc|desc)compare-* → compares (supports children for grouped comparisons), can contain multiple comparison itemshierarchy-structure → items (each item corresponds to an independent hierarchy, each level can contain sub-items, can be nested up to 3 levels)hierarchy-* → single root (tree structure, nested through children);relation-* → nodes + relations; simple relation diagrams can omit nodes, using arrow syntax in relationschart-* → values (numeric statistics, optional category)items as fallback when uncertaincompare-binary-* / compare-hierarchy-left-right-* binary templates: must have two root nodes, all comparison items hang under these two root nodes' children
hierarchy-*: use single root, nested through children (do not repeat root)
theme is used to customize themes (palette, font, etc.)
For example: dark theme + custom color scheme
infographic list-row-horizontal-icon-arrow
theme dark
palette
- #61DDAA
- #F6BD16
- #F08BB4
Use theme.base.text.font-family to specify font, such as handwriting style 851tegakizatsu
Use theme.stylize to select built-in styles and pass parameters
Common styles:
rough: hand-drawn effectpattern: pattern filllinear-gradient / radial-gradient: linear/radial gradientFor example: hand-drawn style (rough)
infographic list-row-horizontal-icon-arrow
theme
stylize rough
base
text
font-family 851tegakizatsu
Do not output JSON, Markdown, or explanatory text
Data syntax examples by template category (use corresponding fields, avoid adding items simultaneously):
list-* templatesinfographic list-grid-badge-card
data
title Feature List
lists
- label Fast
icon flash fast
- label Secure
icon secure shield check
sequence-* templatesinfographic sequence-steps-simple
data
sequences
- label Step 1
- label Step 2
- label Step 3
order asc
hierarchy-* templatesinfographic hierarchy-structure
data
root
label Company
children
- label Dept A
- label Dept B
compare-* templatesinfographic compare-swot
data
compares
- label Strengths
children
- label Strong brand
- label Loyal users
- label Weaknesses
children
- label High cost
- label Slow release
Quadrant diagram
infographic compare-quadrant-quarter-simple-card
data
compares
- label High Impact & Low Effort
- label High Impact & High Effort
- label Low Impact & Low Effort
- label Low Impact & High Effort
chart-* templatesinfographic chart-column-simple
data
values
- label Visits
value 1280
- label Conversion
value 12.4
relation-* templatesEdge label syntax: A -label-> B or A -->|label| B
infographic relation-dagre-flow-tb-simple-circle-node
data
nodes
- id A
label Node A
- id B
label Node B
relations
A - approves -> B
A -->|blocks| B
items exampleinfographic list-row-horizontal-icon-arrow
data
items
- label Item A
desc Description
icon sun
- label Item B
desc Description
icon moon
Template Selection Recommendations:
sequence-*
sequence-timeline-*sequence-stairs-*sequence-roadmap-vertical-*sequence-zigzag-*sequence-circular-simplesequence-color-snake-steps-*sequence-pyramid-simplelist-row-* or list-column-*compare-binary-*compare-swothierarchy-tree-*chart-*compare-quadrant-*list-grid-*relation-*chart-wordcloudhierarchy-mindmap-*Creating an Internet technology evolution infographic
infographic list-row-horizontal-icon-arrow
data
title Internet Technology Evolution
desc From Web 1.0 to AI era, key milestones
lists
- time 1991
label Web 1.0
desc Tim Berners-Lee published the first website, opening the Internet era
icon web
- time 2004
label Web 2.0
desc Social media and user-generated content become mainstream
icon account multiple
- time 2007
label Mobile
desc iPhone released, smartphone changes the world
icon cellphone
- time 2015
label Cloud Native
desc Containerization and microservices architecture are widely used
icon cloud
- time 2020
label Low Code
desc Visual development lowers the technology threshold
icon application brackets
- time 2023
label AI Large Model
desc ChatGPT ignites the generative AI revolution
icon brain
Before creating an infographic, first understand the user's needs and the information they want to express, in order to determine the template and data structure.
If the user provides a clear content description, it should be broken down into a clear and concise structure.
Otherwise, clarification from the user is needed (e.g., "Please provide a clear and concise content description.", "Which template do you want to use?")
{syntax}.Key Note: Must respect the language of user input. For example, if the user inputs in Chinese, the text in the syntax must also be in Chinese.
When you have the final AntV Infographic syntax, you can generate a complete HTML file following these steps:
{title} - Infographichttps://unpkg.com/@antv/infographic@latest/dist/infographic.min.jscontainerwidth: '100%', height: '100%'){title} with actual title{syntax} with actual AntV Infographic syntaxconst svgDataUrl = await infographic.toDataURL({ type: 'svg' });Reference HTML template:
<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
const infographic = new AntVInfographic.Infographic({
container: '#container',
width: '100%',
height: '100%',
});
document.fonts?.ready.then(() => {
infographic.render(`{syntax}`);
}).catch((error) => {
console.error('Error waiting for fonts to load:', error);
infographic.render(`{syntax}`);
});
</script>
Use the Write tool to generate HTML file, named as <title>-infographic.html
Make data-driven prioritization decisions faster
Draft PRDs, status updates, and stakeholder presentations
Example
Create executive summary of Q3 roadmap, monthly progress report, feature launch announcement
Save 3-5 hours/week on communication overhead
Prerequisites
Time Estimate
30-60 minutes to see productivity improvements
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
mattpocock/skills
parcadei/continuous-claude-v3
cursor/plugins
ailabs-393/ai-labs-claude-skills
pproenca/dot-skills
mattpocock/skills
infographic-creator fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
Registry listing for infographic-creator matched our evaluation — installs cleanly and behaves as described in the markdown.
infographic-creator has been reliable in day-to-day use. Documentation quality is above average for community skills.
Keeps context tight: infographic-creator is the kind of skill you can hand to a new teammate without a long onboarding doc.
Solid pick for teams standardizing on skills: infographic-creator is focused, and the summary matches what you get after install.
infographic-creator reduced setup friction for our internal harness; good balance of opinion and flexibility.
infographic-creator is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
I recommend infographic-creator for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
infographic-creator is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
We added infographic-creator from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
showing 1-10 of 33