ring:visualizing

A workflow for creating self-contained HTML visual explanations, such as architecture diagrams, comparison tables, code-diff views, dashboards, and slide presentations. The results use a consistent visual style and can be opened in a browser.

In plain words
What is it for?
Use it for architecture overviews, large comparison tables, project or code reviews, dashboards, plans, recaps, and presentations. It is unnecessary for small tables or simple prose answers.
Why use it?
Complex relationships and comparisons can be difficult to understand in plain text or terminal tables. This turns them into reusable visual pages that are easier to inspect and share.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/lerianstudio/ring/visualizing
Any agent
npx skills add LerianStudio/ring --skill visualizing
Clone the repo
git clone --depth 1 https://github.com/LerianStudio/ring

Made for: Claude Code, Codex.

Per session 98 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,567 The whole file, excluding the scripts and references it only reads on demand.
Security scan C 2 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00098 $0.03567
Opus 5 $0.00049 $0.01784
Sonnet 5 $0.00020 $0.00713
Haiku 4.5 $0.00010 $0.00357

Measured 2d ago against content hash a2b37bd7efa7, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade C, and why

ring:visualizing scanned grade C 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 2d 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.

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.

command -v d2 || brew install d2 # or: curl -fsSL https://d2lang.com/install.sh | sh

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

command -v d2 || brew install d2 # or: curl -fsSL https://d2lang.com/install.sh | sh
default/skills/visualizing/SKILL.md · 192 lines

How it starts

The opening of the file, as written. The whole thing — 192 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Visual explainer

When to use

  • User asks for a visual explanation, architecture overview, or comparison table
  • About to render a complex ASCII table (4+ rows or 3+ columns) in the terminal
  • Need a branded, self-contained HTML visualization with Lerian styling
  • User asks for a slide deck or presentation
  • User asks for diff review, plan review, project recap, or dashboard visualization

Skip when

  • Output is a simple table (fewer than 4 rows and 3 columns) that fits well in terminal
  • User explicitly requests plain text or markdown output
  • The answer is better as ordinary markdown prose than as a durable artifact

Do not use the markdown/prose skip when the user explicitly asks for visual, diagram, artifact, topology, comparison, map, matrix, quadrant, slides, or axis output. In those cases, generate the visual artifact unless they also explicitly ask for text-only output.

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: If the table has 4+ rows or 3+ columns, use an HTML page. Don't wait for the user to ask.

Diagram engine: D2 (not Mermaid)

Topology/connection diagrams are rendered by the D2 CLI to a static inline SVG, then embedded in the page. D2 (ELK/dagre layout) produces clean, deterministic layouts; the SVG is static, so there is no render flicker, no foreignObject breakage, and no theme-refresh bug. Dark/light is baked INTO the SVG by D2.

Prerequisite — the d2 binary:

command -v d2 || brew install d2     # or: curl -fsSL https://d2lang.com/install.sh | sh

If d2 is not installed and cannot be installed, fall back to CSS-grid card layouts (architecture.html) for structure — never to ASCII art.

Generation flow:

  1. Write diagram.d2, starting with the Lerian D2 preamble (in ./templates/diagram.html and ./references/libraries.md).
  2. d2 --theme=0 --dark-theme=200 --layout=elk diagram.d2 diagram.svg
  3. Strip the leading <?xml ...?> declaration; paste the <svg>...</svg> into .diagram-canvas.
  4. The pan/zoom engine in diagram.html is SVG-agnostic — it reads viewBox and works as-is.

Read the full file on GitHub · 192 lines

Changes

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.

  1. 2d ago First seen · 192 lines · 98 tokens per session scan C a2b37bd7efa7

Subscribe to this mod's changes

ring:visualizing is a skill published in the GitHub repository LerianStudio/ring (210 stars, last pushed 13d ago), licensed Apache-2.0. It adds 98 tokens to every session and 3,567 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it C with 2 findings (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.

Related

Other skills, from other repositories

fetch-url-as-markdown

Fetch a web page (URL) and return clean Markdown via local trafilatura, with Exa MCP as a fallback for JS-rendered or anti-bot pages. Use when the user asks to read, fetch, scrape, summarize, or quote a URL — prefer this over the built-in WebFetch tool. Don't use for binary files (PDFs, images, archives) or for…

CodeAlive-AI/ai-driven-development · 90 tokens

new-plugin

Factory line for adding a new HAR verification plugin (like playwright or rocketsim) for any framework — research the framework docs, build the template under src/templates/plugins/, register it everywhere, validate on a real repository, and open a PR. Use when asked to add/create a plugin, plugin template, or…

os-factory/har · 89 tokens

chrome-extension

Use when building or shipping a Manifest V3 browser extension and hitting its quirks — service worker dying and losing state, permission warnings, a Chrome Web Store rejection, content-script/worker/popup messaging, or an MV2-to-V3 migration. NOT a generic web app (that is nextjs), NOT a desktop shell (that is…

ericrisco/rsc-harness · 76 tokens

codedrobe-adapter-dev

Add, inspect, repair, or validate CodeDrobe Core adapters for Chromium/Electron AI desktop applications. Use when supporting a new app, updating Codex or WorkBuddy compatibility after an app release, discovering installation paths or CDP targets, selecting stable DOM landmarks, adding renderer profiles or…

CodeDrobe/skills · 81 tokens

brainstorm

Explores a codebase, researches the problem space, and produces an approved design specification before any code is written. Use when the user wants to create a new feature, add significant functionality, redesign a subsystem, or build something that touches multiple parts of the project.

greglas75/zuvo · 56 tokens

playwright-skill

Support-only Playwright runtime/reference for browser-automation — dev-server detection, a Node.js script runner, quiet screenshot helpers, SPA readiness helpers, and custom HTTP headers. Use when browser-automation selects the bundled Playwright fallback; do not route user intent here directly.

alexei-led/cc-thingz · 59 tokens