Skip to main content

inline-vis

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.

Quellinformationen

Repository
ymichael/bb
Letzte Quellaktivität
10. Juli 2026 um 04:26
Erkannte Sprache von SKILL.md
Englisch
Sterne
270
Forks
25

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md wird angezeigt

SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
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.
Auf GitHub ansehen