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.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
skills listSkill Instructions
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).
More by antvis
View allG2 Legend Expert: Expert skill for G2 legend development - provides comprehensive knowledge about legend rendering implementation, component architecture, layout algorithms, and interaction handling. Use when implementing, customizing, or debugging legend functionality in G2 visualizations.
G2 Translation Guidelines: Guidelines for translating G2 documentation, including terminology consistency, hyperlink adjustments, and file naming conventions for multilingual documentation. Use when need to translate documents.
G2 Unit Testing Skills: Guidelines and best practices for writing unit tests in the G2 visualization library, covering directory structure, testing patterns, and implementation guidelines. Use when need to generate test.
Create beautiful infographics based on the given text content. Use this when users request creating infographics.