infographic-structure-creator

Generate and register TypeScript/TSX infographic structure components in src/designs/structures.

1|2|Updated Feb 28, 2026

Search Tags:#typescript #layout #structure #code-generation #infographic #registration

Ready to run

npx skills add https://github.com/zhangdszq/vk-skills --skill infographic-structure-creator-zhangdszq

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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.

Core Features & Use Cases

Generate complete Structure component code for the infographic framework, following the project's component rules, layout constraints, and registration requirements.
Scan src/designs/structures for similar existing structures to match local patterns and ensure consistency.
Self-check against framework constraints (no unlisted components, correct indexes, empty-state handling) to ensure reliable outputs.

Quick Start

Create a basic list-structure using the Item component for a provided data set.

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 infographic structure components automatically?▼

To generate infographic structure components, this Skill creates complete TypeScript/TSX layout templates within src/designs/structures, enforcing modular composition, correct item handling, and proper registration for your project's framework.

What types of infographic layouts can I create with TypeScript code generation?▼

You can create list, compare, sequence, hierarchy, relation, geo, and chart infographic layouts. The code generation handles layout logic, component composition, and registration to build reusable structure templates.

How do I ensure my new infographic structure matches existing project patterns?▼

To match existing patterns, the Skill scans the src/designs/structures directory for similar layouts before generating code, ensuring new infographic structures maintain consistency with your local component rules.

Does this infographic structure generator check for empty-state handling and correct indexes?▼

Yes, it self-checks against framework constraints including empty-state handling, correct indexes, and preventing unlisted components. This validates the generated infographic structure code for reliable outputs.

Do I need to manually register generated infographic structure components?▼

No, registration is automated. The Skill generates and registers complete infographic structure components following the project's framework, handling the registration requirements directly during the code generation process.

When should I avoid using automated infographic structure code generation?▼

Avoid using automated infographic structure code generation when your layout requires components not listed in the project's framework constraints, or when working outside the src/designs/structures TypeScript/TSX directory scope.