skills.rest
crazywoola
crazywoolaCOMMUNITY
Explore all skills by this author →
𝕏@crazyphageGitHub

infographic-structure-creator

Generate TS/TSX infographic structure components from a defined schema.

4|Updated Nov 25, 2025
Search Tags:#typescript#components#structure#registry#generate#infographic#tsx
One-click install
npx skills add https://github.com/crazywoola/dify-x --skill infographic-structure-creator-crazywoola
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-structure-creator
Source: https://github.com/crazywoola/dify-x/tree/main/.claude/skills/infographic-structure-creator
Command: npx skills add https://github.com/crazywoola/dify-x --skill infographic-structure-creator-crazywoola

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 TS/TSX infographic structure components from a defined schema for consistent UI architectures.
  • Register structures with a composite mapping to title, item, and optional illus, enabling scalable diagram tooling across projects.
  • Extendable workflow with references guidance to align with project conventions.

Quick Start

Ask me to generate a complete TS/TSX infographic structure component following the defined schema.

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 TSX infographic structures from a defined schema?▼

Generate complete TSX infographic structures by applying a defined schema to produce TypeScript components with layout logic, composition, and registration for list, compare, sequence, hierarchy, geo, and chart layouts.

What is the process for registering infographic components with composite mappings?▼

Registering infographic components uses registerStructure to map structures to title, item, and optional illus composites, enabling scalable diagram tooling and consistent UI architectures across projects.

Can I use this to create layout structures for comparison and hierarchy diagrams in TypeScript?▼

Yes, the generator supports creating TypeScript layout structures for comparison and hierarchy diagrams, covering list, sequence, relation, geo, and chart types with proper typing and component composition.

What constraints apply when generating TypeScript infographic components?▼

Constraints include mandatory frontmatter, no unsupported components, and proper TypeScript typing. Generated files must import specified project atoms and use getElementBounds to function correctly within the defined schema.

How do I add optional assets and illustrations to a TSX infographic component?▼

Add optional assets and illustrations by defining them within the structure schema for illus composition. The generator incorporates these optional assets alongside title and item composites during the TSX file creation process.

Related Skills

Explore More Software Engineering Skills→
crazywoolacrazywoola
4

infographic-item-creator

Generate TypeScript Item component code with getItemProps and getElementBounds.

Community
Advanced
antvisantvis
5.7k

infographic-structure-creator

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

Official
Advanced
twwchtwwch
68

infographic-structure-creator

Generate and register infographic structure components in TypeScript/TSX.

Community
Advanced
zhuxingwanzhuxingwan
1

infographic-item-generator

Generate TypeScript Item components for the infographic framework.

Community
Advanced