Can it update existing structures in my project?

Yes, the skill can scan your existing structures directory to match local patterns and apply updates while maintaining consistent coding standards.

Does this skill support React-specific features like hooks?

No, this skill avoids React-only features such as hooks and keys to comply with the specific rendering constraints of the Infographic framework.

What layout types can I generate with this tool?

You can create several categories including list, compare, sequence, hierarchy, relation, geo, and chart-based layouts.

How does it handle component registration?

It automatically generates the registerStructure function call with the correct composite configurations required by the framework.

Does it manage SVG properties like cx, cy, or r?

No, per framework constraints, it avoids using specific SVG circle attributes (cx/cy/r) to ensure compatibility with the layout engine.

Infographic Structure Architect

Name: Infographic Structure Architect
Author: antvis

byantvis

•

4,652

•

Design Tools

Generates and refines complex infographic layout structures using TypeScript and TSX for the AntV Infographic framework.

The Infographic Structure Architect is a specialized tool designed to automate the creation of sophisticated visual data structures within the AntV Infographic ecosystem. It streamlines the development of various layouts—including hierarchies, sequences, comparisons, and charts—by generating framework-compliant TypeScript code. The skill handles the complexities of layout logic, element bounds calculation, and component registration, ensuring that every generated structure adheres to strict project constraints like index management and empty-state handling. This is particularly useful for developers who need to rapidly prototype or scale data visualization components without manually managing boilerplate code.

Key Features

01Intelligent layout logic calculation based on element bounds and constraints

024,652 GitHub stars

03Pattern matching against existing src/designs/structures for stylistic consistency

04Strict adherence to AntV framework registration and composite requirements

05Automated generation of list, hierarchy, sequence, and relationship layouts

06Support for interactive UI elements like dynamic add/remove buttons

Use Cases

01Modifying existing geographic or sequence structures to include new layout logic

02Implementing complex comparison layouts for data-heavy infographic reports

03Building a custom hierarchical organizational chart structure from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add antvis/infographic infographic-structure-creator

For use in Claude.ai and ChatGPT

Download Skill