home / skills / antvis / infographic / infographic-structure-creator

infographic-structure-creator skill

safe

This skill generates or updates infographic structure components in TypeScript projects, ensuring layout logic, composition, and correct registration per

npx playbooks add skill antvis/infographic --skill infographic-structure-creator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.4 KB

---
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).

Overview

This skill generates or updates TypeScript/TSX Structure components for the infographic framework. It creates complete, runnable component files that follow the project's component rules, layout constraints, and registration patterns. Use it to implement new list/compare/sequence/hierarchy/relation/geo/chart structure layouts or to modify existing ones.

How this skill works

The skill inspects requested structure requirements (category, layout direction, depth, add/remove controls) and scans the repo for local structure patterns to match conventions. It computes element layout using getElementBounds, selects Item vs Items composition, assembles decor under ItemsGroup, and emits a full TypeScript file with imports, Props extending BaseStructureProps, component implementation, and registerStructure with correct composites. It performs a self-check against framework constraints to avoid unlisted components and invalid attributes.

When to use it

Creating a new structure layout (list, sequence, compare, hierarchy, relation, geo, chart).
Updating an existing structure to change layout direction, depth, or controls.
Implementing layout logic based on element bounds and composition rules.
Adding empty-state handling or decor/enhancement under ItemsGroup.
Registering a new structure so it becomes available to the framework.

Best practices

Clarify minimal requirements before coding: category, direction, depth, and button needs.
Match local file patterns in src/designs/structures to ensure consistent imports and naming.
Use getElementBounds to compute precise item sizes and positions rather than hard-coded values.
Prefer Items vs Item selection based on whether multiple content blocks or single items are needed.
Include empty-state rendering and safe defaults; avoid using unlisted components or forbidden SVG attributes.
Register the structure with accurate composites and maintain correct index ordering.

Example use cases

Create a vertical sequence structure with numbered steps and optional add/remove buttons.
Build a comparison layout that composes two ItemsGroups with aligned headers and icon decor.
Implement a hierarchical tree structure with recursive Items and connector decor under ItemsGroup.
Modify an existing chart structure to change layout direction and update composite registration.
Add empty-state visuals and placeholder Items when a structure receives no data.

FAQ

What inputs do you need to generate a structure?

Provide structure category, layout direction, desired depth, whether add/remove buttons are required, and any specific decor or composition constraints.

Will the generated file follow the repo conventions?

Yes. The skill scans existing structures to align imports, naming, Props patterns, and registerStructure usage to match local conventions.