mcpField
I
infographic-item-creator

infographic-item-creator

github.com/antvisDesign & UI7.0k132 installsUpdated 1w ago
Repository

About infographic-item-creator

A skill for generating complete TypeScript Item components for an infographic framework. It follows item-specific rules for props, layout, rendering, and registration.

Key features

  1. 01Generates full Item component code
  2. 02Extracts custom props with getItemProps
  3. 03Plans layout using element bounds
  4. 04Includes imports, props, and registration
  5. 05Checks indexes and conditional rendering

Use cases

  1. 01Creating a custom infographic item visual
  2. 02Implementing icon, label, value, or description fields
  3. 03Adding a registered Item component to a project

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/antvis/infographic --skill infographic-item-creator

After installing, type/infographic-item-creatorin Claude Code to confirm it loaded.

Bundled filesreferences/item-prompt.md

Details

From the project README

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

Comments

Markdown supported