infographic-structure-creator_skill

Overview

This skill generates or updates TypeScript/TSX Structure components for the infographic framework. It creates complete, runnable component files that follow the project's component rules, layout constraints, and registration patterns. Use it to implement new list/compare/sequence/hierarchy/relation/geo/chart structure layouts or to modify existing ones.

How this skill works

The skill inspects requested structure requirements (category, layout direction, depth, add/remove controls) and scans the repo for local structure patterns to match conventions. It computes element layout using getElementBounds, selects Item vs Items composition, assembles decor under ItemsGroup, and emits a full TypeScript file with imports, Props extending BaseStructureProps, component implementation, and registerStructure with correct composites. It performs a self-check against framework constraints to avoid unlisted components and invalid attributes.

When to use it

• Creating a new structure layout (list, sequence, compare, hierarchy, relation, geo, chart).
• Updating an existing structure to change layout direction, depth, or controls.
• Implementing layout logic based on element bounds and composition rules.
• Adding empty-state handling or decor/enhancement under ItemsGroup.
• Registering a new structure so it becomes available to the framework.

Best practices

• Clarify minimal requirements before coding: category, direction, depth, and button needs.
• Match local file patterns in src/designs/structures to ensure consistent imports and naming.
• Use getElementBounds to compute precise item sizes and positions rather than hard-coded values.
• Prefer Items vs Item selection based on whether multiple content blocks or single items are needed.
• Include empty-state rendering and safe defaults; avoid using unlisted components or forbidden SVG attributes.
• Register the structure with accurate composites and maintain correct index ordering.

Example use cases

• Create a vertical sequence structure with numbered steps and optional add/remove buttons.
• Build a comparison layout that composes two ItemsGroups with aligned headers and icon decor.
• Implement a hierarchical tree structure with recursive Items and connector decor under ItemsGroup.
• Modify an existing chart structure to change layout direction and update composite registration.
• Add empty-state visuals and placeholder Items when a structure receives no data.