infographic-creator
ๅบไบ็ปๅฎๆๅญๅ ๅฎนๅๅปบ็ฒพ็พไฟกๆฏๅพใๅฝ็จๆท่ฏทๆฑๅๅปบไฟกๆฏๅพๆถไฝฟ็จใ
@antvisInstall SkillContent
Skill
/infographic-structure-creator
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and
Claude Code
$ npx -y skills add antvis/infographic --skill infographic-structure-creator --agent claude-code
Codex
$ npx skills add antvis/infographic --skill infographic-structure-creator -a codex -y
Cursor
$ npx skills add antvis/infographic --skill infographic-structure-creator -a cursor -y
Gemini CLI
$ npx skills add antvis/infographic --skill infographic-structure-creator -a gemini-cli -y
GitHub Copilot
$ npx skills add antvis/infographic --skill infographic-structure-creator -a github-copilot -y
OpenCode
$ npx skills add antvis/infographic --skill infographic-structure-creator -a opencode -y
Windsurf
$ npx skills add antvis/infographic --skill infographic-structure-creator -a windsurf -y
SKILL.md
infographic-structure-creator.SKILL.mdname: infographic-structure-creator
description: Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
Infographic Structure Creator
Overview
Generate complete Structure component code for the infographic framework, following the project's component rules, layout constraints, and registration requirements.
Workflow
1. Read `references/structure-prompt.md` for the full framework rules, allowed components, and output requirements. 2. Clarify minimal requirements if missing: structure category, layout direction, hierarchy depth, and whether add/remove buttons are needed. 3. Choose Item vs Items, compute layout from `getElementBounds`, and plan decor elements under ItemsGroup. 4. Produce a full TypeScript file: imports, Props extends BaseStructureProps, component implementation, and `registerStructure` with accurate `composites`. 5. Self-check against the constraints in the reference (no unlisted components, no SVG cx/cy/r, correct indexes, empty-state handling).
Notes
- Prefer scanning `src/designs/structures` for similar existing structures to match local patterns when appropriate.
- Keep output concise; avoid React-only features (keys, hooks).
Read more
name: infographic-structure-creator description: Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
Infographic Structure Creator
Overview
Generate complete Structure component code for the infographic framework, following the project's component rules, layout constraints, and registration requirements.
Workflow
1. Read `references/structure-prompt.md` for the full framework rules, allowed components, and output requirements. 2. Clarify minimal requirements if missing: structure category, layout direction, hierarchy depth, and whether add/remove buttons are needed. 3. Choose Item vs Items, compute layout from `getElementBounds`, and plan decor elements under ItemsGroup. 4. Produce a full TypeScript file: imports, Props extends BaseStructureProps, component implementation, and `registerStructure` with accurate `composites`. 5. Self-check against the constraints in the reference (no unlisted components, no SVG cx/cy/r, correct indexes, empty-state handling).
Notes
- Prefer scanning `src/designs/structures` for similar existing structures to match local patterns when appropriate.
- Keep output concise; avoid React-only features (keys, hooks).
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-syntax-creโฆ
Generate AntV Infographic syntax only. Use when asked to turn notes, outlines, reports, or other user content into theโฆ
@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-structure-creator.
- Which coding agents can use infographic-structure-creator?
- infographic-structure-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.