/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
$ npx -y skills add antvis/infographic --skill infographic-structure-creator --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/infographic-structure-creator
Context preview
The summary Claude sees to decide when to auto-load this skill.
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
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).
🦋 An Infographic Generation and Rendering Framework, bring words to life! AntV Infographic is AntV's next-generation declarative infographic visualization engine.
Repo: antvis/infographic
Other skills on antv-infographic-skills.
- /infographic-creator
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
Open skill - /infographic-item-creator
Generate or update infographic Item components for this repo (TypeScript/TSX in src/designs/items). Use when asked to design, implement, or modify data item visuals, layout logic, or registerItem composites.
Open 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.
Open skill - /infographic-template-updater
Update template catalogs and UI prompts after adding new infographic templates (src/templates/*.ts), including SKILL.md template list, site gallery template mappings, and the AIPlayground prompt list.
Open skill