visualize

Name: visualize
Author: Undertone0809

247stars30forks

How to install visualize?

undertone0809/rudder/visualize

$npx -y skills add Undertone0809/rudder --skill visualize

Installs into the current project.

Summary

Create safe inline visual explanations in Rudder Chat. Use when asked for a chart, plot, diagram, timeline, comparison, static map, simulator, scenario view, or compact visual that materially improves understanding. Prefer Mermaid for static node-and-edge structures; use Rudder's

Files · 1

View on GitHub

SKILL.md

1	# Visualize
2
3	Create a visual only when it materially improves what the user can understand,
4	compare, or decide. The Rudder inline runtime is scriptless and has no network
5	access, so design for a useful first render with declarative HTML, SVG, and CSS.
6
7	## Choose The Output
8
9	1. Use a normal fenced Mermaid block when labeled nodes and edges fully explain
10	a static structure or flow. Do not create an HTML artifact for that case.
11	2. Use an inline visual for charts, timelines, comparisons, spatial layouts,
12	static scenario views, or compact reports that benefit from custom geometry.
13	3. Use the v1 message envelope only in Rudder Chat. It is a Rudder protocol,
14	independent of Codex, Claude, Gemini, Cursor, OpenCode, Pi, Hermes, process,
15	HTTP, or gateway filesystem conventions.
16	4. Outside Rudder Chat, fall back to Mermaid, Markdown tables, or concise prose.
17	Do not emit a Rudder envelope on a surface that cannot render it.
18
19	## Message Envelope
20
21	- Write only an HTML fragment. Do not include a doctype or `html`, `head`, or
22	`body` elements.
23	- Keep every fragment at or below 64 KiB UTF-8, all fragments together at or
24	below 128 KiB, and the complete visual-bearing final reply at or below
25	256 KiB. Emit at most three visuals in one assistant message.
26	- Give the fragment one top-level markup root, `<div id="widget">`. Bounded
27	`<style>` blocks may precede that root.
28	- Put any custom CSS in bounded `<style>` elements. Inline `style` attributes
29	are removed.
30	- Check the fragment before replying. Fix escaped markup such as literal `\"`
31	or `\n`, missing labels, clipped content, and malformed SVG.
32	- Put this exact opening marker on its own line where the visual should render,
33	then the fragment, then the exact closing marker on its own line:
34
35	```text
36	:::rudder-inline-visual:v1
37	<style>#widget .series { color: var(--viz-series-1); }</style>
38	<div id="widget">...</div>
39	:::rudder-inline-visual:end
40	```
41
42	The markers must have no indentation, attributes, or trailing text. Keep any
43	necessary explanation outside the envelope. Never emit
44	`::codex-inline-vis{...}`, `::rudder-inline-vis{...}`, a file path, an iframe,
45	or a second link to source HTML; Rudder owns capture, trusted placement,
46	persistence, sandboxing, and rendering.
47
48	## Rudder Safety Boundary
49
50	Rudder sanitizes the fragment before rendering, but generate valid input rather
51	than relying on sanitization:
52
53	- Do not write scripts, event handlers, JavaScript URLs, forms, links, images,
54	media, nested frames, embedded objects, canvas, or external resources.
55	- Do not use `fetch`, XHR, WebSocket, module imports, CDN libraries, web fonts,
56	or URL-bearing CSS. The artifact has no network access.
57	- Do not use active controls such as buttons, inputs, selects, or textareas.
58	They are removed because the scriptless runtime cannot preserve their state
59	or behavior safely.
60	- Do not implement a parent bridge, follow-up prompt action, filesystem access,
61	or access to Rudder state, credentials, cookies, storage, or APIs.
62	- Use `<details>` and `<summary>` for the only stateful native disclosure.
63	Use `data-tooltip` on `<summary>` for short supplementary hover/focus text.
64	A tooltip on any other preserved element is hover-only and must not contain
65	essential information.
66	- Keep all data needed for the visual inside the fragment. Use inline SVG for
67	charts and supplied geometry; never fetch a basemap or invent geography.
68
69	Read [references/runtime-contract.md](references/runtime-contract.md) before
70	writing custom markup or CSS. Use
71	[assets/example-chart.html](assets/example-chart.html) as a structure example,
72	not as data or copy to repeat.
73
74	## Composition
75
76	- Start with the visual itself. Do not add decorative KPI rows, repeated
77	legends, permanent toolbars, or explanatory paragraphs inside the fragment.
78	- Use one dominant chart, diagram, or comparison. Add up to three compact
79	summary cards only when their values are central to reading the visual.
80	- For a requested simulator or adjustable explorer, show representative static
81	scenarios or a disclosure-based comparison and state the limitation in the
82	surrounding response. Do not pretend controls survived when they cannot.
83	- For maps, use only user-supplied or locally available geo

