Emit a sandboxed inline HTML visualization in an assistant message when a workspace .html file should render in-thread. Use after writing or updating a demo/chart/report HTML file the user should see without opening a panel.
Scanned 8/31/2026
Install to Claude Code
npx -y skills add get-bb/bb --skill inline-vis --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Inline Vis?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/get-bb-inline-vis)More formats (shields.io, HTML) on the badges page.
---
name: inline-vis
description: Emit a sandboxed inline HTML visualization in an assistant message when a workspace .html file should render in-thread. Use after writing or updating a demo/chart/report HTML file the user should see without opening a panel.
---
# Inline HTML visualizations
When the user should see a small HTML demo, chart, or report **inline in the
assistant message**, write (or update) a workspace-relative `.html` file, then
emit this **message directive** as its own block (not inside a fenced code
block):
```text
::inline-vis{file="demo.html"}
```
## Rules
- `file` is **workspace-relative** (e.g. `demo.html`, `charts/out.html`). Never
use absolute paths.
- `height` is optional and sets the iframe viewport height in pixels. It must be
a whole number from 120 through 1200; omit it for the 224px default.
- Only `.html` / `.htm` files are accepted.
- Inline and external CSS/JavaScript are supported. Remote images, fonts,
media, fetches, and WebSockets are also allowed subject to normal browser
CORS, mixed-content, and remote-server policies. Scripts execute in an
opaque-origin iframe and cannot access the bb page, cookies, or storage.
- Keep files small (under the sidebar preview's 5 MiB document limit).
- Emit the directive only after the file exists on disk in the current thread
workspace.
- Do **not** put the directive inside backticks or a markdown code fence, or it
stays literal text.
- Incomplete streaming syntax stays literal until the closing `}` arrives — emit
a complete directive in one piece when possible.
## Example turn
1. Write `demo.html` with a simple visualization (inline styles, no remote JS).
2. Reply with a short caption and the directive:
```text
Here is the chart:
::inline-vis{file="demo.html"}
```
For a taller visualization, emit for example:
```text
::inline-vis{file="demo.html" height="640"}
```
The bb app replaces the directive with a sandboxed preview. If the plugin is
disabled or the path is invalid, users see the original directive source or an
inline error from the plugin.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!