svg-infographic

# svg-infographic Use this skill when the user wants a technical or structured infographic/diagram from a description, or asks to export an SVG to PNG. Good for: architecture diagrams, cloud/network topology, component/layer diagrams, before/after, process/data flow, nested "onion" models, roadmap/risk maps, decision matrices, social-ready technical one-pagers. Do **not** use for: photo/illustration-heavy marketing graphics; **data-accurate** statistical charts (bar/line/scatter/heatmap — use a chart tool); mascots or character illustration; custom logo design or bespoke icon design. Nuances: a **simple qualitative** 2×2/3×3 matrix or a status-count badge is fine (it's structure, not a data-accurate chart). Using the built-in line-icon set is expected and encouraged — the non-goal is *designing new brand marks*, not using icons. A hand-drawn / sketchnote feel is supported as the **opt-in sketch preset** (`references/sketch.md`) — "tidy hand-drawn": hand-drawn surface, computed layout; mascots and scene illustration stay out of scope. **Package map** — this skill ships as a directory; load the parts on demand: | File | When to read | | --- | --- | | `references/design-kernel.md` | **Before choosing colors, tokens or typography** — the canonical skin contract: 11-role token model, domain aliases, versioned profiles + `skin.mjs` resolver, typography profile SSoT(`references/typography/`), approved contact sheet | | `references/types/selection.md` | **Before choosing a type...