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.
Turns user content into AntV Infographic syntax, choosing a matching template and structuring the data into a single infographic code block.
Install AntV Infographic Syntax Creator
$ npx skills add ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ThinkInAIXYZ/deepchat infographic-syntax-creator --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/ThinkInAIXYZ/deepchat.git skills-src && mkdir -p .claude/skills && cp -r skills-src/resources/skills/infographic-syntax-creator .claude/skills/infographic-syntax-creator && 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-creator" agent skill from https://github.com/ThinkInAIXYZ/deepchat/tree/dev/resources/skills/infographic-syntax-creator into .claude/skills/infographic-syntax-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax-creator", 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/ThinkInAIXYZ/deepchat/tree/dev/resources/skills/infographic-syntax-creatorType 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 ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ThinkInAIXYZ/deepchat infographic-syntax-creator --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ThinkInAIXYZ/deepchat.git skills-src && mkdir -p .agents/skills && cp -r skills-src/resources/skills/infographic-syntax-creator .agents/skills/infographic-syntax-creator && 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-creator" agent skill from https://github.com/ThinkInAIXYZ/deepchat/tree/dev/resources/skills/infographic-syntax-creator into .agents/skills/infographic-syntax-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax-creator", 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 ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ThinkInAIXYZ/deepchat infographic-syntax-creator --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ThinkInAIXYZ/deepchat.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/resources/skills/infographic-syntax-creator .cursor/skills/infographic-syntax-creator && 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-creator" agent skill from https://github.com/ThinkInAIXYZ/deepchat/tree/dev/resources/skills/infographic-syntax-creator into .cursor/skills/infographic-syntax-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax-creator", 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/ThinkInAIXYZ/deepchat.git --path resources/skills/infographic-syntax-creator--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 ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ThinkInAIXYZ/deepchat infographic-syntax-creator --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ThinkInAIXYZ/deepchat.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/resources/skills/infographic-syntax-creator .gemini/skills/infographic-syntax-creator && 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-creator" agent skill from https://github.com/ThinkInAIXYZ/deepchat/tree/dev/resources/skills/infographic-syntax-creator into .gemini/skills/infographic-syntax-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax-creator", 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 ThinkInAIXYZ/deepchat infographic-syntax-creatorInstalls 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 ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ThinkInAIXYZ/deepchat.git skills-src && mkdir -p .github/skills && cp -r skills-src/resources/skills/infographic-syntax-creator .github/skills/infographic-syntax-creator && 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-creator" agent skill from https://github.com/ThinkInAIXYZ/deepchat/tree/dev/resources/skills/infographic-syntax-creator into .github/skills/infographic-syntax-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax-creator", 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 ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ThinkInAIXYZ/deepchat infographic-syntax-creator --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ThinkInAIXYZ/deepchat.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/resources/skills/infographic-syntax-creator .opencode/skills/infographic-syntax-creator && 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-creator" agent skill from https://github.com/ThinkInAIXYZ/deepchat/tree/dev/resources/skills/infographic-syntax-creator into .opencode/skills/infographic-syntax-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "infographic-syntax-creator", 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-creator- GitHub stars
- 6.4k
- Token cost
- ~278 tokens
- SKILL.md length
- 107 words
- Files
- 2 (incl. references)
- Skills in repo
- 15
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Turns user content into AntV Infographic syntax, choosing a matching template and structuring the data into a single infographic code block.
- Works in 5 steps: Read references/prompt.md for syntax… → Extract the user's key structure: title,… → Select a template that matches the… → …
- Converting a list or process into AntV Infographic syntax
- SKILL.md covers Overview and Workflow
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
The skill reads the rules in `references/prompt.md`, then pulls the key structure out of the user's content: title, description, items, hierarchy and metrics, inferring missing pieces when needed. It selects a template that matches the structure (sequence, list, compare, hierarchy or chart) and composes the syntax with the reference file as the formatting baseline.
Output has hard constraints. It is a single `infographic` markdown code block with no extra text, the first line names the template, indentation is two spaces, key and value pairs are written as `key value`, and arrays use dashes. Compare templates must have exactly two root nodes with children. The result is plain syntax for the Infographic DSL, not an image file.
When your agent uses it
- Converting a list or process into AntV Infographic syntax
- Choosing between sequence, compare, hierarchy and chart templates
- Producing a compare infographic with exactly two sides
Example prompts
- “Turn these five onboarding steps into an infographic with a sequence template.”
- “Make an infographic comparing monthly and yearly billing plans.”
- “Structure this org chart as a hierarchy infographic.”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Read references/prompt.md for syntax rules, templates, and output constraints.
- Extract the user's key structure: title, desc, items, hierarchy, metrics; infer missing pieces if needed.
- Select a template that matches the structure (sequence/list/compare/hierarchy/chart).
- Compose the syntax using references/prompt.md as the formatting baseline.
- Preserve hard constraints in every output
What it can do on your machine
Read from SKILL.md and the folder at commit 4eb6062. 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
AntV Infographic Syntax Creator loads about 278 tokens when it runs, and up to ~1.4k if it reads all its reference files. Until then it costs about 57 tokens; SKILL.md has 107 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 ThinkInAIXYZ/deepchat at commit 4eb6062, republished under its Apache-2.0 licence (© ThinkInAIXYZ). 107 words, ~278 tokens.
Download SKILL.mdSave it as
.claude/skills/infographic-syntax-creator/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- infographic-syntax-creator
- description
- Generate AntV Infographic syntax outputs. Use when asked to turn user content into the Infographic DSL (template selection, data structuring, theme), or to output `infographic <template>` plain syntax.
Infographic Syntax Creator
Overview
Generate AntV Infographic syntax output from user content, following the rules in references/prompt.md.
Workflow
- Read
references/prompt.mdfor syntax rules, templates, and output constraints. - Extract the user's key structure: title, desc, items, hierarchy, metrics; infer missing pieces if needed.
- Select a template that matches the structure (sequence/list/compare/hierarchy/chart).
- Compose the syntax using
references/prompt.mdas the formatting baseline. - Preserve hard constraints in every output:
- Output is a single
infographicmarkdown code block; no extra text. - First line is
infographic <template-name>.
- Output is a single
- Use two-space indentation; key/value pairs are
key value; arrays use-. - Compare templates (
compare-*) must have exactly two root nodes with children.
© ThinkInAIXYZ, 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
SKILL.md and 1 other file (references) in resources/skills/infographic-syntax-creator of ThinkInAIXYZ/deepchat.
- SKILL.md
- references/prompt.md
Open the folder on GitHubat commit 4eb6062
Compare with similar skills
AntV Infographic Syntax Creator 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 |
|---|---|---|---|---|---|---|
| AntV Infographic Syntax Creator this skillThinkInAIXYZ/deepchat | 6.4k | — | ~278 | 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 ThinkInAIXYZ/deepchat
All 15 skills in this repoDeepChat Release Process
ThinkInAIXYZ/deepchat
Runs the DeepChat repository's release flow: prepares bilingual release notes and a version bump on dev, cuts or updates a release branch, then fast-forwards main and tags the version.
DeepChat Provider Integration
ThinkInAIXYZ/deepchat
Guides adding an LLM provider to DeepChat through explicit source changes: collect the provider details, pick a transport path and add registry entries and tests.
DeepChat CLI
ThinkInAIXYZ/deepchat
Lets an agent drive DeepChat's bundled CLI for model calls, media generation, transcription, OCR, artifacts, configuration, Skills and MCP operations, within strict command rules.
DeepChat Settings
ThinkInAIXYZ/deepchat
Changes DeepChat's own application settings, such as theme, language, font size and sound, through a fixed set of settings tools, and points to the right screen for anything else.
DeepChat Data Import Helper
ThinkInAIXYZ/deepchat
Guides building a third-party importer for DeepChat's local SQLite data, covering schema, encryption and safe read-only access patterns.
DeepChat Desktop Control
ThinkInAIXYZ/deepchat
Operates native desktop apps through DeepChat's built-in Computer Use tools, following a snapshot-then-act loop with session setup, app launch and window inspection.
Related
Categories
Questions about AntV Infographic Syntax Creator
What does AntV Infographic Syntax Creator do?
Turns user content into AntV Infographic syntax, choosing a matching template and structuring the data into a single infographic code block. md`, then pulls the key structure out of the user's content: title, description, items, hierarchy and metrics, inferring missing pieces when needed. It selects a template that matches the structure (sequence, list, compare, hierarchy or chart) and composes the syntax with the reference file as the formatting baseline.
When should I use AntV Infographic Syntax Creator?
AntV Infographic Syntax Creator fits situations like: converting a list or process into AntV Infographic syntax; choosing between sequence, compare, hierarchy and chart templates; producing a compare infographic with exactly two sides.
How do I install AntV Infographic Syntax Creator in Claude Code?
Run `npx skills add ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -a claude-code`. Or copy the skill folder (resources/skills/infographic-syntax-creator in ThinkInAIXYZ/deepchat) into .claude/skills/infographic-syntax-creator in your project. Claude Code loads it when a task matches its description.
How do I install AntV Infographic Syntax Creator in Codex?
Run `npx skills add ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -a codex`. Or copy the skill folder (resources/skills/infographic-syntax-creator in ThinkInAIXYZ/deepchat) into .agents/skills/infographic-syntax-creator in your project. Codex loads it when a task matches its description.
Can I use AntV Infographic Syntax Creator 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 ThinkInAIXYZ/deepchat --skill infographic-syntax-creator -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-creator, .gemini/skills/infographic-syntax-creator, .github/skills/infographic-syntax-creator and .opencode/skills/infographic-syntax-creator in your project.
What does AntV Infographic Syntax Creator need to run?
SKILL.md names no scripts, command-line tools or credentials: AntV Infographic Syntax Creator is instructions for the agent only.
Does AntV Infographic Syntax Creator 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 AntV Infographic Syntax Creator 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 AntV Infographic Syntax Creator use?
AntV Infographic Syntax Creator 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 AntV Infographic Syntax Creator use?
About 278 tokens (SKILL.md is roughly 1.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.2k tokens, read only when the agent opens those files.
What are the alternatives to AntV Infographic Syntax Creator?
Skills that share tags, products or a category with AntV Infographic Syntax Creator: 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 AntV Infographic Syntax Creator?
ThinkInAIXYZ (a GitHub organization) maintains it in ThinkInAIXYZ/deepchat, which has 6,359 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 9, 2026.
Source: ThinkInAIXYZ/deepchat on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.