skills.rest
zhuxingwan
zhuxingwanCOMMUNITY
Explore all skills by this author →
GitHub

infographic-item-generator

Generate TypeScript Item components for the infographic framework.

1|2|Updated Jan 2, 2026
Search Tags:#typescript#registry#generate#design-system#infographic#item-component
One-click install
npx skills add https://github.com/zhuxingwan/Infographic --skill infographic-item-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-item-generator
Source: https://github.com/zhuxingwan/Infographic/tree/main/.skills/infographic-item-generator
Command: npx skills add https://github.com/zhuxingwan/Infographic --skill infographic-item-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate fully-formed TypeScript Item components for the infographic framework, following the project's item rules, layout constraints, and registration requirements.

Core Features & Use Cases

  • Generate complete TypeScript Item components for the infographic framework, adhering to item design rules, props extraction, and registration with composites.
  • Use when designing or modifying data item visuals, layout logic, or the item registry in src/designs/items.
  • Example: derive a component from a datum schema and registered Item composites to render a data item in an infographic.

Quick Start

Run the infographic item generator to create a complete TypeScript Item component for the target dataset.

Frequently Asked Questions about infographic-item-generator

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

FAQPage Schema
How do I generate TypeScript components for an infographic design system?▼

To generate TypeScript infographic item components, you need a tool that automatically derives fully-formed components from your dataset schema, enforcing design system rules and layout constraints to produce ready-to-register visual items.

What are the requirements for registering item composites in a TypeScript infographic framework?▼

Registering item composites requires calling registerItem with the correct composites, extracting properties via getItemProps, and calculating layout dimensions using getElementBounds to ensure the infographic item adheres to framework rules.

Can I automatically create data item visuals from a schema for an infographic framework?▼

Yes, you can automatically generate data item visuals by deriving a complete TypeScript component from a datum schema and registered composites, ensuring the output renders correctly within the infographic's layout logic.

How does getElementBounds work when building infographic item components?▼

getElementBounds calculates the spatial layout boundaries for infographic item components, ensuring that the generated TypeScript visual elements are correctly positioned and conform to the design system's layout constraints.

What is the best way to modify data item layout logic in a TypeScript infographic project?▼

The best way to modify data item layout logic is to update the TypeScript Item components within the src/designs/items directory, ensuring changes adhere togetItemProps extraction and composite registration rules.

Related Skills

Explore More Software Engineering Skills→
zhangdszqzhangdszq
1

infographic-structure-creator

Generate and register TypeScript/TSX infographic structure components in src/designs/structures.

Community
Advanced
JamesFincherJamesFincher

baoyu-infographic

Generates infographic images from user-provided content and chosen layout/style combinations.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

bold

Generate component-level design rules for bold, accessible UI interfaces.

Community
Intermediate
antvisantvis
5.7k

infographic-item-creator

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

Official
Advanced