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.
$ 安裝
git clone https://github.com/antvis/Infographic /tmp/Infographic && cp -r /tmp/Infographic/.skills/infographic-item-creator ~/.claude/skills/Infographic// tip: Run this command in your terminal to install the skill
SKILL.md
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
- Read
references/item-prompt.mdfor 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
getItemPropsto extract custom props and compute layout withgetElementBounds. - Produce a full TypeScript file: imports, Props extends BaseItemProps, component implementation, and
registerItemwith accuratecomposites. - 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/itemsfor similar items to match local patterns when appropriate. - Keep output concise; avoid React-only features (keys, hooks).
Repository

antvis
Author
antvis/Infographic/.skills/infographic-item-creator
2.7k
Stars
172
Forks
Updated5d ago
Added6d ago