Agent Skills › antvis/Infographic › infographic-item-creator

infographic-item-creator

GitHub

用于生成或更新TypeScript/TSX格式的Infographic Item组件代码，遵循框架规则、布局约束及注册要求。适用于设计、实现或修改数据项可视化、布局逻辑及复合组件注册场景。

skills/infographic-item-creator/SKILL.md antvis/Infographic

Trigger Scenarios

需要生成Infographic Item组件代码修改现有Item组件的视觉或布局为Infographic框架注册新的Item复合组件

Install

npx skills add antvis/Infographic --skill infographic-item-creator -g -y

More Options

Use without installing

npx skills use antvis/Infographic@infographic-item-creator

指定 Agent (Claude Code)

npx skills add antvis/Infographic --skill infographic-item-creator -a claude-code -g -y

安装 repo 全部 skill

npx skills add antvis/Infographic --all -g -y

预览 repo 内 skill

npx skills add antvis/Infographic --list

SKILL.md

Frontmatter

{
    "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.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).