Claude-skill-registry infographic-item-generator

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.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/infographic-item-generator" ~/.claude/skills/majiayu000-claude-skill-registry-infographic-item-generator && rm -rf "$T"

manifest: skills/data/infographic-item-generator/SKILL.md

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

Read
```
references/item-prompt.md
```
for the full framework rules, allowed components, and output requirements.
Clarify minimal requirements if missing: desired visuals, required fields (icon/label/value/desc/illus), sizing, and alignment needs.
Use
```
getItemProps
```
to extract custom props and compute layout with
```
getElementBounds
```
.
Produce a full TypeScript file: imports, Props extends BaseItemProps, component implementation, and
```
registerItem
```
with accurate
```
composites
```
.
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).