---
name: generating-infographics
description: Use when creating infographics, data visualizations, process diagrams, timelines, or comparisons - generates branded infographics using @antv/infographic with 114 templates across 7 categories. Triggers on "create infographic", "make infographic", "visualize data", "timeline", "process diagram".
version: 2.9.1
allowed-tools: Read, Write, Glob, Bash
user-invocable: false
---

# Generating Infographics

Generate branded infographics with custom themes and backgrounds using @antv/infographic.

## Prerequisites

1. Run `/brand-init` to create project structure
2. Run `/brand-extract` to generate brand-philosophy.md
3. Run `/template-infographic` to create an infographic template

### No-Brand Safeguard

If `brand-philosophy.md` is not found OR contains no `## Color Palette` section:
- **STOP generation** — inform user: "No brand colors found. Run `/brand-extract` first to analyze your brand."
- If user insists on proceeding: use deliberately bland neutrals (#1a1a1a, #666, #f5f5f5, system fonts)
- Never fall back to any recognizable brand colors

## When to Use

- "Create an infographic"
- "Make a process diagram"
- "Visualize this data"
- "Create a timeline"
- "Show comparison infographic"
- NOT for: Charts/graphs (use charting library), presentations (use visual-content skill)

## Commands

| Command | Purpose |
|---------|---------|
| `/template-infographic` | Create infographic template |
| `/infographic` | Generate infographic (guided) |
| `/infographic-quick` | Generate infographic (fast) |

## Template Categories (114 Total)

| Category | Count | Use Cases | Icons | Illustrated |
|----------|-------|-----------|-------|-------------|
| Sequence | 43 | Timelines, steps, processes, roadmaps | ✓ (2) | ✓ (5) |
| List | 23 | Features, grids, pyramids, sectors | ✓ (4) | ✓ (1) |
| Hierarchy | 25 | Org charts, tree structures | — | — |
| Compare | 17 | VS, before/after, SWOT | — | — |
| Quadrant | 3 | 2x2 matrices | — | ✓ (1) |
| Relation | 2 | Networks, connections | ✓ (1) | — |
| Chart | 1 | Bar charts | — | — |

## Template Asset Types

| Type | Count | Identifier | Data Format |
|------|-------|------------|-------------|
| **Text-only** | 100+ | (default) | `{ "label": "Cloud", "desc": "Infrastructure" }` |
| **Icon-based** | 8 | `icon` in name | `{ "label": "icon:rocket", "desc": "Fast" }` |
| **Illustrated** | 9 | `-illus` suffix | `{ "label": "Step 1", "desc": "Discovery", "illus": "step-1" }` |

**Recommendation:** Start with text-only templates. Illustrated templates require custom image files.

### Illustrated Template Workflow

When using `-illus` templates:
1. Content includes `illus` field referencing image filename
2. Supported formats: SVG (recommended), PNG, JPG
3. Options: provide your own images, find icons, or use placeholders
4. Images stored with infographic output: `infographics/{date}-{name}/illustrations/`
5. See `references/illustrations.md` for detailed workflow

## Text Guidelines (Avoiding Overlap)

| Element | Max | Good | Bad |
|---------|-----|------|-----|
| Labels | 1-2 words | "Cloud" | "Cloud Computing Services" |
| Descriptions | 2-4 words | "Infrastructure design" | "Complete infrastructure design and implementation" |

If overlap occurs: shorten text, use wider canvas (1200px+), or use column/grid templates.

## Quick Reference

| Task | How |
|------|-----|
| Generate infographic | `node generate.js --config config.json --data '{...}' --output output.png` |
| Set background | `--background "spotlight-dots"` |
| SVG output | `--format svg` |

## Background Presets

Layered presets (gradient + pattern) include `spotlight-dots` (recommended),
`spotlight-grid`, `diagonal-crosshatch`, `tech-matrix`. Simple presets include
`spotlight`, `diagonal-fade`, `top-down`, `subtle-dots`, `tech-grid`,
`crosshatch`, `solid`. Full effect descriptions and custom background
configuration: `references/backgrounds.md`.

## Workflow

### 1. Create Template (once)
```
/template-infographic
```
Select: category → design → palette → background → style

### 2. Generate Infographic (repeat)
```
/infographic-quick
```
Select template → paste content → name → get PNG

## Accessibility & Readability (MANDATORY)

**These checks are NON-NEGOTIABLE before generating any infographic.**

### Contrast Validation (WCAG AA)

| Requirement | Value |
|-------------|-------|
| Minimum contrast ratio | **4.5:1** for all text |
| Large text (title) | 3:1 acceptable |
| Standard | WCAG 2.1 AA |

**Key principle:** Palette colors are for SHAPES and FILLS, not text. Text needs explicit high-contrast colors.

### Text Color Rules by Background

| Background Type | Title Fill | Description Fill | Label Fill |
|-----------------|------------|------------------|------------|
| **Dark** (spotlight-dots, tech-matrix) | White or near-white (WCAG >= 4.5:1) | White at ~85% opacity | White or near-white |
| **Light** (solid, subtle-dots) | Near-black (WCAG >= 4.5:1) | Dark gray | Near-black |

**Never use palette colors for text** - they're for decorative shapes only.

### Spacing & Balance Rules

| Element | Requirement |
|---------|-------------|
| **Item spacing** | Minimum 20px between items |
| **Edge margins** | Never touch canvas edges (min 5% padding) |
| **Text truncation** | Labels 1-2 words, descriptions 2-4 words |
| **Visual balance** | Equal spacing between similar elements |

### Pre-Generation Checklist

```
□ All text has 4.5:1 contrast against background
□ Labels are 1-2 words (no overlap risk)
□ Descriptions are 2-4 words
□ Content fits template capacity (check item limits)
□ Dark bg → white text, Light bg → dark text
□ No text touching edges
□ colorBg derived from brand-philosophy.md, not from skill defaults
□ colorPrimary derived from brand-philosophy.md, not from skill defaults
□ Colors traced to brand-philosophy.md (not copied from reference docs or runtime fallbacks)
□ font-family from brand-philosophy.md, not a generic default
□ Text colors WCAG-validated against actual background
```

**If ANY check fails, DO NOT generate. Fix the content or config first.**

### Config by Background Type

Set `title`/`desc`/`item` text fills by background brightness — dark
backgrounds need white/near-white text, light backgrounds need near-black.
**Never use palette colors for text** — they are for decorative shapes only.
Ready-to-adapt dark-bg and light-bg config JSON is in `references/theming.md`
§ Text Fill by Background Type. The `/template-infographic` command generates
correct configs from your brand-philosophy.md.

## Data Structure by Type

Content JSON shape depends on the template category — Sequence/List use a flat
`items` array of `label`+`desc`; Compare and Hierarchy nest `children`. Full
JSON examples per category: `references/templates.md` § Data Structure by Type.

## Common Mistakes

| Mistake | Fix |
|---------|-----|
| Text overlapping | Shorten labels (1-2 words), descriptions (2-4 words) |
| Missing illustrations | Check template ends in `-illus`, provide SVG/PNG/JPG files |
| Icon not showing | Use `icon:name` syntax, only for icon templates |
| Background not applied | Pass `--background` flag to generate.js |
| Text invisible on light bg | Add explicit `title`/`desc`/`item` fills with dark colors (#1A202C, #4A5568) |
| Pastel text unreadable | Palette colors are for shapes only; text needs high contrast (~4.5:1) |

## References

- `references/templates.md` - Complete 114 template catalog with asset requirements
- `references/theming.md` - Theme configuration details
- `references/backgrounds.md` - Background customization guide
- `references/icons.md` - Available icons for icon-based templates
- `references/illustrations.md` - Illustrated template workflow and SVG requirements

## Module Structure

```
lib/
├── renderer.js       # Main entry point
├── dom-setup.js      # JSDOM environment
├── infographic.js    # Infographic creation
├── exporter.js       # SVG/PNG export
├── backgrounds.js    # Gradient/pattern backgrounds
└── icons.js          # Icon utilities
```


---
Source attribution: camoa
Original project: https://github.com/camoa/claude-skills/blob/2643eff65f4e8b44c7608ebbbdc85c9ad277871e/brand-content-design/skills/infographic-generator/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

MIT License

Copyright (c) 2025 Carlos Ospina

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Mega AI Hub resource metadata

Creator / publisher: camoa
Original project: https://github.com/camoa/claude-skills/blob/2643eff65f4e8b44c7608ebbbdc85c9ad277871e/brand-content-design/skills/infographic-generator/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Marketing
Roles: Content Marketer, Graphic Designer, UX Designer
Specialties: Design, Word Documents, Frontend, PowerPoint
Tools: @Antv/Infographic
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 90d9ac623ba0bb8c471a4cb53ba3bded5614aba0bc549f2bc4448f360b6b28f3