Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/imshaikot/render-visual-skill/render-visualnpx skills add imshaikot/render-visual-skill --skill render-visualgit clone --depth 1 https://github.com/imshaikot/render-visual-skillWhat 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 | $0.00240 | $0.09794 |
| Opus 5 | $0.00120 | $0.04897 |
| Sonnet 5 | $0.00048 | $0.01959 |
| Haiku 4.5 | $0.00024 | $0.00979 |
Grade B, and why
render-visual scanned grade B with 2 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 yesterday.
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.
Enumerates other installed skillsmediumAgent snooping
Other skills' SKILL.md files reveal prompts, capabilities and secrets that should be invisible to peers.
ls -d ~/.claude/skills/render-visual ~/.agents/skills/render-visual \ Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
still screenshots as a success. `curl -fsSL -o image.png "…"` first. How it starts
The opening of the file, as written. The whole thing — 587 lines — stays where its author put it; the contents beside it link to each section on GitHub.
render-visual — designed PNGs from HTML, no design tool
Every image this skill produces is a small HTML/SVG page screenshotted by headless Chrome: fully versioned, diffable, regenerable in seconds when the copy changes, and styled by a theme file instead of hand-picked colors.
| Template | Canvas | For |
|---|---|---|
$SKILL/templates/diagram.html |
1360×740 | Architecture and flow figures: nodes, labeled arrows, a return path, a line-crossing bridge |
$SKILL/templates/slide.html |
1920×1080 | Presentation slides: kicker, headline with a gradient phrase, up to three points, footer |
$SKILL/templates/card.html |
1200×630 | Social/og cards: mark, headline, one-paragraph pitch, chips, bottom rule |
$SKILL/templates/sequence.html |
1360×740 | Sequence diagrams: lifelines, calls and returns, activations — static, or animated step by step |
$SKILL/templates/swimlane.html |
1360×740 | Cross-functional flows: lanes that own the steps, labelled handoffs, an exception path that never leaves its lane |
$SKILL/templates/tree.html |
1360×740 | Hierarchies, both idioms: an indented tree view (files, nav, an outline) beside the same tree drawn node-link |
$SKILL/templates/cluster.html |
1360×740 | What runs inside a boundary: control plane, worker nodes, pods, and the state that outlives a rebuild |
$SKILL/templates/deployment.html |
1360×740 | Which artifact lands on which machine, over which protocol: el-cube nodes, «stereotypes», artifact chips — see §5 |
$SKILL/templates/flowchart.html |
computed | Mermaid flowcharts. A vertically long process chart — decisions, branch labels, subgraph boundaries, retry loops. Never hand-authored: scripts/mermaid.mjs generates it from mermaid text — see §10 |
$SKILL/templates/mindmap.html |
1360×740 | A question in the middle and the answers around it: six branches, two leaves each, one branch emphasised |
$SKILL/templates/code.html |
1360×740 | Code snippets in a themed window (Carbon-style): hand-highlighted tokens, line numbers, a highlight line, diff rows — see §7 |
$SKILL/templates/charts.html |
parts sheet | Browsable catalogue of the chart and BI parts — pie, donut, bar, line, area, stacked, scatter, funnel, gauge, heatmap, sparkline, KPI tile, table, dashboard. Schematic figures, not plotted data — see §5 |
$SKILL/templates/palette.html |
1360×980 | Theme specimen: the tokens, both fonts, the gradient, the alpha ladders, the parts dressed by that theme. A catalogue, never a deliverable — see §4 |
$SKILL/templates/elements.html |
parts sheet | Browsable catalogue of the frames, infrastructure shapes, deployment node and icon glyphs in $SKILL/parts/. Reference them, don't copy them. Never a deliverable — see §5 |
| Theme | Mood | Fonts |
|---|---|---|
ember |
Warm dark — amber-hued neutrals, cyan/ember/magenta accents | Inter Tight + JetBrains Mono |
slate |
Cool dark — violet-leaning neutrals, jewel accents | Space Grotesk + IBM Plex Mono |
paper |
Light editorial — warm paper, serif display, print restraint | Fraunces + IBM Plex Mono |
terminal |
Near-black phosphor — mono everything, green/amber | JetBrains Mono |
blueprint |
Drafting board — cyanotype navy, chalk lines, a grid that reads | Archivo + Roboto Mono |
frost |
Light UI — cool white, glass surfaces, indigo/teal | Manrope + JetBrains Mono |
neon |
After hours — indigo dark, high-chroma magenta and cyan | Chakra Petch + Fira Code |
sepia |
Aged press — cream stock, brown ink, typewriter mono | Newsreader + Courier Prime |
To see one whole, render the specimen sheet in it:
node "$SKILL/scripts/render.mjs" "$SKILL/templates/palette.html" palette.png --theme blueprint
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.
- LICENSE 1.0 KB
- parts/el-actor.svg 284 B
- parts/el-browser.svg 941 B
- parts/el-chart-area.svg 601 B
- parts/el-chart-bar.svg 1.1 KB
- parts/el-chart-donut.svg 770 B
- parts/el-chart-funnel.svg 451 B
- parts/el-chart-gauge.svg 443 B
- parts/el-chart-hbar.svg 1.2 KB
- parts/el-chart-heatmap.svg 2.9 KB
- parts/el-chart-line.svg 770 B
- parts/el-chart-pie.svg 600 B
- parts/el-chart-scatter.svg 1.3 KB
- parts/el-chart-stacked.svg 1.3 KB
- parts/el-cloud.svg 211 B
- parts/el-cube.svg 663 B
- parts/el-dashboard.svg 2.7 KB
- parts/el-database.svg 437 B
- parts/el-phone.svg 911 B
- parts/el-queue.svg 551 B
- parts/el-router.svg 320 B
- parts/el-server.svg 1.1 KB
- parts/el-shield.svg 287 B
- parts/el-sparkline.svg 403 B
- parts/el-stat-tile.svg 532 B
- parts/el-table.svg 1.8 KB
- parts/el-terminal.svg 1.0 KB
- parts/el-window.svg 1.1 KB
- parts/g-api.svg 322 B
- parts/g-bolt.svg 180 B
- parts/g-chart-bar.svg 198 B
- parts/g-chart-line.svg 205 B
- parts/g-chart-pie.svg 239 B
- parts/g-check.svg 194 B
- parts/g-chip.svg 364 B
- parts/g-clock.svg 183 B
- parts/g-cloud.svg 210 B
- parts/g-dashboard.svg 220 B
- parts/g-db.svg 295 B
- parts/g-file.svg 259 B
- parts/g-filter.svg 176 B
- parts/g-folder.svg 256 B
- parts/g-gauge.svg 191 B
- parts/g-gear.svg 363 B
- parts/g-globe.svg 223 B
- parts/g-key.svg 206 B
- parts/g-layers.svg 252 B
- parts/g-lock.svg 253 B
- parts/g-mail.svg 213 B
- parts/g-mobile.svg 191 B
- parts/g-net.svg 287 B
- parts/g-screen.svg 207 B
- parts/g-search.svg 190 B
- parts/g-table.svg 235 B
- parts/g-term.svg 211 B
- parts/g-user.svg 177 B
- parts/g-users.svg 282 B
- parts/g-warn.svg 245 B
- scripts/animate.mjs 8.8 KB runs code
- scripts/chrome.mjs 36 KB runs code
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.
- yesterday First seen · 587 lines · 240 tokens per session scan B 47ee09529df3
render-visual is a skill published in the GitHub repository imshaikot/render-visual-skill (7 stars, last pushed 6d ago), licensed MIT. It adds 240 tokens to every session and 9,794 once invoked, about $0.0012 per session on Opus 5. A static security scan graded it B with 2 findings (enumerates other installed skills, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
frame-flowchart-sticky
SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm.
arxiv-paper-writer
Write LaTeX ML/AI review articles for arXiv using the IEEEtran template and verified BibTeX citations. Use when writing, planning, or continuing an arXiv review/survey paper, or when validating and repairing citations in an existing LaTeX project.
collaborating-with-gemini
Use the Gemini CLI to consult Gemini and delegate coding tasks for prototyping, debugging, and code review. Supports multi-turn sessions via SESSIONID. Optimized for low-token, file/line-based handoff.
create-diagram
Create architecture diagrams from a local codebase or system description. Use when the user asks to diagram a repo, map system architecture, show component relationships, create drill-down views, or explain a system visually with tld.
latex-rhythm-refiner
Post-process LaTeX project prose to improve readability through varied sentence and paragraph lengths. Removes filler phrases and unnecessary transitions while preserving all citations and semantic meaning. Use after drafting is complete, when sections read as monotonous or blocky.
commit
Atomic git commit with conventional message. Use when the user says "commit", "save my changes", "commit this", or wants to create a git commit. Stages specific files, writes a conventional commit message with body explaining non-obvious decisions. Never uses git add -A.