svg-infographic
Author technical/structured SVG infographics and diagrams, then render them to crisp PNG with a headless browser. Best for architecture diagrams, topology maps, flows, before/after comparisons, nested/onion layer models, roadmaps, decision matrices, and social-ready technical one-pagers. Prefers clean line icons in soft tinted circles. First-class Korean/CJK text. Includes an opt-in "tidy hand-drawn" sketch preset (paper background, Korean handwriting font, rough strokes, highlighter). Not for photo-heavy or illustration-heavy graphics, statistical charts, or mascot/character illustration.
npx skills add kyungseo/skillstead --skill svg-infographic --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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/archetypes.md` | **Al
- 0. Preflight — confirm, then offer to change
- 1. Pick an archetype (shape first)
- 2. Layout pass — numbers before SVG (required)
- 3. Author the SVG — core rules
- 4. Pre-render checklist (source-level — run before every render)
- 5. Render to PNG (2×)
- 6. Defaults to state (and let the user change)
- 7. Verify the PNG (quality bar)
- 8. Output & handoff
node scripts/check-svg.mjs diagram.svg # render.sh runs this again as a hard gate bash scripts/render.sh diagram.svg # → diagram.png (2×) bash scripts/render.sh diagram.svg out.png --transparent
What does the svg-infographic skill do?
Author technical/structured SVG infographics and diagrams, then render them to crisp PNG with a headless browser. Best for architecture diagrams, topology maps, flows, before/after comparisons, nested/onion layer models, roadmaps, decision matrices, and social-ready technical one-pagers. Prefers clean line icons in soft tinted circles. First-class Korean/CJK text. Includes an opt-in "tidy hand-drawn" sketch preset (paper background, Korean handwriting font, rough strokes, highlighter). Not for photo-heavy or illustration-heavy graphics, statistical charts, or mascot/character illustration.
How do I install it?
Run `npx skills add kyungseo/skillstead --skill svg-infographic --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From kyungseo/skillstead, a repository with 69 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.