inline-vis

inline-vis is a skill for Claude Code, Codex from get-bb/bb. It costs 56 tokens per session (1,882 once invoked), scanned A, original, MIT.

A way to show a small HTML demo, chart, or report directly inside an assistant message. It uses a workspace HTML file displayed in a restricted browser frame.

In plain words
What is it for?
Use it after creating or updating an HTML visualization that the user should inspect in the conversation.
Why use it?
It saves the reader from opening a separate file or preview panel to see the result. The display is isolated from the main page and its data.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it after creating or updating an HTML visualization that the user should inspect in the conversation.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/get-bb/bb/inline-vis
About the project

bb is an agentic IDE that lets users control, customize, and automate a software-development environment through a desktop app, web app, command-line interface, or HTTP API. Developers use it to run work in observable threads that can be steered or handed off to other agents. Its catalogue add-ons provide skills and instructions for working with bb.

get-bb/bb · 4,656 stars · on GitHub · getbb.app

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.

Any agent
npx skills add get-bb/bb --skill inline-vis
Clone the repo
git clone --depth 1 https://github.com/get-bb/bb

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for inline-vis

README.md
[![agentmods](https://agentmods.dev/badge/skills/get-bb/bb/inline-vis/github.svg)](https://agentmods.dev/skills/get-bb/bb/inline-vis)
Your own site
<a href="https://agentmods.dev/skills/get-bb/bb/inline-vis"><img src="https://agentmods.dev/badge/skills/get-bb/bb/inline-vis/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.

agentmods 80×15 button for inline-vis

Your own site · 80×15
<a href="https://agentmods.dev/skills/get-bb/bb/inline-vis"><img src="https://agentmods.dev/badge/skills/get-bb/bb/inline-vis.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 56 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,882 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
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.1 $0.00056 $0.01882
Opus 5.5 $0.00022 $0.00753
Sonnet 5.5 $0.00011 $0.00376
Haiku 4.5 $0.00006 $0.00188

Measured 15d ago against content hash 7330590e8559, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

inline-vis 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 15d 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.

plugins/inline-vis/skills/inline-vis/SKILL.md · 156 lines

How it starts

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

Inline previews

Use this when the user should see an HTML page or a Markdown document inline in the assistant message. There are two forms. Pick by where the page should live.

Form Use it for
```inline-vis fenced block A small, self-contained HTML page written directly in the reply. Nothing is written to disk.
::inline-vis{file="…"} directive A page or Markdown document that lives in the workspace or thread storage: bigger pages, pages with sibling assets, anything to keep.

The reader sees an HTML page as part of your reply: no card, no title bar, on the thread's own background, as tall as its content. Put the block or the directive where the page belongs in the reply. The reader already sees the page, so do not announce it, say where it is, or restate it. Write only what the page does not say.

Fenced block: a page written in the reply

Write a fenced code block whose language is inline-vis. The body of the block is the HTML page itself, either a fragment or a full document:

```inline-vis
<div style="display:flex;gap:12px">…</div>
```
  • The page appears once the closing fence arrives. While you are still writing it, the reader sees a short "Writing visualization…" line, so close the fence.
  • It needs no file and no tool call. Nothing is saved, so use the directive for anything the user should keep or open later.
  • The page cannot reference sibling files by relative path. Inline its CSS, JavaScript, and data, or load them from absolute https:// URLs.
  • If the page itself contains three backticks, open and close the block with four backticks.
  • The frame fits the page, up to 2000 pixels, and a taller page scrolls inside it. The block takes no attributes.
  • Keep it small. Every character of the page is part of your reply. For a large page, write a file and use the directive.
  • The reader can reveal the HTML source from a button that appears over the page. If the reply ends before the closing fence, or the block is empty, the reader sees an ordinary code block instead.

Read the full file on GitHub · 156 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. 15d ago Changed · +104 lines · +15 tokens per session 7330590e8559
  2. 1mo ago Changed 0ab10b80be30
  3. 1mo ago Changed · +13 lines · +23 tokens per session 0721a5d1c443
  4. 1mo ago Changed · -17 lines · -27 tokens per session 76f9015134dc
  5. 1mo ago First seen · 56 lines · 45 tokens per session scan A 0722c2d286c2

Subscribe to this mod's changes

inline-vis is a skill published in the GitHub repository get-bb/bb (4,656 stars, last pushed today), licensed MIT. It adds 56 tokens to every session and 1,882 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. 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

using-grove

Use when orchestrating Grove workspaces from outside, including creating or supervising host or container agents, steering a fleet, using Grove CLI or MCP tools, or having agents write to each other through the mailbox. Also use when splitting work across workspaces, reviewing a diff from several angles, managing…

bearlike/Grove · 92 tokens

working-in-grove

Use when working inside a Grove workspace, including reporting task phase, updating a workspace or its ticket links, using GROVEPHASEFILE, writing to another Grove agent through the mailbox, or waiting on slow work like CI by registering a watch instead of sleeping. Also use when a worktree has a phase file, when…

bearlike/Grove · 100 tokens

collaborating-on-diagrams

Use when working with an existing .drawio diagram through Grove collaboration. Triggers on opening, reading, editing, updating, stopping, or recovering a diagram in a Grove workspace. Covers revisioned managed writes, XML-preserving edits, collaboration state, conflicts, read-only stop, and container/editor limits.

bearlike/Grove · 68 tokens

mocking-up-in-grove

Use when a visual or frontend task in a Grove workspace needs a mockup approved before code — a new control, a redesigned surface, a layout change. Covers drawing a draw.io mockup through Grove's diagram tools, previewing it in the browser, getting sign-off, filing the approved image on the tracker issue, and handing…

bearlike/Grove · 90 tokens

leading-in-grove

Use when you lead a fleet of Grove teammates toward one deliverable, including deciding how many to spawn and how to split the work, writing their onboarding prompt, getting acknowledgment, running scheduled check-ins, answering their mailbox questions, keeping tickets and your own status compaction-proof, reviewing…

bearlike/Grove · 118 tokens

configuring-grove

Use when configuring Grove for a user or project, including agent rosters, init scripts, containers, private credentials, daemon or MCP setup, or the native-versus-terminal launch of a Claude Code or Codex agent. Also use when resolving config layers, validating a config schema, or explaining why a workspace starts…

bearlike/Grove · 92 tokens