# Infographic Item Creator

> 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.

- Skill: `majiayu000/infographic-item-creator` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/infographic-item-creator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/infographic-item-creator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/infographic-item-creator

---


# 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).