infographic-creator
ๅบไบ็ปๅฎๆๅญๅ ๅฎนๅๅปบ็ฒพ็พไฟกๆฏๅพใๅฝ็จๆท่ฏทๆฑๅๅปบไฟกๆฏๅพๆถไฝฟ็จใ
@antvisInstall SkillContent
Skill
/infographic-syntax-creator
Generate AntV Infographic syntax only. Use when asked to turn notes, outlines, reports, or other user content into the Infographic DSL with template selection, data structuring, and theme hints. Do not use for HTML rendering or TS/TSX component implementation.
Claude Code
$ npx -y skills add antvis/infographic --skill infographic-syntax-creator --agent claude-code
Codex
$ npx skills add antvis/infographic --skill infographic-syntax-creator -a codex -y
Cursor
$ npx skills add antvis/infographic --skill infographic-syntax-creator -a cursor -y
Gemini CLI
$ npx skills add antvis/infographic --skill infographic-syntax-creator -a gemini-cli -y
GitHub Copilot
$ npx skills add antvis/infographic --skill infographic-syntax-creator -a github-copilot -y
OpenCode
$ npx skills add antvis/infographic --skill infographic-syntax-creator -a opencode -y
Windsurf
$ npx skills add antvis/infographic --skill infographic-syntax-creator -a windsurf -y
SKILL.md
infographic-syntax-creator.SKILL.mdname: infographic-syntax-creator
description: Generate AntV Infographic syntax only. Use when asked to turn notes, outlines, reports, or other user content into the Infographic DSL with template selection, data structuring, and theme hints. Do not use for HTML rendering or TS/TSX component implementation.
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.
Read more
name: infographic-syntax-creator description: Generate AntV Infographic syntax only. Use when asked to turn notes, outlines, reports, or other user content into the Infographic DSL with template selection, data structuring, and theme hints. Do not use for HTML rendering or TS/TSX component implementation.
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.
Ships withantv-infographic-skills
๐ฆ An Infographic Generation and Rendering Framework, bring words to life! AntV Infographic is AntV's next-generation declarative infographic visualization engine.
7.1k5 skills
Stars on GitHub
Momentum
- stars in total
- 7.1k
Other skills on antv-infographic-skills.
@antvisInstall Skillinfographic-item-creatโฆ
Generate or update infographic Item components for this repo (TypeScript/TSX in src/designs/items). Use when asked to design,โฆ
@antvisInstall Skillinfographic-structure-โฆ
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked toโฆ
@antvisInstall Skillinfographic-template-uโฆ
Update template catalogs and UI prompts after adding new infographic templates (src/templates/*.ts), including SKILL.md templateโฆ
@antvisInstall SkillMore skills from other plugins.
prompt-lookup
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Useโฆ
@gh-fInstall Skillppt-master
AI-driven presentation workflow for generating editable PPTX decks and slides, reconstructing page visuals, creating reusableโฆ
@hugohe3Install Skillmorph-ppt
Use this skill when the user wants a .pptx with smooth cross-slide animation โ PowerPoint Morph transitions, Keynote-styleโฆ
@iofficeaiInstall Skillfrontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants toโฆ
@zarazhangruiInstall SkillQuestions about infographic-syntax-creator.
- Which coding agents can use infographic-syntax-creator?
- infographic-syntax-creator installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.