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 skills add SZoloth/skill-pack --skill visual-explainergit clone --depth 1 https://github.com/SZoloth/skill-packWrote 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/szoloth/skill-pack/visual-explainer)<a href="https://agentmods.dev/skills/szoloth/skill-pack/visual-explainer"><img src="https://agentmods.dev/badge/skills/szoloth/skill-pack/visual-explainer/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/szoloth/skill-pack/visual-explainer"><img src="https://agentmods.dev/badge/skills/szoloth/skill-pack/visual-explainer.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.00090 | $0.04162 |
| Opus 5.5 | $0.00036 | $0.01665 |
| Sonnet 5.5 | $0.00018 | $0.00832 |
| Haiku 4.5 | $0.00009 | $0.00416 |
Grade A, and why
visual-explainer scanned grade A with 0 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 1mo 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.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
80% identical to visual-explainer — 445 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 226 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual Explainer
Generate self-contained HTML files for technical diagrams, visualizations, and data tables. Always open the result in the browser. Never fall back to ASCII art when this skill is loaded.
Proactive table rendering. When you're about to present tabular data as an ASCII box-drawing table in the terminal (comparisons, audits, feature matrices, status reports, any structured rows/columns), generate an HTML page instead. The threshold: if the table has 4+ rows or 3+ columns, it belongs in the browser. Don't wait for the user to ask — render it as HTML automatically and tell them the file path. You can still include a brief text summary in the chat, but the table itself should be the HTML page.
Workflow
1. Think (5 seconds, not 5 minutes)
Before writing HTML, commit to a direction. Don't default to "dark theme with blue accents" every time.
Who is looking? A developer understanding a system? A PM seeing the big picture? A team reviewing a proposal? This shapes information density and visual complexity.
What type of diagram? Architecture, flowchart, sequence, data flow, schema/ER, state machine, mind map, data table, timeline, or dashboard. Each has distinct layout needs and rendering approaches (see Diagram Types below).
What aesthetic? Pick one and commit:
- Monochrome terminal (green/amber on black, monospace everything)
- Editorial (serif headlines, generous whitespace, muted palette)
- Blueprint (technical drawing feel, grid lines, precise)
- Neon dashboard (saturated accents on deep dark, glowing edges)
- Paper/ink (warm cream background, hand-drawn feel, sketchy borders)
- Hand-drawn / sketch (Mermaid
handDrawnmode, wiggly lines, informal whiteboard feel) - IDE-inspired (borrow a real color scheme: Dracula, Nord, Catppuccin, Solarized, Gruvbox, One Dark)
- Data-dense (small type, tight spacing, maximum information)
- Gradient mesh (bold gradients, glassmorphism, modern SaaS feel)
Vary the choice each time. If the last diagram was dark and technical, make the next one light and editorial. The swap test: if you replaced your styling with a generic dark theme and nobody would notice the difference, you haven't designed anything.
What ships with it
16 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.
- .gitignore 10 B
- banner.png 1160 KB
- CHANGELOG.md 2.7 KB
- LICENSE 1.0 KB
- prompts/diff-review.md 8.2 KB
- prompts/fact-check.md 4.6 KB
- prompts/generate-web-diagram.md 913 B
- prompts/plan-review.md 9.0 KB
- prompts/project-recap.md 7.0 KB
- README.md 6.1 KB
- references/css-patterns.md 27 KB
- references/libraries.md 15 KB
- references/responsive-nav.md 5.7 KB
- templates/architecture.html 17 KB
- templates/data-table.html 16 KB
- templates/mermaid-flowchart.html 13 KB
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.
- 1mo ago First seen · 226 lines · 90 tokens per session scan A 395ec05a7ba2
visual-explainer is a skill published in the GitHub repository SZoloth/skill-pack (14 stars, last pushed 1mo ago), licensed MIT. It adds 90 tokens to every session and 4,162 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 80% identical to visual-explainer, differing in 445 lines, and is treated as a copy.
Other skills, from other repositories
customer-journey-map
Construye un mapa de recorrido del cliente para un producto, servicio o experiencia. Úsalo cuando se te pida mapear un recorrido del cliente, crear un viaje del usuario, documentar puntos de contacto y puntos de fricción, o diseñar un mapa de experiencia. Produce un mapa de recorrido completo con etapas, puntos de…
user-research-synthesis
Analiza y sintetiza hallazgos de investigación de usuarios en insights estructurados y accionables. Úsalo cuando te proporcionen datos de investigación de usuarios, transcripciones de entrevistas, resultados de encuestas o feedback de usuarios que necesiten ser analizados y resumidos. Produce una síntesis temática con…
design-handoff-brief
Transform feature briefs into structured design briefs that give designers the context they need before opening Figma. Use when asked to write a design brief, create a design handoff, brief a designer on a new feature, or translate a PRD into design requirements. Produces a brief with user goal, emotional context…
explorer-interface-brief
Use when asked to design the interface for an interactive 3D explorer, plan a UI for exploring a 3D model of a topic, or write an image-model prompt for a 3D learning app mock-up. Produces, from a topic, the UI design brief (audience, layout, panels, interactions, label style, colour palette, accessibility) and an…
architectural-programme-brief
Turn a client's wishes into an architectural brief that can actually be designed against — the accommodation schedule, the adjacencies, the budget reality, and the constraints named before they become change orders. Use when asked to write an architectural brief, prepare a project brief for a building, run a client…
architecture-client-presentation
Present a design to a client so they can make a decision rather than react to a picture — the brief restated, the moves explained against it, the options with their trade-offs, and a specific decision requested. Use when asked to present a design to a client, prepare a design review meeting, present concept options…