Infographic 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 registration.

install

source · Clone the upstream repo

git clone https://github.com/antvis/Infographic

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/antvis/Infographic "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/infographic-structure-creator" ~/.claude/skills/antvis-infographic-infographic-structure-creator && rm -rf "$T"

manifest: skills/infographic-structure-creator/SKILL.md

source content

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

Read
```
references/structure-prompt.md
```
for the full framework rules, allowed components, and output requirements.
Clarify minimal requirements if missing: structure category, layout direction, hierarchy depth, and whether add/remove buttons are needed.
Choose Item vs Items, compute layout from
```
getElementBounds
```
, and plan decor elements under ItemsGroup.
Produce a full TypeScript file: imports, Props extends BaseStructureProps, component implementation, and
```
registerStructure
```
with accurate
```
composites
```
.
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).