What does the Infographic Item Creator generate?

It generates complete TypeScript (.tsx) files for infographic items, including props extending BaseItemProps, layout logic, and the necessary registerItem configuration.

Is this skill specific to the AntV Infographic repository?

Yes, it is tailored specifically for the AntV Infographic framework to ensure generated code matches the 'src/designs/items' patterns and requirements.

Does it support custom icons and labels?

Yes, it can configure visuals including icons, labels, values, descriptions, and illustrations based on the framework's allowed component list.

Can I use standard React hooks like useState in these items?

No, the skill follows framework-specific rules that prioritize performance; it avoids React-only features like hooks and keys to remain compatible with the rendering engine.

How does it handle component positioning?

The skill utilizes the framework's internal 'getElementBounds' and 'getItemProps' methods to calculate dimensions and handle layout logic automatically.

Infographic Item Creator

Name: Infographic Item Creator
Author: antvis

byantvis

•

4,652

•

디자인 도구

Generates and updates specialized infographic item components using TypeScript and TSX for the AntV Infographic framework.

The Infographic Item Creator skill empowers Claude to architect, implement, and refine custom visual components within the AntV Infographic framework. By adhering to specific project rules and layout constraints, it automates the creation of complex item visuals—including labels, icons, and values—while ensuring seamless integration through the framework's registration system. This skill is essential for developers looking to extend their infographic libraries with custom layouts and composite items while maintaining strict adherence to the framework's performance-oriented rendering patterns.

주요 기능

01Framework-compliant layout calculation using getElementBounds

02Automated TypeScript/TSX component generation for infographic items

03Smart prop extraction and custom layout logic implementation

04Pattern matching against existing repository design systems

054,652 GitHub stars

06Automatic item registration with accurate composite mapping

사용 사례

01Rapidly prototyping new visual design systems within the AntV ecosystem

02Developing custom data visualization components for automated infographic reports

03Updating legacy infographic items to support new layout constraints or data fields

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add antvis/infographic infographic-item-creator

For use in Claude.ai and ChatGPT

Download Skill