Visual Explainer
nicobailon/visual-explainer
Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.
Author infographics with the AntV declarative DSL — pick a template, fill a small indented data tree, and save as an artifact (kind=infographic) that renders to crisp SVG and streams as you write it.
Install Infographic Syntax
$ npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Sidiora-Labs/centra-gideon-agent infographic-syntax --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Sidiora-Labs/centra-gideon-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/runtime/gideon/extensions/skills/bundled/infographic-syntax .claude/skills/infographic-syntax && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "infographic-syntax" agent skill from https://github.com/Sidiora-Labs/centra-gideon-agent/tree/main/runtime/gideon/extensions/skills/bundled/infographic-syntax into .claude/skills/infographic-syntax/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Sidiora-Labs/centra-gideon-agent/tree/main/runtime/gideon/extensions/skills/bundled/infographic-syntaxType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Sidiora-Labs/centra-gideon-agent infographic-syntax --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Sidiora-Labs/centra-gideon-agent.git skills-src && mkdir -p .agents/skills && cp -r skills-src/runtime/gideon/extensions/skills/bundled/infographic-syntax .agents/skills/infographic-syntax && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "infographic-syntax" agent skill from https://github.com/Sidiora-Labs/centra-gideon-agent/tree/main/runtime/gideon/extensions/skills/bundled/infographic-syntax into .agents/skills/infographic-syntax/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Sidiora-Labs/centra-gideon-agent infographic-syntax --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Sidiora-Labs/centra-gideon-agent.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/runtime/gideon/extensions/skills/bundled/infographic-syntax .cursor/skills/infographic-syntax && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "infographic-syntax" agent skill from https://github.com/Sidiora-Labs/centra-gideon-agent/tree/main/runtime/gideon/extensions/skills/bundled/infographic-syntax into .cursor/skills/infographic-syntax/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Sidiora-Labs/centra-gideon-agent.git --path runtime/gideon/extensions/skills/bundled/infographic-syntax--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Sidiora-Labs/centra-gideon-agent infographic-syntax --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Sidiora-Labs/centra-gideon-agent.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/runtime/gideon/extensions/skills/bundled/infographic-syntax .gemini/skills/infographic-syntax && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "infographic-syntax" agent skill from https://github.com/Sidiora-Labs/centra-gideon-agent/tree/main/runtime/gideon/extensions/skills/bundled/infographic-syntax into .gemini/skills/infographic-syntax/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Sidiora-Labs/centra-gideon-agent infographic-syntaxInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Sidiora-Labs/centra-gideon-agent.git skills-src && mkdir -p .github/skills && cp -r skills-src/runtime/gideon/extensions/skills/bundled/infographic-syntax .github/skills/infographic-syntax && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "infographic-syntax" agent skill from https://github.com/Sidiora-Labs/centra-gideon-agent/tree/main/runtime/gideon/extensions/skills/bundled/infographic-syntax into .github/skills/infographic-syntax/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Sidiora-Labs/centra-gideon-agent infographic-syntax --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Sidiora-Labs/centra-gideon-agent.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/runtime/gideon/extensions/skills/bundled/infographic-syntax .opencode/skills/infographic-syntax && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "infographic-syntax" agent skill from https://github.com/Sidiora-Labs/centra-gideon-agent/tree/main/runtime/gideon/extensions/skills/bundled/infographic-syntax into .opencode/skills/infographic-syntax/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
infographic-syntax- GitHub stars
- 217
- Token cost
- ~1.1k tokens
- SKILL.md length
- 458 words
- Files
- 1
- Skills in repo
- 24
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Author infographics with the AntV declarative DSL — pick a template, fill a small indented data tree, and save as an artifact (kind=infographic) that renders to crisp SVG and streams as you write it.
- Works in 4 steps: Decide infographic is the right format… → Pick a template by relationship (table… → artifact_save(kind="infographic",… → …
- Wants an infographic
- SKILL.md covers When to use this vs a widget, Format, Picking a template and Streaming, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Infographic Syntax is an agent skill from Sidiora-Labs/centra-gideon-agent. Author infographics with the AntV declarative DSL — pick a template, fill a small indented data tree, and save as an artifact (kind=infographic) that renders to crisp SVG and streams as you write it. Load when the user wants an infographic, a visual summary, a comparison/steps/hierarchy/stats graphic, or "make this look like a poster/diagram".
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Media & Creative, covering Infographics. The repository describes itself as: The companion AI agent that learns, adapts and gets the work done no matter the task. The licence is Apache-2.0.
When your agent uses it
- Wants an infographic
- A visual summary
- A comparison/steps/hierarchy/stats graphic
- Make this look like a poster/diagram
Example prompts
- “make this look like a poster/diagram”
- “/infographic-syntax”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Decide infographic is the right format (structured info-design, not interactive).
- Pick a template by relationship (table above).
- artifact_save(kind="infographic", name="…", content=) — the body is the
- The viewer renders it; the user can edit the DSL with live preview, or comment.
What it can do on your machine
Read from SKILL.md and the folder at commit ca531ee. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Infographic Syntax loads about 1.1k tokens when it runs. Until then it costs about 91 tokens; SKILL.md has 458 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Sidiora-Labs/centra-gideon-agent at commit ca531ee, republished under its Apache-2.0 licence (© Sidiora-Labs). 458 words, ~1,085 tokens.
Download SKILL.mdSave it as
.claude/skills/infographic-syntax/SKILL.md (or your agent's skills folder).- name
- infographic-syntax
- description
- Author infographics with the AntV declarative DSL — pick a template, fill a small indented data tree, and save as an artifact (kind=infographic) that renders to crisp SVG and streams as you write it. Load when the user wants an infographic, a visual summary, a comparison/steps/hierarchy/stats graphic, or "make this look like a poster/diagram".
- triggers
- infographic, visual summary, poster, data storytelling, steps graphic, comparison graphic, swot, mind map, hierarchy diagram, stat cards, process diagram…
Infographic Syntax
Gideon renders infographics from a compact, declarative DSL (powered by the AntV Infographic engine). You write a few indented lines — a template name plus a small data tree — and the system renders professional SVG. The syntax is highly fault-tolerant, so it renders as you stream it.
Save an infographic as an artifact with kind=infographic; the body is the DSL
source (NOT HTML, NOT a widget). The Artifacts/Files viewer renders it live and
lets the user edit the DSL with a side-by-side preview.
When to use this vs a widget
- Infographic — structured information design: steps, comparisons, hierarchies, SWOT, stat cards, mind maps, process flows. Pick this when the shape of the information is the point and you want a polished, print-quality result fast.
- Widget (see the
visual-outputskill) — bespoke interactive HTML, custom charts, dashboards, tables, or anything needing live behavior/JS. - Mermaid (a ```mermaid fenced block) — flowcharts/sequence/ER graphs.
Format
The body is plain text: the first line is the template, then a data block with
an indented tree. Indentation (2 spaces) defines nesting; - starts a list item.
infographic list-row-simple-horizontal-arrow
data
title Onboarding in three steps
lists
- label Sign up
desc Create your account
- label Connect
desc Link your data sources
- label Ship
desc Launch your first workflow- First token after
infographicis the template id (below). Omit it (or usedefault) and the engine picks a sensible layout for the data shape. dataholds the content. Common keys:title,desc,lists(the items),label/descper item, and template-specific keys (e.g. comparison sides).- Keep labels short — infographics are glanceable, not paragraphs.
Picking a template
Choose by the relationship you're showing (≈200 templates ship; these are the workhorses):
| Intent | Template family |
|---|---|
| Ordered steps / process | list-row-simple-horizontal-arrow, list-column-simple-vertical-arrow, horizontal-icon-arrow |
| Stat / KPI cards | list-grid-badge-card, list-grid-compact-card, indexed-card, circular-progress |
| Two-way comparison | compare-binary-horizontal-*-vs, compare-swot |
| Hierarchy / mind map | hierarchy-mindmap, hierarchy-structure, compare-hierarchy-left-right |
| Simple charts | chart-bar, chart-column, chart-line, chart-pie |
| Generic / let it choose | default |
If unsure, start with default or a list-* template and iterate — the user can
nudge the template in the editor and re-render instantly.
Show full SKILL.md (152 more words)Show less
Streaming
Because the syntax tolerates partial input, emit the artifact body top-to-bottom
and it paints progressively. Lead with the infographic <template> line and the
title, then stream the list items — the user sees the structure form in real time.
Workflow
- Decide infographic is the right format (structured info-design, not interactive).
- Pick a template by relationship (table above).
artifact_save(kind="infographic", name="…", content=<DSL>)— the body is the DSL source. (Checkartifact_listfirst if iterating on an existing one, per theartifactsskill — thenartifact_update.)- The viewer renders it; the user can edit the DSL with live preview, or comment.
Pitfalls
- Don't wrap the DSL in a
<widget>tag or HTML —kind=infographicis its own type. Wrapping it makes it render as raw text. - Don't write prose paragraphs as labels — keep each item to a few words.
- Indentation is significant (2 spaces per level). Mixed tabs/spaces break nesting.
- One infographic per artifact.
© Sidiora-Labs, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in runtime/gideon/extensions/skills/bundled/infographic-syntax of Sidiora-Labs/centra-gideon-agent.
Open the folder on GitHubat commit ca531ee
Compare with similar skills
Infographic Syntax next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Infographic Syntax this skillSidiora-Labs/centra-gideon-agent | 217 | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Visual Explainernicobailon/visual-explainer | 10k | — | ~3.3k | Automated safety check: Pass | MIT | |
| Lanshu Create AI Presenter Videocclank/lanshu-create-ai-presenter-video | 2.6k | — | ~3.6k | Automated safety check: Pass | MIT | |
| Image Generationonyx-dot-app/onyx | 32k | 1 repos | ~1.7k | Automated safety check: Pass | Custom licence | |
| Math ExplainerGordenSun/mathVideoMaker | 290 | 1 repos | ~2.4k | Automated safety check: Pass | None | |
| SEO Image GeneratorAgriciDaniel/claude-seo | 19k | 2 repos | ~2.1k | Automated safety check: Pass | MIT |
Similar skills
Lanshu Create AI Presenter Video
cclank/lanshu-create-ai-presenter-video
Turn a topic or finished script into a complete, publish-ready explainer video — led by an AI presenter from an authorized adult presenter image, or performed in one of nine visual explainer styles…
Image Generation
onyx-dot-app/onyx
Generate or edit raster images (photos, illustrations, textures, sprites, mockups, logos, infographics) using the workspace's configured image-generation provider via onyx-cli image.
Math Explainer
GordenSun/mathVideoMaker
Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.
SEO Image Generator
AgriciDaniel/claude-seo
Generates Open Graph previews, blog hero images, product photos and infographics for SEO use through Gemini image tools and the banana extension.
Ecom Image2
buluslan/gpt-image2-ecommerce
由 buluslan（公众号：新西楼.AI）研发的开源电商做图 Skill：39 个电商场景模板、Campaign 套图一致性、GPT-Image-2.5 官方双模型路由（Flare/Sunburst）与平台技术预检。通过用户配置的 OpenAI 兼容端点生成图片，或导出 prompt 包手动使用。Trigger whenever the user wants product main…
More from Sidiora-Labs/centra-gideon-agent
All 24 skills in this repoArtifacts
Sidiora-Labs/centra-gideon-agent
Persist, version, and iterate on LLM-generated UI (widgets, HTML, markdown).
Best Of N
Sidiora-Labs/centra-gideon-agent
Sample several candidate answers in parallel, judge them against stated criteria, and present the winner with the runners-up kept one click away.
Document Authoring
Sidiora-Labs/centra-gideon-agent
Author a real document — a report, proposal, slide deck, spec, or paper — by settling audience, claim, and structure before drafting prose, then writing to that structure.
Editorial Document
Sidiora-Labs/centra-gideon-agent
Write long-form editorial documents as clean, semantic HTML saved as an artifact (kind=document) — reports, briefs, explainers, proposals, write-ups.
Gideon API
Sidiora-Labs/centra-gideon-agent
The operator's manual for DRIVING Gideon's API and tools — how to find an exact tool/route signature, the mandatory verify-after-mutate loop, and what NOT to hand-roll.
Research Campaign
Sidiora-Labs/centra-gideon-agent
Run a multi-cycle research campaign — grill the question, decompose it into answerable sub-questions, investigate each against sources, then synthesize with confidence and gaps stated.
Related
Categories
Questions about Infographic Syntax
What does Infographic Syntax do?
Author infographics with the AntV declarative DSL — pick a template, fill a small indented data tree, and save as an artifact (kind=infographic) that renders to crisp SVG and streams as you write it. Infographic Syntax is an agent skill from Sidiora-Labs/centra-gideon-agent. Author infographics with the AntV declarative DSL — pick a template, fill a small indented data tree, and save as an artifact (kind=infographic) that renders to crisp SVG and streams as you write it.
When should I use Infographic Syntax?
Infographic Syntax fits situations like: wants an infographic; A visual summary; A comparison/steps/hierarchy/stats graphic; make this look like a poster/diagram.
How do I install Infographic Syntax in Claude Code?
Run `npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a claude-code`. Or copy the skill folder (runtime/gideon/extensions/skills/bundled/infographic-syntax in Sidiora-Labs/centra-gideon-agent) into .claude/skills/infographic-syntax in your project. Claude Code loads it when a task matches its description.
How do I install Infographic Syntax in Codex?
Run `npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a codex`. Or copy the skill folder (runtime/gideon/extensions/skills/bundled/infographic-syntax in Sidiora-Labs/centra-gideon-agent) into .agents/skills/infographic-syntax in your project. Codex loads it when a task matches its description.
Can I use Infographic Syntax in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Sidiora-Labs/centra-gideon-agent --skill infographic-syntax -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/infographic-syntax, .gemini/skills/infographic-syntax, .github/skills/infographic-syntax and .opencode/skills/infographic-syntax in your project.
What does Infographic Syntax need to run?
SKILL.md names no scripts, command-line tools or credentials: Infographic Syntax is instructions for the agent only.
Does Infographic Syntax access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Infographic Syntax safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Infographic Syntax use?
Infographic Syntax is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Infographic Syntax use?
About 1.1k tokens (SKILL.md is roughly 4.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Infographic Syntax?
Skills that share tags, products or a category with Infographic Syntax: Visual Explainer (nicobailon/visual-explainer, 10k stars), Lanshu Create AI Presenter Video (cclank/lanshu-create-ai-presenter-video, 2.6k stars), Image Generation (onyx-dot-app/onyx, 32k stars) and Math Explainer (GordenSun/mathVideoMaker, 290 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Infographic Syntax?
Sidiora-Labs (a GitHub organization) maintains it in Sidiora-Labs/centra-gideon-agent, which has 217 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on October 8, 2026.
Source: Sidiora-Labs/centra-gideon-agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.