About infographic-structure-creator
A skill for generating complete TypeScript Structure components for an infographic framework. It follows the framework’s component, layout, and registration constraints.
Key features
- 01Generates full Structure component code
- 02Plans layouts using element bounds
- 03Supports Item and Items patterns
- 04Includes imports, props, and registration
- 05Checks component and empty-state constraints
Use cases
- 01Creating a structure for a new infographic layout
- 02Implementing a hierarchy or directional arrangement
- 03Adding registered Structure components to a project
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/infographic-structure-creatorin Claude Code to confirm it loaded.
Bundled filesreferences/structure-prompt.md
Details
From the project READMEInfographic Structure Creator
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).
Comments
Markdown supported