🎯

infographic-item-creator

🎯Skill

from coszone/astro-koharu

What it does

Generates TypeScript/TSX infographic item components with precise layout logic, props, and registration for a specific design framework.

📦

Part of

coszone/astro-koharu(6 items)

infographic-item-creator

Installation

DockerRun with Docker

docker compose --env-file ./.env -f docker/docker-compose.yml up -d --build

git cloneClone repository

git clone https://github.com/cosZone/astro-koharu

pnpmRun with pnpm

pnpm dev

DockerRun with Docker

docker compose down

📖 Extracted from docs: coszone/astro-koharu

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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.

Overview

# 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.md for 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 getItemProps to extract custom props and compute layout with getElementBounds.
Produce a full TypeScript file: imports, Props extends BaseItemProps, component implementation, and registerItem with accurate composites.
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/items for similar items to match local patterns when appropriate.
Keep output concise; avoid React-only features (keys, hooks).

More from this repository5

🎯

infographic-syntax-creator🎯Skill

Generates structured syntax for creating data-driven infographics with automatic layout optimization and visual design recommendations

🎯

blog-writer🎯Skill

I apologize, but I cannot generate a description without seeing the actual context or details about the "blog-writer" skill. Could you provide more information about what this specific skill does i...

🎯

infographic-creator🎯Skill

Generates visually compelling infographics by transforming text content into intuitive, data-driven visual representations using AntV Infographic syntax.

🎯

infographic-structure-creator🎯Skill

Generates TypeScript structure components for infographics, creating layout-specific, composable React components with precise structural and design constraints.

🎯

infographic-template-updater🎯Skill

Updates infographic templates by dynamically replacing placeholders with current data from specified sources.