People who liked this also viewed

6 picks

Type

visualize

247stars30forks

View on GitHub

How to install visualize?

undertone0809/rudder/visualize

$npx -y skills add Undertone0809/rudder --skill visualize

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Visualize
2
3	Create a visual only when it materially improves what the user can understand,
4	compare, or decide. The Rudder inline runtime is scriptless and has no network
5	access, so design for a useful first render with declarative HTML, SVG, and CSS.
6
7	## Choose The Output
8
9	1. Use a normal fenced Mermaid block when labeled nodes and edges fully explain
10	a static structure or flow. Do not create an HTML artifact for that case.
11	2. Use an inline visual for charts, timelines, comparisons, spatial layouts,
12	static scenario views, or compact reports that benefit from custom geometry.
13	3. Use the v1 message envelope only in Rudder Chat. It is a Rudder protocol,
14	independent of Codex, Claude, Gemini, Cursor, OpenCode, Pi, Hermes, process,
15	HTTP, or gateway filesystem conventions.
16	4. Outside Rudder Chat, fall back to Mermaid, Markdown tables, or concise prose.
17	Do not emit a Rudder envelope on a surface that cannot render it.
18
19	## Message Envelope
20
21	- Write only an HTML fragment. Do not include a doctype or `html`, `head`, or
22	`body` elements.
23	- Keep every fragment at or below 64 KiB UTF-8, all fragments together at or
24	below 128 KiB, and the complete visual-bearing final reply at or below
25	256 KiB. Emit at most three visuals in one assistant message.
26	- Give the fragment one top-level markup root, `<div id="widget">`. Bounded
27	`<style>` blocks may precede that root.
28	- Put any custom CSS in bounded `<style>` elements. Inline `style` attributes
29	are removed.
30	- Check the fragment before replying. Fix escaped markup such as literal `\"`
31	or `\n`, missing labels, clipped content, and malformed SVG.
32	- Put this exact opening marker on its own line where the visual should render,
33	then the fragment, then the exact closing marker on its own line:
34
35	```text
36	:::rudder-inline-visual:v1
37	<style>#widget .series { color: var(--viz-series-1); }</style>
38	<div id="widget">...</div>
39	:::rudder-inline-visual:end
40	```
41
42	The markers must have no indentation, attributes, or trailing text. Keep any
43	necessary explanation outside the envelope. Never emit
44	`::codex-inline-vis{...}`, `::rudder-inline-vis{...}`, a file path, an iframe,
45	or a second link to source HTML; Rudder owns capture, trusted placement,
46	persistence, sandboxing, and rendering.
47
48	## Rudder Safety Boundary
49
50	Rudder sanitizes the fragment before rendering, but generate valid input rather
51	than relying on sanitization:
52
53	- Do not write scripts, event handlers, JavaScript URLs, forms, links, images,
54	media, nested frames, embedded objects, canvas, or external resources.
55	- Do not use `fetch`, XHR, WebSocket, module imports, CDN libraries, web fonts,
56	or URL-bearing CSS. The artifact has no network access.
57	- Do not use active controls such as buttons, inputs, selects, or textareas.
58	They are removed because the scriptless runtime cannot preserve their state
59	or behavior safely.
60	- Do not implement a parent bridge, follow-up prompt action, filesystem access,
61	or access to Rudder state, credentials, cookies, storage, or APIs.
62	- Use `<details>` and `<summary>` for the only stateful native disclosure.
63	Use `data-tooltip` on `<summary>` for short supplementary hover/focus text.
64	A tooltip on any other preserved element is hover-only and must not contain
65	essential information.
66	- Keep all data needed for the visual inside the fragment. Use inline SVG for
67	charts and supplied geometry; never fetch a basemap or invent geography.
68
69	Read [references/runtime-contract.md](references/runtime-contract.md) before
70	writing custom markup or CSS. Use
71	[assets/example-chart.html](assets/example-chart.html) as a structure example,
72	not as data or copy to repeat.
73
74	## Composition
75
76	- Start with the visual itself. Do not add decorative KPI rows, repeated
77	legends, permanent toolbars, or explanatory paragraphs inside the fragment.
78	- Use one dominant chart, diagram, or comparison. Add up to three compact
79	summary cards only when their values are central to reading the visual.
80	- For a requested simulator or adjustable explorer, show representative static
81	scenarios or a disclosure-based comparison and state the limitation in the
82	surrounding response. Do not pretend controls survived when they cannot.
83	- For maps, use only user-supplied or locally available geo

People who liked this also viewed

6 picks

Type