infographic-structure-generator
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.
When & Why to Use This Skill
The Infographic Structure Generator is a specialized Claude skill designed to automate the development of complex infographic components using TypeScript and TSX. It streamlines the creation of diverse layout structures—including hierarchical, sequential, and geographic models—by generating precise layout logic, component compositions, and registration code that adheres to strict project-specific architectural constraints.
Use Cases
- Rapidly prototyping new infographic layouts such as comparison charts, process sequences, or organizational hierarchies within a TypeScript framework.
- Updating existing visual structures to modify layout logic, adjust component depth, or integrate new interactive elements while ensuring framework compliance.
- Automating the boilerplate code for component registration and property definitions to reduce manual errors and maintain codebase consistency.
- Generating specialized geographic or data-driven chart structures by computing layout bounds and planning decorative elements programmatically.
| name | infographic-structure-generator |
|---|---|
| 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 Generator
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.mdfor 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
registerStructurewith accuratecomposites. - 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/structuresfor similar existing structures to match local patterns when appropriate. - Keep output concise; avoid React-only features (keys, hooks).