Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
antvis avatar

Infographic Syntax Creator

antvis/infographic

  • 107 installs
  • 5.7k repo stars
  • Updated June 1, 2026
  • antvis/infographic

infographic-syntax-creator is a Claude Code skill that converts user content into AntV Infographic DSL syntax with template selection and data structuring.

About

This skill generates AntV Infographic DSL syntax from user content such as notes, outlines, or reports. It selects a template, extracts the title, description, items, hierarchy, and metrics, and composes the syntax with theme and icon hints. It outputs syntax only in a single fenced code block and does not render HTML or implement TS/TSX components.

  • Turns notes, outlines, or reports into AntV Infographic DSL syntax only
  • Selects a template (sequence/list/compare/hierarchy/chart) and structures the data
  • Outputs a single fenced code block starting with 'infographic <template-name>', two-space indented

Infographic Syntax Creator by the numbers

  • 107 all-time installs (skills.sh)
  • Ranked #782 of 1,335 Generative Media skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

infographic-syntax-creator capabilities & compatibility

Capabilities
data visualization · content structuring
Use cases
data analysis · frontend
From the docs

What infographic-syntax-creator says it does

Generate AntV Infographic syntax only.
SKILL.md
First line is `infographic <template-name>`.
SKILL.md
npx skills add https://github.com/antvis/infographic --skill infographic-syntax-creator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs107
repo stars★ 5.7k
Last updatedJune 1, 2026
Repositoryantvis/infographic ↗

What it does

Turn user notes or outlines into AntV Infographic DSL syntax with template selection and data structuring, syntax only.

Who is it for?

Converting notes or outlines into AntV Infographic DSL syntax

Skip if: HTML rendering or TS/TSX component implementation

When should I use this skill?

Asked to turn notes, outlines, or reports into the Infographic DSL

What you get

A single fenced code block of valid Infographic DSL syntax with the right template and structured data.

  • A single fenced code block of Infographic DSL syntax

Files

SKILL.mdMarkdownGitHub ↗

Infographic Syntax Creator

Overview

Generate AntV Infographic syntax output from user content, following the rules in references/prompt.md.

Workflow

1. Read references/prompt.md for syntax rules, templates, and output constraints. 2. If the user explicitly names a valid template or template family, honor it first; otherwise choose the best matching template for the structure (sequence/list/compare/hierarchy/chart). 3. Extract the user's key structure: title, desc, items, hierarchy, metrics; infer missing pieces if needed. 4. Compose the syntax using references/prompt.md as the formatting baseline. 5. Preserve hard constraints in every output:

  • Output is a single fenced code block containing only syntax; no extra text.
  • First line is infographic <template-name>.
  • Use two-space indentation; key/value pairs are key value; arrays use -.
  • Keep all user-facing text in the same language as the user's input unless the user explicitly asks for translation or bilingual output.
  • Prefer generating icon for semantic data items by default. If a list item, step, node, compare branch, or compare child has a clear concept, include an icon unless the user explicitly wants text-only output or the template is chart-only.
  • If the chosen template name or item style implies icons, treat icon as expected on every primary datum rather than optional.
  • When icon is written as a keyword phrase, separate words with spaces rather than hyphens. Exact icon IDs may keep their native punctuation.
  • compare-binary-* / compare-hierarchy-left-right-* must have exactly two root nodes, and the actual comparison points belong in each root node's children.
  • compare-swot / compare-quadrant-* follow their own root-node counts and should not be forced into a binary structure.

Notes

  • This skill returns syntax only. If the user wants a rendered HTML file or a complete deliverable, prefer infographic-creator.
  • The template list in references/prompt.md is representative rather than exhaustive; prefer structurally correct registered templates over forcing a bad match.

Related skills

remotion-devRemotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k101-skillsAi Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665101-skillsAi Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665101-skillsAi Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665101-skillsRemotion RenderRender videos programmatically using React components and Remotion framework441k665halt-catch-fireRemotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665

FAQ

What is the output format?

A single fenced code block containing only syntax, first line 'infographic <template-name>', with two-space indentation and arrays using '-'.

Does it render HTML?

No. It returns syntax only; for a rendered deliverable it defers to the infographic-creator skill.

Generative Mediafrontend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.