How do I install the Infographic Generator skill?

Run npx skillmds@latest add tomevault-io/infographic-generator-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Infographic Generator safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Infographic Generator?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Infographic Generator free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Infographic Generator?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Infographic Generator by tomevault-io

Name: Infographic Generator
Author: tomevault-io

Infographic Generator

Create visual project summary infographics for the README and GitHub social preview images with before/after comparison, ROI highlights, and phase timeline. Use after core artifacts are complete. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

Generate visual summary SVGs. Invoked by documentation-architect and project-architect.

Output Files

.github/readme-infographic.svg (800x420px, light theme)
.github/social-preview.svg (1280x640px, light theme)
.github/social-preview-dark.svg (1280x640px, dark theme)

Infographic Layout (800x420)

Section 1 (top-left): Before/After comparison boxes
- "Before" box: red theme (#fef2f2 bg, #fca5a5 border), key metrics in red
- Arrow with improvement percentage in green
- "After" box: green theme (#f0fdf4 bg, #86efac border), key metrics in green
Section 2 (top-right): ROI box (#eff6ff bg, #93c5fd border) with headline figures
Section 3 (middle): 4-segment phase timeline bar with milestone markers
Section 4 (bottom-left): 4 phase cards with descriptions
Section 5 (bottom-right): Key data table

Social Preview (1280x640)

Project title and subtitle
Key metrics highlights
Phase visualization
Organic illustrated background style (waves, circles, blobs)
Light and dark theme variants

Color System

Element	Light	Dark
Background	#f8fafc → #e2e8f0	#0f172a → #1e293b
Text primary	#0f172a	#f8fafc
Card bg	#ffffff	#1e293b
Success	#10b981	#34d399
Danger	#ef4444	#f87171

Post-Write Validation (MANDATORY)

After writing each SVG, run validation and fix any errors before proceeding. See SVG Validation for the full procedure and common pitfalls.

cd workspace && node validate-svg.js ../.github/readme-infographic.svg ../.github/social-preview.svg ../.github/social-preview-dark.svg

Quality Criteria

XML validates without errors (npm run validate-svg passes)
GitHub markdown rendering (no external deps)
Dark mode support via <picture> element
Key metrics visible without zooming
Phase colors consistent with Gantt chart
WCAG AA contrast ratios

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: infographic-generator-2description: Create visual project summary infographics for the README and GitHub social preview images with before/after comparison, ROI highlights, and phase timeline. Use after core artifacts are complete. Use when this capability is needed.---Generate visual summary SVGs. Invoked by `documentation-architect` and `project-architect`.## Output Files1. `.github/readme-infographic.svg` (800x420px, light theme)2. `.github/social-preview.svg` (1280x640px, light theme)3. `.github/social-preview-dark.svg` (1280x640px, dark theme)## Infographic Layout (800x420)1. **Section 1** (top-left): Before/After comparison boxes - "Before" box: red theme (#fef2f2 bg, #fca5a5 border), key metrics in red - Arrow with improvement percentage in green - "After" box: green theme (#f0fdf4 bg, #86efac border), key metrics in green2. **Section 2** (top-right): ROI box (#eff6ff bg, #93c5fd border) with headline figures3. **Section 3** (middle): 4-segment phase timeline bar with milestone markers4. **Section 4** (bottom-left): 4 phase cards with descriptions5. **Section 5** (bottom-right): Key data table## Social Preview (1280x640)- Project title and subtitle- Key metrics highlights- Phase visualization- Organic illustrated background style (waves, circles, blobs)- Light and dark theme variants## Color System| Element | Light | Dark ||---------|-------|------|| Background | #f8fafc → #e2e8f0 | #0f172a → #1e293b || Text primary | #0f172a | #f8fafc || Card bg | #ffffff | #1e293b || Success | #10b981 | #34d399 || Danger | #ef4444 | #f87171 |## Post-Write Validation (MANDATORY)After writing each SVG, run validation and fix any errors before proceeding. See [SVG Validation](../../docs/SVG-VALIDATION.md) for the full procedure and common pitfalls.```bashcd workspace && node validate-svg.js ../.github/readme-infographic.svg ../.github/social-preview.svg ../.github/social-preview-dark.svg```## Quality Criteria- [ ] **XML validates without errors** (`npm run validate-svg` passes)- [ ] GitHub markdown rendering (no external deps)- [ ] Dark mode support via `<picture>` element- [ ] Key metrics visible without zooming- [ ] Phase colors consistent with Gantt chart- [ ] WCAG AA contrast ratios---> Converted and distributed by [TomeVault](https://tomevault.io/claim/zircote) — claim your Tome and manage your conversions.

Frequently asked questions