Agent Skills › antvis/Infographic › infographic-structure-creator

infographic-structure-creator

GitHub

用于生成或更新信息图结构组件代码，支持列表、对比、序列等布局。通过读取参考规则并遵循项目约束，输出完整的TypeScript/TSX文件，包含组件实现与注册逻辑，确保符合框架规范。

skills/infographic-structure-creator/SKILL.md antvis/Infographic

Trigger Scenarios

需要设计或修改信息图的结构布局要求生成符合特定框架规则的组件代码涉及结构组件的组合与注册

Install

npx skills add antvis/Infographic --skill infographic-structure-creator -g -y

More Options

Use without installing

npx skills use antvis/Infographic@infographic-structure-creator

指定 Agent (Claude Code)

npx skills add antvis/Infographic --skill infographic-structure-creator -a claude-code -g -y

安装 repo 全部 skill

npx skills add antvis/Infographic --all -g -y

预览 repo 内 skill

npx skills add antvis/Infographic --list

SKILL.md

Frontmatter

{
    "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

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