skills.rest
antvis
antvisOFFICIAL
Explore all skills by this author →
WebsiteGitHub

infographic-item-creator

Generate TypeScript Item component code with registerItem composites for the infographic framework.

5.7k|442|Updated Sep 11, 2025
Search Tags:#generate#references#infographic#TSX#getItemProps#Item component#registerItem
One-click install
npx skills add https://github.com/antvis/Infographic --skill infographic-item-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-item-creator
Source: https://github.com/antvis/Infographic/tree/main/.skills/infographic-item-creator
Command: npx skills add https://github.com/antvis/Infographic --skill infographic-item-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill streamlines the creation and updating of infographic Item components for this repository, ensuring consistency with internal conventions for props, composites, and TypeScript/TSX structure.

Core Features & Use Cases

  • Generate complete Item component code for the infographic framework, following the local patterns in src/designs/items (ItemIcon, ItemLabel, ItemDesc, ItemValue) and registration via registerItem.
  • Read guidance from references/item-prompt.md to apply the framework rules, clarify minimal requirements, and extract custom props using getItemProps.
  • Use cases include designing new items, updating visuals or layout logic, or registering composites across multiple items in the project.

Quick Start

Run the infographic-item-creator to generate or update an Item component for a specified datum in src/designs/items.

Frequently Asked Questions about infographic-item-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I auto-generate infographic Item components in TSX?▼

You can auto-generate infographic Item components in TSX by running the creator to read local patterns in src/designs/items and produce complete TypeScript files with proper registerItem integration.

How does getItemProps extract custom props for infographic items?▼

The getItemProps function extracts custom props by reading guidance from references/item-prompt.md, applying framework rules, and clarifying minimal requirements for the infographic item.

What is the best way to register composites across multiple infographic items?▼

To register composites across multiple infographic items, the generator produces a final TypeScript file along with a registerItem call that specifies composites to ensure proper framework integration.

Can I update layout logic and visuals for existing data items in the infographic framework?▼

Yes, you can update layout logic and visuals for existing data items by running the generator to apply local patterns like ItemIcon, ItemLabel, ItemDesc, and ItemValue.

Do I need external dependencies to generate TSX Item components for infographics?▼

No external dependencies are required to generate TSX Item components for infographics, as the skill relies on internal project rules and local patterns within the repository.

Why are my generated infographic items not matching internal conventions?▼

Generated infographic items may miss internal conventions if the guidance in references/item-prompt.md is not properly applied to extract props and specify composites via registerItem.

Related Skills

Explore More Design & Creative Skills→
TETRA2000TETRA2000

create-component

Generate React TSX components with Storybook stories from natural language descriptions.

Community
Advanced
zhuxingwanzhuxingwan
1

infographic-item-generator

Generate TypeScript Item components for the infographic framework.

Community
Advanced
twwchtwwch
68

infographic-item-creator

Generate TypeScript infographic Item components with registerItem integration.

Community
Intermediate
zhangdszqzhangdszq
1

infographic-item-creator

Generates TypeScript Item components for the infographic framework.

Community
Advanced