Animated Infographic Skill (for Claude Code)

A Claude Code skill that builds animated, geometric infographics — the "flowing information" style: SVG connectors with traveling pulses, nodes that cascade in on load, counters that count up — as a single self-contained .html file. No React, no build step, no external runtime dependencies: plain CSS + vanilla JS + inline SVG.

What you get

• infografia-design/SKILL.md — the skill itself. Drop the infografia-design/ folder into .claude/skills/ in any Claude Code project and it activates automatically whenever you ask Claude to create, adapt, or review an infographic.
• infografia-design/example-templates/ — 17 ready-to-copy layouts (linear flow, timeline, 2×2 matrix, funnel, cycle, mind map, metrics panel, comparison grids, and more). Every new infographic starts by copying one of these and editing its content — never from a blank page.
• infografia-design/scripts/fetch_logo.py — looks up a brand's official logo across svgl.app, Simple Icons and gilbarbara/logos, so tool/vendor logos in your infographics are always the real mark, never hand-drawn.
• A built-in style system: every template exposes the same four modifiable knobs at the top of its <style> block — typography, color, corner shape (rounded ↔ square), and whether connectors animate — so re-skinning a template to a different brand is a handful of CSS variable edits, not a rewrite.

Quick start

1. Copy infografia-design/ into .claude/skills/ in your own project.
2. Open a fresh chat in that project and ask for an infographic (e.g. "make an infographic showing our 5-step onboarding flow").
3. Claude reads SKILL.md, copies the closest-matching layout from example-templates/, fills in your content, searches for any real brand logos it needs, and opens the result in a browser to check the cascade animation before handing it back.

Making it yours

The templates ship with a placeholder brand (a green accent, a sample wordmark, Geist/Poppins typography) so the visual system is easy to see in action. Read SETUP.md before using this for real — it walks through swapping in your own logo, and pairs with design-system-template.md, a fill-in-the-blanks brand sheet you complete once so every future infographic already matches your brand.

License

MIT — see infografia-design/SKILL.md frontmatter.