infographic-item-creator_skill

Overview

This skill generates or updates TypeScript/TSX Item components for the infographic framework. It produces complete, ready-to-add files under src/designs/items that follow the project's layout rules, allowed components, and registration format. The output is practical, minimal, and ready to compile with registerItem and correct composites.

How this skill works

The skill reads the item's requirements and extracts custom props with getItemProps, then computes element positions using getElementBounds. It assembles a Props interface extending BaseItemProps, implements the component with conditional rendering per allowed components, and registers the item with accurate composites. It self-checks for forbidden components and enforces passing indexes to wrapped components.

When to use it

• Create a new infographic Item component from a design brief
• Modify visuals, spacing, or conditional fields for an existing item
• Add or update registerItem composites and layout metadata
• Convert a design spec into a TypeScript/TSX file matching repo conventions
• Fix layout bugs related to getElementBounds or element indexing

Best practices

• Start by clarifying required fields (icon, label, value, desc, illus) and alignment needs
• Reuse patterns from existing items in src/designs/items to maintain consistency
• Always call getItemProps and getElementBounds to drive sizing and positions
• Pass index props to every wrapped component and avoid unlisted component types
• Keep the component file self-contained: imports, Props, component, export/registerItem

Example use cases

• Implement a compact KPI item with icon, value, and small description
• Create a two-column item with left icon and right stacked label/value/desc
• Update an item to show or hide illustration based on a prop flag
• Register a composite that groups header, content, and footer elements for layout tools