home / skills / antvis / infographic / infographic-item-creator

infographic-item-creator skill

safe

This skill generates complete TypeScript infographic item components and registration logic for the repository, ensuring correct layout and compliance with

npx playbooks add skill antvis/infographic --skill infographic-item-creator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.3 KB

---
name: infographic-item-creator
description: Generate or update infographic Item components for this repo (TypeScript/TSX in src/designs/items). Use when asked to design, implement, or modify data item visuals, layout logic, or registerItem composites.
---

# Infographic Item Generator

## Overview

Generate complete Item component code for the infographic framework, following the project's item rules, layout constraints, and registration requirements.

## Workflow

1. Read `references/item-prompt.md` for the full framework rules, allowed components, and output requirements.
2. Clarify minimal requirements if missing: desired visuals, required fields (icon/label/value/desc/illus), sizing, and alignment needs.
3. Use `getItemProps` to extract custom props and compute layout with `getElementBounds`.
4. Produce a full TypeScript file: imports, Props extends BaseItemProps, component implementation, and `registerItem` with accurate `composites`.
5. Self-check against the constraints in the reference (no unlisted components, indexes passed to all wrapped components, correct conditional rendering).

## Notes

- Prefer scanning `src/designs/items` for similar items to match local patterns when appropriate.
- Keep output concise; avoid React-only features (keys, hooks).

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

FAQ

Will the generated file include imports and registerItem call?

Yes. The output is a complete TypeScript file with imports, Props definition, component implementation, and registerItem with composites.

How does it enforce allowed components and indexes?

It only uses components listed by the framework, includes conditional rendering checks, and ensures index props are passed to all wrapped components.