infographic-item-generator

Name: infographic-item-generator
Availability: InStock
Author: zhuxingwan

Generate TypeScript Item components for the infographic framework.

1|2|Updated Jan 2, 2026

Search Tags:#typescript #registry #generate #design-system #infographic #item-component

Ready to run

npx skills add https://github.com/zhuxingwan/Infographic --skill infographic-item-generator

💬 Prompt for ChatGPT / Claude Chat▼

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.