Vibe Index
🎯

infographic-creator

🎯Skill

from coszone/astro-koharu

VibeIndex|
What it does

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

πŸ“¦

Part of

coszone/astro-koharu(6 items)

infographic-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 GitHubBack to Skills

Skill Details

SKILL.md

Create beautiful infographics based on the given text content. Use this when users request creating infographics.

Overview

An infographic (Infographic) transforms data, information, and knowledge into perceivable visual language. It combines visual design with data visualization, using intuitive symbols to compress complex information and help audiences quickly understand and remember key points.

Infographic = Information Structure + Visual Expression

This is a task that utilizes [AntV Infographic](https://infographic.antv.vision/) to create visual infographics.

Before you start the task, you need to understand the AntV Infographic Syntax specification, including template lists, data structures, themes, and more.

SPECs

AntV Infographic Syntax

AntV Infographic Syntax is a mermaid-like DSL for describing infographic rendering configuration. It uses indentation to describe information, has strong robustness, and makes it easy to render infographics through AI streaming output. It mainly contains the following information:

  1. template: Use template to express text information structure.
  2. data: the infographic data, which contains title, desc, items, etc. The items is an array containing label, value, desc, icon, children, etc.
  3. theme: Theme contains palette, font, and other styling options.

e.g.:

```plain

infographic list-row-horizontal-icon-arrow

data

title Title

desc Description

items

- label Label

value 12.5

desc Explanation

icon mdi/rocket-launch

theme

palette #3b82f6 #8b5cf6 #f97316

```

The Syntax

  • The first line starts with infographic , and the template is selected from the list below (the _Available Templates_ section).
  • Use blocks to describe data / theme, with two-space indentation
  • Key-value pairs are expressed as "key value", and arrays are expressed as "-" items
  • The icon value is provided directly with keywords or icon names (such as mdi/chart-line)
  • data should contain title/desc/items (which can be omitted according to semantics)
  • data.items should contain label(string)/value(number)/desc(string)/icon(string)/children(object), where children represents the hierarchical structure
  • For comparison templates (template names starting with compare-), construct exactly two root nodes and place every comparison item under them as children to keep the hierarchy clear
  • For hierarchy-structure, data.items renders top-to-bottom (first item at the top) and supports up to 3 levels (root -> group -> item)
  • theme field is for customizing the theme of the infographic, including palette, font, etc.

e.g. dark theme with custom palette:

```plain

infographic list-row-simple-horizontal-arrow

theme dark

palette

- #61DDAA

- #F6BD16

- #F08BB4

data

items

- label Step 1

desc Start

- label Step 2

desc In Progress

- label Step 3

desc Complete

```

  • Use theme.base.text.font-family to specify fonts, such as the handwriting style '851tegakizatsu'
  • Use theme.stylize to select built-in styles and pass parameters

Common stylization types include:

- rough: Apply hand-drawn style to make graphics look like they were drawn by hand.

- pattern: Apply pattern fill to add repeated pattern effects to graphics.

- linear-gradient / radial-gradient: Apply gradient fill to add linear or radial gradient effects to graphics.

e.g: Hand-drawn style (rough):

```plain

infographic list-row-simple-horizontal-arrow

theme

stylize rough

base

text

font-family 851tegakizatsu

data

items

- label Step 1

desc Start

- label Step 2

desc In Progress

- label Step 3

desc Complete

```

Typescript definition for data field:

```ts

interface Data {

title?: string;

desc?: string;

items: ItemDatum[];

[key: string]: any;

}

interface ItemDatum {

icon?: string;

label?: string;

desc?: string;

value?: number;

illus?: string;

children?: ItemDatum[];

[key: string]: any;

}

```

Icon and Illustration Resources

Icons (from Iconify):

- Format: /, e.g., mdi/rocket-launch

- Popular collections:

- mdi/* - Material Design Icons (most commonly used)

- fa/* - Font Awesome

- bi/* - Bootstrap Icons

- heroicons/* - Heroicons

- Browse at: https://icon-sets.iconify.design/

- Common icon examples:

- Tech: mdi/code-tags, mdi/database, mdi/api, mdi/cloud

- Business: mdi/chart-line, mdi/briefcase, mdi/currency-usd

- Process: mdi/check-circle, mdi/arrow-right, mdi/cog

- People: mdi/account, mdi/account-group, mdi/shield-account

Illustrations (from unDraw):

- Format: illustration filename (without .svg), e.g., coding

- Browse at: https://undraw.co/illustrations

- Common themes:

- Tech: coding, programmer, server, cloud-sync

- Business: business-plan, team-work, analytics

- Abstract: abstract, building-blocks, connection

- Note: Use sparingly as illustrations are larger and more detailed than icons

Usage Tips:

- For sequence- and list- templates β†’ use icon

- For larger illustration needs β†’ use illus

- Not all templates support both icon and illus - refer to template examples

Available Templates

  • sequence-zigzag-steps-underline-text
  • sequence-horizontal-zigzag-underline-text
  • sequence-horizontal-zigzag-simple-illus
  • sequence-circular-simple
  • sequence-filter-mesh-simple
  • sequence-mountain-underline-text
  • sequence-cylinders-3d-simple
  • sequence-color-snake-steps-horizontal-icon-line
  • sequence-pyramid-simple
  • sequence-funnel-simple
  • sequence-roadmap-vertical-simple
  • sequence-roadmap-vertical-plain-text
  • sequence-zigzag-pucks-3d-simple
  • sequence-ascending-steps
  • sequence-ascending-stairs-3d-underline-text
  • sequence-snake-steps-compact-card
  • sequence-snake-steps-underline-text
  • sequence-snake-steps-simple
  • sequence-stairs-front-compact-card
  • sequence-stairs-front-pill-badge
  • sequence-timeline-simple
  • sequence-timeline-rounded-rect-node
  • sequence-timeline-simple-illus
  • compare-binary-horizontal-simple-fold
  • compare-hierarchy-left-right-circle-node-pill-badge
  • compare-swot
  • quadrant-quarter-simple-card
  • quadrant-quarter-circular
  • quadrant-simple-illus
  • relation-circle-icon-badge
  • relation-circle-circular-progress
  • compare-binary-horizontal-badge-card-arrow
  • compare-binary-horizontal-underline-text-vs
  • hierarchy-tree-tech-style-capsule-item
  • hierarchy-tree-curved-line-rounded-rect-node
  • hierarchy-tree-tech-style-badge-card
  • hierarchy-structure
  • chart-column-simple
  • chart-bar-plain-text
  • chart-line-plain-text
  • chart-pie-plain-text
  • chart-pie-compact-card
  • chart-pie-donut-plain-text
  • chart-pie-donut-pill-badge
  • chart-wordcloud
  • list-grid-badge-card
  • list-grid-candy-card-lite
  • list-grid-ribbon-card
  • list-row-horizontal-icon-arrow
  • list-row-simple-illus
  • list-sector-plain-text
  • list-column-done-list
  • list-column-vertical-icon-arrow
  • list-column-simple-vertical-arrow
  • list-zigzag-down-compact-card
  • list-zigzag-down-simple
  • list-zigzag-up-compact-card
  • list-zigzag-up-simple

Template Selection Guidelines:

  • For strict sequential order: processes/steps/development trends β†’ sequence-* series

- Timeline β†’ sequence-timeline-*

- Staircase diagram β†’ sequence-stairs-*

- Roadmap β†’ sequence-roadmap-vertical-*

- Zigzag steps β†’ sequence-zigzag-*

- Circular progress β†’ sequence-circular-simple

- Color snake steps β†’ sequence-color-snake-steps-*

- Pyramid diagram β†’ sequence-pyramid-simple

  • For listing viewpoints β†’ list-row- series or list-column- series
  • For comparative analysis (comparing pros and cons of two parties) β†’ compare-binary-* series
  • For SWOT analysis β†’ compare-swot
  • For hierarchical structure (tree diagram) β†’ hierarchy-tree-*
  • For data charts β†’ chart-* series
  • For quadrant analysis β†’ quadrant-* series
  • For grid lists (bullet points) β†’ list-grid-* series
  • For relationship display β†’ relation-circle-*
  • For word cloud β†’ chart-wordcloud

Example

Draw an information graph of the Internet technology evolution

```plain

infographic list-row-horizontal-icon-arrow

data

title Internet Technology Evolution

desc From Web 1.0 to AI era, key milestones

items

- time 1991

label Web 1.0

desc Tim Berners-Lee published the first website, opening the Internet era

icon mdi/web

- time 2004

label Web 2.0

desc Social media and user-generated content become mainstream

icon mdi/account-multiple

- time 2007

label Mobile

desc iPhone released, smartphone changes the world

icon mdi/cellphone

- time 2015

label Cloud Native

desc Containerization and microservices architecture are widely used

icon mdi/cloud

- time 2020

label Low Code

desc Visual development lowers the technology threshold

icon mdi/application-brackets

- time 2023

label AI Large Model

desc ChatGPT ignites the generative AI revolution

icon mdi/brain

```

Example 2: Using Illustrations

```plain

infographic sequence-horizontal-zigzag-simple-illus

data

title Product Development Phases

desc Key stages in our development process

items

- label Research

desc Understanding user needs

illus user-research

- label Design

desc Creating user experience

illus design-thinking

- label Development

desc Building the product

illus coding

- label Launch

desc Going to market

illus launch-day

```

Creation Process

Step 1: Understanding User Requirements

Before creating the infographic, it is important to understand the user's requirements and the information they want to present. This will help in defining the template and the data structure.

If the user provides a clear and concise description of the information they want to present, break down the information into a clear and concise structure.

Otherwise, ask the user for clarification (e.g., "Please provide a clear and concise description of the information you want to present.", "Which template would you prefer to use?")

  • Extract key information structure (title, description, items, etc).
  • Identify the required data fields (e.g., title, description, items, labels, values, icons, etc.).
  • Select an appropriate template.
  • Use the AntV Infographic Syntax to describe the content of the infographic {syntax}.

CRITICAL NOTE: Must respect the language of the user's input content. e.g. if the user's input content is in Chinese, the text content in infographic syntax must be in Chinese.

Step 2: Rendering the Infographic

Once you have the final AntV Infographic Syntax, you can generate the complete infographic HTML file by following these steps:

  1. Create a complete HTML file with the following structure:

- DOCTYPE and HTML meta tags (charset: utf-8)

- Title: {title} - Infographic

- Include AntV Infographic library script: https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js

- Add a resource loader script that handles icon loading from Iconify and illustration loading from unDraw

- Create a container div with id container where the infographic will render

- Initialize the Infographic instance with width: '100%' and height: '100%'

- Replace the placeholder {title} with the actual title

- Replace the placeholder {syntax} with the actual AntV Infographic Syntax

- Include export functionality that allows users to download the infographic as SVG const svgDataUrl = await infographic.toDataURL({ type: 'svg' });

The Html template you can follow:

```html

```

  1. Write the HTML file named -infographic.html</code> using the Write tool</span></li></ol><ol class="mb-4 ml-6 space-y-1 list-decimal"><li class="text-zinc-600 dark:text-zinc-400"><span>Display to the user:</span></li></ol><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> - The generated file path with instruction: "Open this file directly in a browser to view and save the SVG"</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> - Display your output syntax with instruction: "If you need to adjust the template/colors/content, just let me know"</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><strong>Note:</strong> The HTML file must include:</span></p><ul class="mb-4 ml-6 space-y-1 list-disc"><li class="text-zinc-600 dark:text-zinc-400"><span>Complete resource loader for handling icon and illustration assets from external sources</span></li><li class="text-zinc-600 dark:text-zinc-400"><span>SVG export functionality via the export button</span></li><li class="text-zinc-600 dark:text-zinc-400"><span>Responsive container that takes 100% width and height</span></li><li class="text-zinc-600 dark:text-zinc-400"><span>Proper error handling for failed resource loads</span></li></ul></div></div></div></div></div><div class="mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800"><h2 class="mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white"><span>More from this repository</span><span class="rounded-full bg-violet-100 px-2 py-0.5 text-sm font-medium text-violet-700 dark:bg-violet-900/50 dark:text-violet-300">5</span></h2><div class="grid gap-3 sm:grid-cols-2"><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/coszone/astro-koharu/infographic-syntax-creator"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">infographic-syntax-creator</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Generates structured syntax for creating data-driven infographics with automatic layout optimization and visual design recommendations</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/coszone/astro-koharu/infographic-structure-creator"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">infographic-structure-creator</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Generates TypeScript structure components for infographics, creating layout-specific, composable React components with precise structural and design constraints.</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/coszone/astro-koharu/infographic-item-creator"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">infographic-item-creator</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Generates TypeScript/TSX infographic item components with precise layout logic, props, and registration for a specific design framework.</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/coszone/astro-koharu/blog-writer"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">blog-writer</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">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...</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/coszone/astro-koharu/infographic-template-updater"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">infographic-template-updater</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Updates infographic templates by dynamically replacing placeholders with current data from specified sources.</p></div></a></div></div></div><!--$--><!--/$--></main><footer class="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900"><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-8 md:grid-cols-4"><div class="md:col-span-1"><a class="flex items-center" href="/"><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="h-8 w-auto dark:hidden" style="color:transparent" src="/logo.png?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe"/><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="hidden h-8 w-auto dark:block" style="color:transparent" src="/logo-dark.png?v=3&dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe"/></a><p class="mt-4 text-sm text-zinc-600 dark:text-zinc-400">Everything you need for vibe coding. Real-time updates on skills, plugins, MCP servers, and marketplaces.</p></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Resources</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/skills">Skills</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/mcp">MCP Servers</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/marketplaces">Marketplaces</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/plugins">Plugins</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Support</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/about">About Us</a></li><li><a href="mailto:admin@vibeindex.ai" class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white">Contact Us</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/feedback">Feedback</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/activity">Sync Activity</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Legal</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/privacy">Privacy Policy</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/terms">Terms of Service</a></li></ul></div></div><div class="mt-8 border-t border-zinc-200 pt-8 dark:border-zinc-800"><p class="text-center text-sm text-zinc-500 dark:text-zinc-500">Β© <!-- -->2026<!-- --> <!-- -->Vibe Index<!-- -->. <!-- -->All rights reserved.<!-- --> <!-- -->Operated by<!-- --> <a href="https://jolab.ai" target="_blank" rel="noopener noreferrer" class="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">JoLab</a></p></div></div></footer><script src="/_next/static/chunks/74f2567fe670fe18.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[2355,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"Analytics\"]\n3:I[44636,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"Providers\"]\n4:I[3374,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n5:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n7:I[22016,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"\"]\n8:I[58234,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\na:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"OutletBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"ViewportBoundary\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"MetadataBoundary\"]\n11:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n:HL[\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"style\"]\n:HL[\"/_next/static/chunks/57db8c2e79c90b8c.css?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"jPO-BujWrcnKty2IaOdQo\",\"c\":[\"\",\"skills\",\"coszone\",\"astro-koharu\",\"infographic-creator\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"skills\",{\"children\":[[\"owner\",\"coszone\",\"d\"],{\"children\":[[\"repo\",\"astro-koharu\",\"d\"],{\"children\":[[\"skill\",\"infographic-creator\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/57db8c2e79c90b8c.css?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased min-h-screen flex flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex min-h-[60vh] flex-col items-center justify-center px-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-6xl font-bold text-zinc-900 dark:text-white\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-4 text-xl font-semibold text-zinc-700 dark:text-zinc-300\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-500 dark:text-zinc-400\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"$L7\",null,{\"href\":\"/\",\"className\":\"mt-8 inline-flex items-center rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":\"Go Home\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L8\",null,{}]]}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"12:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"IconMark\"]\nc:null\n"])</script><script>self.__next_f.push([1,"10:[[\"$\",\"title\",\"0\",{\"children\":\"infographic-creator | Vibe Index\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generates visually compelling infographics by transforming text content into intuitive, data-driven visual representations using AntV Infographic syntax.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Vibe Index Team\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"vibe coding, vibecoding, AI coding, Claude Code, MCP servers, AI skills, AI plugins, AI development, AI assistants, Claude, cursor, windsurf, aider, cline\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"Vibe Index - The Ultimate Vibe Coding Directory\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:site_name\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:width\",\"content\":\"512\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:height\",\"content\":\"512\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"Vibe Index Logo\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale:alternate\",\"content\":\"ko_KR\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Vibe Index - Vibe Coding Directory\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/icon.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L12\",\"28\",{}]]\n"])</script><script>self.__next_f.push([1,"13:I[74533,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"FavoriteButton\"]\n14:I[54371,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n15:I[38848,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"mb-6\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex items-center gap-2 text-sm\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300\",\"children\":\"Skills\"}]}],[\"$\",\"li\",null,{\"className\":\"text-zinc-400\",\"children\":\"/\"}],[\"$\",\"li\",null,{\"className\":\"text-zinc-900 dark:text-white\",\"children\":\"infographic-creator\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-4\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-5xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 flex-wrap\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold text-zinc-900 dark:text-white\",\"children\":\"infographic-creator\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2.5 py-1 text-sm \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}],[\"$\",\"$L13\",null,{\"resourceId\":\"6492a5d1-5189-4c1d-8b3d-c29f257a05d8\",\"size\":\"sm\"}],false]}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-600 dark:text-zinc-400\",\"children\":[\"from \",\"coszone\",\"/\",\"astro-koharu\"]}]]}]]}],[\"$\",\"$L14\",null,{\"description\":\"Generates visually compelling infographics by transforming text content into intuitive, data-driven visual representations using AntV Infographic syntax.\",\"descriptionKo\":\"ν…μŠ€νŠΈ μ½˜ν…μΈ λ₯Ό AntV Infographic 문법을 ν™œμš©ν•΄ 직관적이고 데이터 기반의 μ‹œκ°μ  ν‘œν˜„μœΌλ‘œ λ³€ν™˜ν•˜μ—¬ 맀λ ₯적인 μΈν¬κ·Έλž˜ν”½μ„ μƒμ„±ν•©λ‹ˆλ‹€.\",\"resourceId\":\"6492a5d1-5189-4c1d-8b3d-c29f257a05d8\",\"resourceName\":\"infographic-creator\",\"resourceType\":\"skill\",\"descriptionType\":\"ai\"}],null,null,[\"$\",\"$L7\",null,{\"href\":\"/collection/coszone/astro-koharu\",\"className\":\"mt-4 flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 transition-all hover:border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600 dark:hover:bg-zinc-800\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-2xl\",\"children\":\"πŸ“¦\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Part of\"}],[\"$\",\"p\",null,{\"className\":\"font-semibold text-zinc-900 dark:text-white\",\"children\":[\"coszone\",\"/\",\"astro-koharu\",[\"$\",\"span\",null,{\"className\":\"ml-2 text-sm font-normal text-zinc-500 dark:text-zinc-400\",\"children\":[\"(\",6,\" \",\"items\",\")\"]}]]}]]}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5 text-zinc-400\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M9 5l7 7-7 7\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",\"infographic-creator\",{\"onClick\":\"$undefined\",\"className\":\"inline-flex items-center rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 \",\"children\":\"infographic-creator\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Installation\"}],[\"$\",\"$L15\",null,{\"installGuide\":{\"found\":true,\"commands\":[{\"label\":\"Docker\",\"command\":\"docker compose --env-file ./.env -f docker/docker-compose.yml up -d --build\",\"description\":\"Run with Docker\",\"type\":\"docker\"},{\"label\":\"git clone\",\"command\":\"git clone https://github.com/cosZone/astro-koharu\",\"description\":\"Clone repository\",\"type\":\"git-clone\"},{\"label\":\"pnpm\",\"command\":\"pnpm dev\",\"description\":\"Run with pnpm\",\"type\":\"npm\"},{\"label\":\"Docker\",\"command\":\"docker compose down\",\"description\":\"Run with Docker\",\"type\":\"docker\"}],\"jsonConfig\":\"$undefined\",\"rawSection\":\"$undefined\"},\"githubUrl\":\"https://github.com/coszone/astro-koharu\",\"owner\":\"coszone\",\"repo\":\"astro-koharu\",\"resourceType\":\"skill\",\"resourceName\":\"infographic-creator\"}]]}],\"$L16\",\"$L17\",\"$L18\",\"$L19\"]}]\n"])</script><script>self.__next_f.push([1,"1a:I[74533,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"FavoriteCount\"]\n1b:I[13428,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"mb-8 flex gap-6 text-sm text-zinc-500 dark:text-zinc-400\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"title\":\"Installs\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-4 w-4\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"1\"}],[\"$\",\"span\",null,{\"className\":\"text-zinc-400 dark:text-zinc-500\",\"children\":\"Installs\"}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-4 w-4 text-violet-500\",\"fill\":\"currentColor\",\"stroke\":\"currentColor\",\"strokeWidth\":0.5,\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":[\"$\",\"$L1a\",null,{\"resourceId\":\"6492a5d1-5189-4c1d-8b3d-c29f257a05d8\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Added\"}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"Feb 4, 2026\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"17:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/coszone/astro-koharu\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-5 w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\",\"clipRule\":\"evenodd\"}]}],\"View on GitHub\"]}],[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-6 py-3 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M10 19l-7-7m0 0l7-7m-7 7h18\"}]}],\"Back to Skills\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1c:T3de0,"])</script><script>self.__next_f.push([1,"---\nname: infographic-creator\ndescription: Create beautiful infographics based on the given text content. Use this when users request creating infographics.\n---\n\n\nAn infographic (Infographic) transforms data, information, and knowledge into perceivable visual language. It combines visual design with data visualization, using intuitive symbols to compress complex information and help audiences quickly understand and remember key points.\n\n`Infographic = Information Structure + Visual Expression`\n\nThis is a task that utilizes [AntV Infographic](https://infographic.antv.vision/) to create visual infographics.\n\nBefore you start the task, you need to understand the AntV Infographic Syntax specification, including template lists, data structures, themes, and more.\n\n## SPECs\n\n### AntV Infographic Syntax\n\nAntV Infographic Syntax is a mermaid-like DSL for describing infographic rendering configuration. It uses indentation to describe information, has strong robustness, and makes it easy to render infographics through AI streaming output. It mainly contains the following information:\n\n1. template: Use template to express text information structure.\n2. data: the infographic data, which contains title, desc, items, etc. The items is an array containing label, value, desc, icon, children, etc.\n3. theme: Theme contains palette, font, and other styling options.\n\ne.g.:\n\n```plain\ninfographic list-row-horizontal-icon-arrow\ndata\n title Title\n desc Description\n items\n - label Label\n value 12.5\n desc Explanation\n icon mdi/rocket-launch\ntheme\n palette #3b82f6 #8b5cf6 #f97316\n```\n\n### The Syntax\n\n- The first line starts with `infographic \u003ctemplate-name\u003e`, and the template is selected from the list below (the _Available Templates_ section).\n- Use blocks to describe data / theme, with two-space indentation\n- Key-value pairs are expressed as \"key value\", and arrays are expressed as \"-\" items\n- The icon value is provided directly with keywords or icon names (such as `mdi/chart-line`)\n- `data` should contain title/desc/items (which can be omitted according to semantics)\n- `data.items` should contain label(string)/value(number)/desc(string)/icon(string)/children(object), where children represents the hierarchical structure\n- For comparison templates (template names starting with `compare-`), construct exactly two root nodes and place every comparison item under them as children to keep the hierarchy clear\n- For `hierarchy-structure`, `data.items` renders top-to-bottom (first item at the top) and supports up to 3 levels (root -\u003e group -\u003e item)\n- `theme` field is for customizing the theme of the infographic, including palette, font, etc.\n e.g. dark theme with custom palette:\n ```plain\n infographic list-row-simple-horizontal-arrow\n theme dark\n palette\n - #61DDAA\n - #F6BD16\n - #F08BB4\n data\n items\n - label Step 1\n desc Start\n - label Step 2\n desc In Progress\n - label Step 3\n desc Complete\n ```\n- Use `theme.base.text.font-family` to specify fonts, such as the handwriting style '851tegakizatsu'\n- Use `theme.stylize` to select built-in styles and pass parameters\n Common stylization types include:\n - `rough`: Apply hand-drawn style to make graphics look like they were drawn by hand.\n - `pattern`: Apply pattern fill to add repeated pattern effects to graphics.\n - `linear-gradient` / `radial-gradient`: Apply gradient fill to add linear or radial gradient effects to graphics.\n\n e.g: Hand-drawn style (rough):\n ```plain\n infographic list-row-simple-horizontal-arrow\n theme\n stylize rough\n base\n text\n font-family 851tegakizatsu\n data\n items\n - label Step 1\n desc Start\n - label Step 2\n desc In Progress\n - label Step 3\n desc Complete\n ```\n\nTypescript definition for data field:\n```ts\ninterface Data {\n title?: string;\n desc?: string;\n items: ItemDatum[];\n [key: string]: any;\n}\n\ninterface ItemDatum {\n icon?: string;\n label?: string;\n desc?: string;\n value?: number;\n illus?: string;\n children?: ItemDatum[];\n [key: string]: any;\n}\n```\n\n### Icon and Illustration Resources\n\n **Icons (from Iconify)**:\n - Format: `\u003ccollection\u003e/\u003cicon-name\u003e`, e.g., `mdi/rocket-launch`\n - Popular collections:\n - `mdi/*` - Material Design Icons (most commonly used)\n - `fa/*` - Font Awesome\n - `bi/*` - Bootstrap Icons\n - `heroicons/*` - Heroicons\n - Browse at: https://icon-sets.iconify.design/\n - Common icon examples:\n - Tech: `mdi/code-tags`, `mdi/database`, `mdi/api`, `mdi/cloud`\n - Business: `mdi/chart-line`, `mdi/briefcase`, `mdi/currency-usd`\n - Process: `mdi/check-circle`, `mdi/arrow-right`, `mdi/cog`\n - People: `mdi/account`, `mdi/account-group`, `mdi/shield-account`\n\n **Illustrations (from unDraw)**:\n - Format: illustration filename (without .svg), e.g., `coding`\n - Browse at: https://undraw.co/illustrations\n - Common themes:\n - Tech: `coding`, `programmer`, `server`, `cloud-sync`\n - Business: `business-plan`, `team-work`, `analytics`\n - Abstract: `abstract`, `building-blocks`, `connection`\n - Note: Use sparingly as illustrations are larger and more detailed than icons\n\n **Usage Tips**:\n - For `sequence-*` and `list-*` templates β†’ use `icon`\n - For larger illustration needs β†’ use `illus`\n - Not all templates support both icon and illus - refer to template examples\n\n### Available Templates\n\n- sequence-zigzag-steps-underline-text\n- sequence-horizontal-zigzag-underline-text\n- sequence-horizontal-zigzag-simple-illus\n- sequence-circular-simple\n- sequence-filter-mesh-simple\n- sequence-mountain-underline-text\n- sequence-cylinders-3d-simple\n- sequence-color-snake-steps-horizontal-icon-line\n- sequence-pyramid-simple\n- sequence-funnel-simple\n- sequence-roadmap-vertical-simple\n- sequence-roadmap-vertical-plain-text\n- sequence-zigzag-pucks-3d-simple\n- sequence-ascending-steps\n- sequence-ascending-stairs-3d-underline-text\n- sequence-snake-steps-compact-card\n- sequence-snake-steps-underline-text\n- sequence-snake-steps-simple\n- sequence-stairs-front-compact-card\n- sequence-stairs-front-pill-badge\n- sequence-timeline-simple\n- sequence-timeline-rounded-rect-node\n- sequence-timeline-simple-illus\n- compare-binary-horizontal-simple-fold\n- compare-hierarchy-left-right-circle-node-pill-badge\n- compare-swot\n- quadrant-quarter-simple-card\n- quadrant-quarter-circular\n- quadrant-simple-illus\n- relation-circle-icon-badge\n- relation-circle-circular-progress\n- compare-binary-horizontal-badge-card-arrow\n- compare-binary-horizontal-underline-text-vs\n- hierarchy-tree-tech-style-capsule-item\n- hierarchy-tree-curved-line-rounded-rect-node\n- hierarchy-tree-tech-style-badge-card\n- hierarchy-structure\n- chart-column-simple\n- chart-bar-plain-text\n- chart-line-plain-text\n- chart-pie-plain-text\n- chart-pie-compact-card\n- chart-pie-donut-plain-text\n- chart-pie-donut-pill-badge\n- chart-wordcloud\n- list-grid-badge-card\n- list-grid-candy-card-lite\n- list-grid-ribbon-card\n- list-row-horizontal-icon-arrow\n- list-row-simple-illus\n- list-sector-plain-text\n- list-column-done-list\n- list-column-vertical-icon-arrow\n- list-column-simple-vertical-arrow\n- list-zigzag-down-compact-card\n- list-zigzag-down-simple\n- list-zigzag-up-compact-card\n- list-zigzag-up-simple\n\n**Template Selection Guidelines:**\n- For strict sequential order: processes/steps/development trends β†’ `sequence-*` series\n - Timeline β†’ `sequence-timeline-*`\n - Staircase diagram β†’ `sequence-stairs-*`\n - Roadmap β†’ `sequence-roadmap-vertical-*`\n - Zigzag steps β†’ `sequence-zigzag-*`\n - Circular progress β†’ `sequence-circular-simple`\n - Color snake steps β†’ `sequence-color-snake-steps-*`\n - Pyramid diagram β†’ `sequence-pyramid-simple`\n- For listing viewpoints β†’ `list-row-*` series or `list-column-*` series\n- For comparative analysis (comparing pros and cons of two parties) β†’ `compare-binary-*` series\n- For SWOT analysis β†’ `compare-swot`\n- For hierarchical structure (tree diagram) β†’ `hierarchy-tree-*`\n- For data charts β†’ `chart-*` series\n- For quadrant analysis β†’ `quadrant-*` series\n- For grid lists (bullet points) β†’ `list-grid-*` series\n- For relationship display β†’ `relation-circle-*`\n- For word cloud β†’ `chart-wordcloud`\n\n### Example\n\nDraw an information graph of the Internet technology evolution\n\n```plain\ninfographic list-row-horizontal-icon-arrow\ndata\n title Internet Technology Evolution\n desc From Web 1.0 to AI era, key milestones\n items\n - time 1991\n label Web 1.0\n desc Tim Berners-Lee published the first website, opening the Internet era\n icon mdi/web\n - time 2004\n label Web 2.0\n desc Social media and user-generated content become mainstream\n icon mdi/account-multiple\n - time 2007\n label Mobile\n desc iPhone released, smartphone changes the world\n icon mdi/cellphone\n - time 2015\n label Cloud Native\n desc Containerization and microservices architecture are widely used\n icon mdi/cloud\n - time 2020\n label Low Code\n desc Visual development lowers the technology threshold\n icon mdi/application-brackets\n - time 2023\n label AI Large Model\n desc ChatGPT ignites the generative AI revolution\n icon mdi/brain\n```\n\n### Example 2: Using Illustrations\n\n```plain\ninfographic sequence-horizontal-zigzag-simple-illus\ndata\n title Product Development Phases\n desc Key stages in our development process\n items\n - label Research\n desc Understanding user needs\n illus user-research\n - label Design\n desc Creating user experience\n illus design-thinking\n - label Development\n desc Building the product\n illus coding\n - label Launch\n desc Going to market\n illus launch-day\n```\n## Creation Process\n\n### Step 1: Understanding User Requirements\n\nBefore creating the infographic, it is important to understand the user's requirements and the information they want to present. This will help in defining the template and the data structure.\n\nIf the user provides a clear and concise description of the information they want to present, break down the information into a clear and concise structure.\n\nOtherwise, ask the user for clarification (e.g., \"Please provide a clear and concise description of the information you want to present.\", \"Which template would you prefer to use?\")\n\n- Extract key information structure (title, description, items, etc).\n- Identify the required data fields (e.g., title, description, items, labels, values, icons, etc.).\n- Select an appropriate template.\n- Use the AntV Infographic Syntax to describe the content of the infographic `{syntax}`.\n\n**CRITICAL NOTE**: Must respect the language of the user's input content. e.g. if the user's input content is in Chinese, the text content in infographic syntax must be in Chinese.\n\n### Step 2: Rendering the Infographic\n\nOnce you have the final AntV Infographic Syntax, you can generate the complete infographic HTML file by following these steps:\n\n1. Create a complete HTML file with the following structure:\n - DOCTYPE and HTML meta tags (charset: utf-8)\n - Title: `{title} - Infographic`\n - Include AntV Infographic library script: `https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js`\n - Add a resource loader script that handles icon loading from Iconify and illustration loading from unDraw\n - Create a container div with id `container` where the infographic will render\n - Initialize the Infographic instance with `width: '100%'` and `height: '100%'`\n - Replace the placeholder `{title}` with the actual title\n - Replace the placeholder `{syntax}` with the actual AntV Infographic Syntax\n - Include export functionality that allows users to download the infographic as SVG `const svgDataUrl = await infographic.toDataURL({ type: 'svg' });`\n\nThe Html template you can follow:\n\n```html\n\u003cdiv id=\"container\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n// Resource Loader Script\n// Use the following resource loader script to handle icon and illustration loading:\nconst svgTextCache = new Map();\nconst pendingRequests = new Map();\n\nAntVInfographic.registerResourceLoader(async (config) =\u003e {\n const { data, scene } = config;\n\n try {\n const key = `${scene}::${data}`;\n let svgText;\n\n // 1. Check cache\n if (svgTextCache.has(key)) {\n svgText = svgTextCache.get(key);\n }\n // 2. Check if request is already in progress\n else if (pendingRequests.has(key)) {\n svgText = await pendingRequests.get(key);\n }\n // 3. Make new request\n else {\n const fetchPromise = (async () =\u003e {\n try {\n let url;\n\n if (scene === 'icon') {\n url = `https://api.iconify.design/${data}.svg`;\n } else if (scene === 'illus') {\n url = `https://raw.githubusercontent.com/balazser/undraw-svg-collection/refs/heads/main/svgs/${data}.svg`;\n } else return null;\n\n if (!url) return null;\n\n const response = await fetch(url, { referrerPolicy: 'no-referrer' });\n\n if (!response.ok) {\n console.error(`HTTP ${response.status}: Failed to load ${url}`);\n return null;\n }\n\n const text = await response.text();\n\n if (!text || !text.trim().startsWith('\u003csvg')) {\n console.error(`Invalid SVG content from ${url}`);\n return null;\n }\n\n svgTextCache.set(key, text);\n return text;\n } catch (fetchError) {\n console.error(`Failed to fetch resource ${key}:`, fetchError);\n return null;\n }\n })();\n\n pendingRequests.set(key, fetchPromise);\n\n try {\n svgText = await fetchPromise;\n } catch (error) {\n pendingRequests.delete(key);\n console.error(`Error loading resource ${key}:`, error);\n return null;\n } finally {\n pendingRequests.delete(key);\n }\n }\n\n if (!svgText) {\n return null;\n }\n\n const resource = AntVInfographic.loadSVGResource(svgText);\n\n if (!resource) {\n console.error(`loadSVGResource returned null for ${key}`);\n svgTextCache.delete(key);\n return null;\n }\n\n return resource;\n } catch (error) {\n console.error('Unexpected error in resource loader:', error);\n return null;\n }\n});\n\u003c/script\u003e\n\u003cscript\u003e\n const infographic = new AntVInfographic.Infographic({\n container: '#container',\n width: '100%',\n height: '100%',\n });\n infographic.render(`{syntax}`);\n document.fonts?.ready.then(() =\u003e {\n infographic.render(`{syntax}`);\n }).catch((error) =\u003e console.error('Error waiting for fonts to load:', error));\n\u003c/script\u003e\n```\n\n2. Write the HTML file named `\u003ctitle\u003e-infographic.html` using the Write tool\n\n3. Display to the user:\n - The generated file path with instruction: \"Open this file directly in a browser to view and save the SVG\"\n - Display your output syntax with instruction: \"If you need to adjust the template/colors/content, just let me know\"\n\n**Note:** The HTML file must include:\n- Complete resource loader for handling icon and illustration assets from external sources\n- SVG export functionality via the export button\n- Responsive container that takes 100% width and height\n- Proper error handling for failed resource loads\n"])</script><script>self.__next_f.push([1,"18:[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Skill Details\"}],[\"$\",\"$L1b\",null,{\"content\":\"$1c\"}]]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"More from this repository\"}],[\"$\",\"span\",null,{\"className\":\"rounded-full bg-violet-100 px-2 py-0.5 text-sm font-medium text-violet-700 dark:bg-violet-900/50 dark:text-violet-300\",\"children\":5}]]}],[\"$\",\"div\",null,{\"className\":\"grid gap-3 sm:grid-cols-2\",\"children\":[[\"$\",\"$L7\",\"6d9526a8-a26b-433f-9587-46788d6b42ab\",{\"href\":\"/skills/coszone/astro-koharu/infographic-syntax-creator\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"infographic-syntax-creator\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Generates structured syntax for creating data-driven infographics with automatic layout optimization and visual design recommendations\"}]]}]]}],[\"$\",\"$L7\",\"e7dfab23-9d44-4c31-a5f6-16aee0257a73\",{\"href\":\"/skills/coszone/astro-koharu/infographic-structure-creator\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"infographic-structure-creator\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Generates TypeScript structure components for infographics, creating layout-specific, composable React components with precise structural and design constraints.\"}]]}]]}],[\"$\",\"$L7\",\"b1fe690f-9cd6-4e0c-ab9c-fd4c467a1226\",{\"href\":\"/skills/coszone/astro-koharu/infographic-item-creator\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"infographic-item-creator\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],\"$L1d\"]}]]}],\"$L1e\"]}]]}],\"$L1f\",\"$L20\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1d:[\"$\",\"span\",null,{\"children\":\"Skill\"}]\n1e:[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Generates TypeScript/TSX infographic item components with precise layout logic, props, and registration for a specific design framework.\"}]\n1f:[\"$\",\"$L7\",\"7d7e7dd1-b3f1-414d-a4fc-a4a37555a748\",{\"href\":\"/skills/coszone/astro-koharu/blog-writer\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"blog-writer\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"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...\"}]]}]]}]\n20:[\"$\",\"$L7\",\"b5c344d6-93c0-4a31-8e9b-c21ec175e3be\",{\"href\":\"/skills/coszone/astro-koharu/infographic-template-updater\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"infographic-template-updater\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Updates infographic templates by dynamically replacing placeholders with current data from specified sources.\"}]]}]]}]\n"])</script></body></html>