infographic-item-creator

Generate TypeScript infographic Item components with registerItem integration.

68|5|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/twwch/OpenSkills --skill infographic-item-creator-twwch
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: infographic-item-creator
Source: https://github.com/twwch/OpenSkills/tree/main/examples/infographic-skills/infographic-item-creator
Command: npx skills add https://github.com/twwch/OpenSkills --skill infographic-item-creator-twwch

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate consistent infographic Item components from design prompts and references, reducing manual coding and ensuring adherence to the framework's rules.

Core Features & Use Cases

  • Generate a complete Item component in TypeScript/TSX for the infographic framework, following item rules, layout constraints, and registration requirements.
  • Reads guidance from references/item-prompt.md to apply framework standards and produce correct composites (ItemLabel, ItemDesc, ItemValue, ItemIcon, Illus).
  • Outputs a standalone TS file with imports, props, component implementation, and a registerItem call, ready for integration into the design system.

Quick Start

Provide a datum and request an Item component generation for your infographic design.

Frequently Asked Questions about infographic-item-creator

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

FAQPage Schema
How do I generate infographic item components in TypeScript automatically?

To generate infographic item components in TypeScript automatically, you provide a datum and a design prompt. The tool then reads framework references to output a complete TSX file with imports, props, and the component implementation.

What is the best way to create consistent infographic design system items?

The best way to create consistent infographic design system items is by enforcing framework standards through reference prompts. This ensures correct label, desc, value, and icon composites are generated uniformly every time.

Do I need to manually call registerItem after generating an infographic component?

No, you do not need to manually call registerItem after generating an infographic component. The generated TS file automatically includes the registerItem integration alongside the exports and component logic.

Can I use this to generate TSX composites for labels, values, and icons?

Yes, you can use this to generate TSX composites for labels, values, and icons. It produces composites for ItemLabel, ItemDesc, ItemValue, ItemIcon, and Illus based on your provided design prompt.

What are the limitations of automatic infographic item generation?

A limitation of automatic infographic item generation is that it operates strictly within design-time generation scope. You must provide the datum and prompt, and the output is limited to the specific framework rules defined in its reference files.