skills.rest
zhangdszq
zhangdszqCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

infographic-item-creator

Generates TypeScript Item components for the infographic framework.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Automatically generate complete Item components for the infographic framework, accelerating UI data-visualization development and ensuring consistency across designs.

Core Features & Use Cases

  • Generates TypeScript Item components that implement ItemIcon, ItemLabel, ItemDesc, ItemValue, Illus, and composite registrations.
  • Analyzes references/item-prompt.md to follow the framework rules and produce code that integrates with getItemProps and getElementBounds for responsive layouts.
  • Use Case: When starting a new infographic project, quickly scaffold item components that align with existing patterns and registries.

Quick Start

Provide a working item name and basic props to generate the TSX scaffold for the infographic item.

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 TypeScript infographic item components automatically?▼

You can generate TypeScript infographic item components automatically by providing a working item name and basic props. This scaffolds the TSX code, implementing ItemIcon, ItemLabel, ItemDesc, and ItemValue.

How do I create data-visualization items that support responsive layouts?▼

To create data-visualization items with responsive layouts, the generated components integrate with getItemProps and getElementBounds functions. This ensures your infographic items adapt correctly to varying UI constraints.

Can I use this to scaffold SVG illustrations for a design system?▼

Yes, you can scaffold SVG illustrations for a design system. The generated components include Illus support and ensure proper registration with composites to maintain framework consistency.

What is the best way to ensure new infographic items align with existing framework registries?▼

The best way to align new infographic items with existing registries is to analyze the item-prompt.md reference file. This ensures the generated code follows framework rules and composite registrations accurately.

Does this framework require manual updates for data-visualization items in src/designs/items?▼

No, it automates the building and updating of data-visualization items across src/designs/items. This accelerates UI development and ensures consistency across designs without manual code updates.

Related Skills

Explore More Design & Creative Skills→
twwchtwwch
68

infographic-item-creator

Generate TypeScript infographic Item components with registerItem integration.

Community
Intermediate
zhuxingwanzhuxingwan
1

infographic-item-generator

Generate TypeScript Item components for the infographic framework.

Community
Advanced
crazywoolacrazywoola
4

infographic-item-creator

Generate TypeScript Item component code with getItemProps and getElementBounds.

Community
Advanced
antvisantvis
5.7k

infographic-item-creator

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

Official
Advanced