Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/kyungseo/skillsteadnpx agentmods add skills/kyungseo/skillstead/svg-infographicWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kyungseo/skillstead/svg-infographic)<a href="https://agentmods.dev/skills/kyungseo/skillstead/svg-infographic"><img src="https://agentmods.dev/badge/skills/kyungseo/skillstead/svg-infographic/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/kyungseo/skillstead/svg-infographic"><img src="https://agentmods.dev/badge/skills/kyungseo/skillstead/svg-infographic.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00123 | $0.07133 |
| Opus 5 | $0.00062 | $0.03566 |
| Sonnet 5 | $0.00025 | $0.01427 |
| Haiku 4.5 | $0.00012 | $0.00713 |
Grade E, and why
svg-infographic scanned grade E with 3 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Hidden instructionshighPrompt injection
Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.
<!-- Paint values come from the resolver — get them with `node scripts/skin.mjs resolve current --mode light`. Never invent hex values: the palette SSoT is references/skins/ + registry (design-kernel.md §3). Roles: canva Downloads and executes remote codehighSupply chain
curl | sh runs whatever the server returns today, which is not necessarily what it returned when this was reviewed.
substitute a remote `curl | sh` installer. If the command needs elevated privileges, surface that approval Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
substitute a remote `curl | sh` installer. If the command needs elevated privileges, surface that approval How it starts
The opening of the file, as written. The whole thing — 234 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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 — the generated routing view: content signal → TypePack → its spec (derived from the TypePack manifest; migrated types only) |
references/archetypes.md |
For the cross-type premium base recipe (the default visual language). Every per-type rule set has moved to its TypePack spec; the per-archetype sections here are pointer tombstones only |
references/authoring.md |
Always, before writing SVG — detailed geometry/connector/panel/emphasis/color rules and the full icon set; also the manual render fallback |
references/sketch.md |
Only when the user asks for a hand-drawn / sketchnote / handwritten feel — the opt-in sketch preset (paper, handwriting font, rough filters, highlighter) |
scripts/render.mjs |
Canonical renderer (Node 18+, stdlib only) — lint gate → browser discovery → 2× render → exact IHDR verification in one entrypoint; works from any shell incl. Windows CMD/PowerShell without Git Bash |
references/presentation/contract.md |
Only when the user explicitly asks to place an already verified canonical result on a notebook, wall, board, portrait monitor, ambient screen, or a custom registered surface |
scripts/projection.mjs |
Explicit opt-in derived-sibling builder/verifier; never replaces or post-processes the canonical SVG/PNG |
scripts/render.sh |
Thin POSIX/Git-Bash wrapper that delegates to render.mjs (adds only the no-Node diagnostics) |
scripts/check-svg.mjs |
Source lint gate (Node 18+, standard library only; no npm install) — the renderer runs it automatically; run it directly while iterating on the SVG source |
scripts/check-layout.mjs— layout contract guard (container padding/symmetry, equal-gap distribution, atomic card clusters; design-kernel §7). The renderer runs it automatically on layout-annotated SVGs.scripts/compose.mjs— composition tooling: validate a Composition Plan, place TypePack fragments into template slots (translation-only), and verify the composite against its receipt (design-kernel §8).scripts/skin.mjs typography-check— effective-font cascade guard (missing wrapper, inherited weight, unannotated secondary, remote font; it inspects the final file itself — standalone and composite alike). The renderer runs it automatically on sketch/typography-annotated SVGs.scripts/font-probe.mjs— browser runtime font receipt (FontFaceSet load + computed family/weight of scoped KO/EN samples; evidence level: computed+load, NOT rendered-face proof). |scripts/skin.mjs| Skin profile resolver —validate/resolve/registryoverreferences/skins/(palette SSoT); use resolved tokens instead of inventing hex values |
What ships with it
60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- assets/fonts/HiMelody-OFL.txt 4.3 KB
- assets/fonts/HiMelody-Regular.ttf 12328 KB
- assets/fonts/Pretendard-Bold.otf 1540 KB
- assets/fonts/Pretendard-OFL.txt 4.3 KB
- assets/fonts/Pretendard-Regular.otf 1537 KB
- assets/fonts/README.md 2.3 KB
- assets/presentation-surfaces/gallery-wall.png 1553 KB
- assets/presentation-surfaces/paper-notebook.png 2109 KB
- assets/presentation-surfaces/portrait-monitor.png 2739 KB
- CHANGELOG.md 7.4 KB
- LICENSE.txt 11 KB
- README.ko.md 21 KB
- README.md 18 KB
- references/archetypes.md 4.4 KB
- references/authoring.md 25 KB
- references/delivery/font-delivery-v1.yaml 2.5 KB
- references/design-kernel.md 39 KB
- references/language-policy.yaml 4.7 KB
- references/legacy/page-title-rail.md 2.4 KB
- references/media/canonical-skin-contact-sheet.png 475 KB
- references/media/canonical-skin-contact-sheet.svg 240 KB
- references/media/README.md 1.8 KB
- references/package-surface.yaml 7.3 KB
- references/presentation/contract.md 10.0 KB
- references/presentation/surfaces/gallery-wall.json 2.1 KB
- references/presentation/surfaces/paper-notebook.json 2.2 KB
- references/presentation/surfaces/portrait-monitor.json 2.1 KB
- references/PROMPT-GALLERY.md 13 KB
- references/sketch.md 9.5 KB
- references/skins/current-v1.yaml 1.3 KB
- references/skins/derivation-v1.yaml 1.9 KB
- references/skins/legacy-v0.8.yaml 901 B
- references/skins/pageframe-v1.yaml 3.3 KB
- references/skins/registry.yaml 405 B
- references/skins/sketch-overlay-v1.yaml 1.4 KB
- references/types/inputs/approval-gate.canonical.yaml 797 B
- references/types/inputs/approval-gate.stress-cardinality.yaml 878 B
- references/types/inputs/approval-gate.stress-copy.yaml 974 B
- references/types/inputs/approval-gate.stress-degrade.yaml 867 B
- references/types/inputs/before-after.canonical.yaml 862 B
- references/types/inputs/before-after.stress-cardinality.yaml 1.5 KB
- references/types/inputs/before-after.stress-copy.yaml 1.0 KB
- references/types/inputs/cards-kpi-grid.canonical.yaml 1.2 KB
- references/types/inputs/cards-kpi-grid.stress-cardinality.yaml 1.4 KB
- references/types/inputs/cards-kpi-grid.stress-copy.yaml 1.5 KB
- references/types/inputs/cards-kpi-grid.stress-degrade.yaml 1.4 KB
- references/types/inputs/decision-matrix.canonical.yaml 1.5 KB
- references/types/inputs/decision-matrix.stress-cardinality.yaml 2.0 KB
- references/types/inputs/decision-matrix.stress-copy.yaml 1.7 KB
- references/types/inputs/decision-matrix.stress-degrade.yaml 2.0 KB
- references/types/inputs/layer-stack.canonical.yaml 1.5 KB
- references/types/inputs/layer-stack.stress-cardinality.yaml 2.6 KB
- references/types/inputs/layer-stack.stress-copy.yaml 960 B
- references/types/inputs/layer-stack.stress-degrade.yaml 2.8 KB
- references/types/inputs/nested-scope.canonical.yaml 656 B
- references/types/inputs/nested-scope.stress-cardinality.yaml 722 B
- references/types/inputs/nested-scope.stress-copy.yaml 748 B
- references/types/inputs/process-flow.canonical.yaml 711 B
- references/types/inputs/process-flow.stress-cardinality.yaml 787 B
- references/types/inputs/process-flow.stress-copy.yaml 872 B
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago Changed 199dde4c1edf
- 11d ago First seen · 234 lines · 123 tokens per session scan E 5cec05933f58
svg-infographic is a skill published in the GitHub repository kyungseo/skillstead (78 stars, last pushed 4d ago), licensed Apache-2.0. It adds 123 tokens to every session and 7,133 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it E with 3 findings (hidden instructions, downloads and executes remote code, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
generate-logo
Generates on-brand, editable SVG logo assets — wordmark, monogram, and favicon — from the active brand profile, reusing its exact palette and heading font. Vector output needs no account, key, or network. Use when a user asks for a logo, wordmark, icon, monogram, or favicon. Trigger with "make a logo", "generate a…
fireworks-tech-graph
Create technical diagrams such as software architecture, data flow, flowcharts, sequence diagrams, C4 reviews, cloud deployments, event streams, observability investigations, agent/memory systems, UML, ER, network topology, timelines, and technical concept maps, then export SVG, PNG, focused semantic SVG-to-GIF…
data-viz-renderer
Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards. Offers 8 color palettes and built-in icons with no external dependencies. Triggered when users request data visualization, infographics, charts, or dashboards.
infographic-creator
An information-graphic creation guide that turns written information into a visual layout using AntV Infographic, a description language for rendering infographics.
slides
A slide generator that creates PNG images for presentation decks, including simple backgrounds for spoken-video scripts and fuller layouts for standalone presentations.
reimagine-it
Content-Derived Design — reads existing HTML and writes a stronger standalone page from headings, facts, names, dates, numbers, links, emails, and colors already in that file. CLI: npx reimagine-it --auto -i page.html -o out.html; also variations, lock, and audit. Use when the user says /reimagine-it, "reimagine it"…