infographic-structure-creator

Generate TypeScript/TSX structure components with registerStructure calls for the Infographic framework.

5.7k|442|Updated Sep 11, 2025

Search Tags:#typescript #layout #structure #generate #infographic #TSX #registerStructure

Ready to run

npx skills add https://github.com/antvis/Infographic --skill infographic-structure-creator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: infographic-structure-creator
Source: https://github.com/antvis/Infographic/tree/main/.skills/infographic-structure-creator
Command: npx skills add https://github.com/antvis/Infographic --skill infographic-structure-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams generate or update TypeScript/TSX Structure components for the Infographic framework, ensuring layout rules, component composition, and registration align with the project's conventions.

Core Features & Use Cases

Generate complete Structure component code for list, compare, sequence, hierarchy, relation, geo, and chart structures, following the project’s component rules, layout constraints, and registration requirements.
Read references/structure-prompt.md for the full framework rules, allowed components, and output requirements.
Verify imported components, ensure correct composites in registerStructure, and provide clean, self-contained TSX output ready for integration.

Quick Start

Ask the Infographic Structure Creator to generate a new structure by specifying the target layout type (e.g., list, sequence, hierarchy) and the data shape; the tool will output a complete TS file and a registerStructure call.

Frequently Asked Questions about infographic-structure-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate TypeScript structure components for an infographic layout?▼

Generate infographic structure components by specifying the target layout type and data shape to output a complete TSX file and a registerStructure call with composites. This process enforces project rules and imports only used components for integration.

What infographic layout types are supported for TSX component generation?▼

Supported infographic layout types include list, compare, sequence, hierarchy, relation, geo, and chart structures. Each layout type generates a complete TypeScript component file with layout logic and required registration.

How do I register composite components in an infographic structure?▼

Register composite components in an infographic structure by using the registerStructure call provided in the generated output. The tool verifies correct composites and ensures the TSX file is self-contained and ready for integration.

Can I update existing infographic structure components instead of creating new ones?▼

Yes, you can update existing infographic structure components by specifying the desired changes. The tool reads framework rules from references and outputs a clean, self-contained TSX file with updated layout logic and registration.

What are the limitations when generating infographic structures with TypeScript?▼

Infographic structure generation with TypeScript enforces strict project rules, imports only used components, and requires adherence to the framework's allowed components and layout constraints. Output is limited to the supported layout types and composite registration.