New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Visualize

by Undertone0809 in Undertone0809/rudder

Create safe inline visual explanations in Rudder Chat. An agent skill from Undertone0809/rudder.

Apache-2.0Auto-check passedDevelopment

Install Visualize

skills CLI
$ npx skills add Undertone0809/rudder --skill visualize -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Undertone0809/rudder visualize --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Undertone0809/rudder.git skills-src && mkdir -p .claude/skills && cp -r skills-src/server/resources/bundled-skills/visualize .claude/skills/visualize && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
visualize
GitHub stars
292
Token cost
~1.8k tokens
SKILL.md length
917 words
Files
4 (incl. references, assets)
Skills in repo
30
Repo updated
First seen
Licence
Apache-2.0

At a glance

Create safe inline visual explanations in Rudder Chat. An agent skill from Undertone0809/rudder.

  • Works in 4 steps: Use a normal fenced Mermaid block when… → Use an inline visual for charts,… → Use the v1 message envelope only in… → …
  • Asked for a chart
  • SKILL.md covers Choose The Output, Message Envelope, Rudder Safety Boundary and Composition, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Visualize is an agent skill from Undertone0809/rudder. 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 runtime-neutral HTML/SVG/CSS message envelope for custom geometry. Rudder visuals are declarative and scriptless: convert simulator requests to static scenarios or disclosure-based comparisons and never rely on JavaScript, network…

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files and assets (for example `agents/openai.yaml` and `references/runtime-contract.md`). Compatibility notes: Rudder Chat v1 inline visual message protocol. Provider-neutral and filesystem-independent; outside Rudder Chat, fall back to Mermaid, Markdown, or prose.

It sits in Development, covering Diagrams. It works with Mermaid and JavaScript. The repository describes itself as: Open-source local Agent harness for self-improving agent teams: run agents, review work, and turn feedback into reusable skills. The licence is Apache-2.0.

When your agent uses it

  • Asked for a chart
  • Compact visual that materially improves understanding

Example prompts

  • “/visualize”

Requirements

  • Compatibility (from SKILL.md): Rudder Chat v1 inline visual message protocol. Provider-neutral and filesystem-independent; outside Rudder Chat, fall back to Mermaid, Markdown, or prose.

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Use a normal fenced Mermaid block when labeled nodes and edges fully explain
  2. Use an inline visual for charts, timelines, comparisons, spatial layouts,
  3. Use the v1 message envelope only in Rudder Chat. It is a Rudder protocol,
  4. Outside Rudder Chat, fall back to Mermaid, Markdown tables, or concise prose.

What it can do on your machine

Read from SKILL.md and the folder at commit a3f49e8. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Rudder Chat v1 inline visual message protocol. Provider-neutral and filesystem-independent; outside Rudder Chat, fall back to Mermaid, Markdown, or prose.

    From compatibility in the SKILL.md frontmatter.

Context cost

Visualize loads about 1.8k tokens when it runs, and up to ~3.3k if it reads all its reference files. Until then it costs about 137 tokens; SKILL.md has 917 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~137
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Undertone0809/rudder at commit a3f49e8, republished under its Apache-2.0 licence (© Undertone0809). 917 words, ~1,832 tokens.

Download SKILL.mdSave it as .claude/skills/visualize/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
visualize
description
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 runtime-neutral HTML/SVG/CSS message envelope for custom geometry. Rudder visuals are declarative and scriptless: convert simulator requests to static scenarios or disclosure-based comparisons and never rely on JavaScript, network access, or external assets.
compatibility
Rudder Chat v1 inline visual message protocol. Provider-neutral and filesystem-independent; outside Rudder Chat, fall back to Mermaid, Markdown, or prose.

Visualize

Create a visual only when it materially improves what the user can understand, compare, or decide. The Rudder inline runtime is scriptless and has no network access, so design for a useful first render with declarative HTML, SVG, and CSS.

Choose The Output

  1. Use a normal fenced Mermaid block when labeled nodes and edges fully explain a static structure or flow. Do not create an HTML artifact for that case.
  2. Use an inline visual for charts, timelines, comparisons, spatial layouts, static scenario views, or compact reports that benefit from custom geometry.
  3. Use the v1 message envelope only in Rudder Chat. It is a Rudder protocol, independent of Codex, Claude, Cursor, OpenCode, Pi, Hermes, process, HTTP, or gateway filesystem conventions.
  4. Outside Rudder Chat, fall back to Mermaid, Markdown tables, or concise prose. Do not emit a Rudder envelope on a surface that cannot render it.

Message Envelope

  • Write only an HTML fragment. Do not include a doctype or html, head, or body elements.
  • Keep every fragment at or below 64 KiB UTF-8, all fragments together at or below 128 KiB, and the complete visual-bearing final reply at or below 256 KiB. Emit at most three visuals in one assistant message.
  • Give the fragment one top-level markup root, <div id="widget">. Bounded <style> blocks may precede that root.
  • Put any custom CSS in bounded <style> elements. Inline style attributes are removed.
  • Check the fragment before replying. Fix escaped markup such as literal \" or \n, missing labels, clipped content, and malformed SVG.
  • Put this exact opening marker on its own line where the visual should render, then the fragment, then the exact closing marker on its own line:
text
:::rudder-inline-visual:v1
<style>#widget .series { color: var(--viz-series-1); }</style>
<div id="widget">...</div>
:::rudder-inline-visual:end

The markers must have no indentation, attributes, or trailing text. Keep any necessary explanation outside the envelope. Never emit ::codex-inline-vis{...}, ::rudder-inline-vis{...}, a file path, an iframe, or a second link to source HTML; Rudder owns capture, trusted placement, persistence, sandboxing, and rendering.

Rudder Safety Boundary

Rudder sanitizes the fragment before rendering, but generate valid input rather than relying on sanitization:

  • Do not write scripts, event handlers, JavaScript URLs, forms, links, images, media, nested frames, embedded objects, canvas, or external resources.
  • Do not use fetch, XHR, WebSocket, module imports, CDN libraries, web fonts, or URL-bearing CSS. The artifact has no network access.
  • Do not use active controls such as buttons, inputs, selects, or textareas. They are removed because the scriptless runtime cannot preserve their state or behavior safely.
  • Do not implement a parent bridge, follow-up prompt action, filesystem access, or access to Rudder state, credentials, cookies, storage, or APIs.
  • Use <details> and <summary> for the only stateful native disclosure. Use data-tooltip on <summary> for short supplementary hover/focus text. A tooltip on any other preserved element is hover-only and must not contain essential information.
  • Keep all data needed for the visual inside the fragment. Use inline SVG for charts and supplied geometry; never fetch a basemap or invent geography.

Read references/runtime-contract.md before writing custom markup or CSS. Use assets/example-chart.html as a structure example, not as data or copy to repeat.

Show full SKILL.md (410 more words)Show less

Composition

  • Start with the visual itself. Do not add decorative KPI rows, repeated legends, permanent toolbars, or explanatory paragraphs inside the fragment.
  • Use one dominant chart, diagram, or comparison. Add up to three compact summary cards only when their values are central to reading the visual.
  • For a requested simulator or adjustable explorer, show representative static scenarios or a disclosure-based comparison and state the limitation in the surrounding response. Do not pretend controls survived when they cannot.
  • For maps, use only user-supplied or locally available geometry that can be embedded as safe SVG. Otherwise choose a table, ranked plot, or schematic.
  • Keep the outer surface transparent and unframed. Use .card only for a real bounded summary or detail; never nest cards.

Layout And Accessibility

  • Design for the full Chat width around 736px and reflow cleanly down to 320px.
  • Avoid fixed outer widths, viewport-height layouts, horizontal scrolling, fixed positioning, and clipped labels.
  • Use semantic headings sparingly. Do not restate the user prompt or render a title inside the fragment when the surrounding Markdown already names it.
  • Give each meaningful SVG role="img" plus an accessible name or description. Include <title> and <desc> when they improve screen-reader output.
  • Label important values directly. Add a legend only when multiple series cannot be labeled on the marks.
  • Pair color with text, shape, or line style so meaning never depends on color alone.

Theme And Utilities

  • Use Rudder theme variables for every color. Start with --foreground, --muted-foreground, --border, and --viz-series-1; use --viz-series-2 through --viz-series-6 only for stable categories.
  • Use host utilities such as .viz-grid, .viz-row, .viz-stat, .viz-stat-value, .viz-badge, .card, .text-small, .text-muted, .text-destructive, and .sr-only before adding custom CSS.
  • Keep custom selectors scoped below #widget. Use only theme variables already provided by Rudder; custom CSS variables are removed.
  • Use normal text by default and weights 400 or 500. Reserve compact secondary text for annotations, never essential labels.

Verification

Before replying:

  1. Confirm each envelope uses the exact v1 markers, satisfies the 64/128/256 KiB limits, and the message has no more than three visuals.
  2. Confirm the fragment contains no scripts, handlers, URLs, external assets, active controls, document-level elements, or unsupported embeds.
  3. Confirm SVG view boxes, labels, referenced IDs, table semantics, and CSS selectors are valid.
  4. Check both narrow and wide layout when a preview path is available. If not, keep the geometry responsive and the composition conservative.
  5. Emit the envelope only after the fragment is complete and valid. Never leave an opening marker unterminated.

© Undertone0809, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references, assets) in server/resources/bundled-skills/visualize of Undertone0809/rudder.

  • SKILL.md
  • agents/openai.yaml
  • assets/example-chart.html
  • references/runtime-contract.md

Open the folder on GitHubat commit a3f49e8

Compare with similar skills

Visualize next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Visualize compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Visualize this skillUndertone0809/rudder292—~1.8kAutomated safety check: PassApache-2.0
Update Web Assetsgarfiec/Librechat-Mobile110—~1.8kAutomated safety check: NotesMIT
Code To Chartrongxinzy/RongxinAI154—~596Automated safety check: PassMIT
Code Flow Visualizerwentorai/research-plugins2981 repos~1.9kAutomated safety check: PassMIT
Microsim Generatorynulihao/AgentSkillOS617—~2.1kAutomated safety check: PassNone
Microsim Generatordmccreary/ibook-skills105—~11kAutomated safety check: PassNone

Similar skills

  • Update Web Assets

    garfiec/Librechat-Mobile

    Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React).

    110 GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check: notes

  • Code To Chart

    rongxinzy/RongxinAI

    解析代码仓库的 import/依赖关系，自动生成架构图、流程图和组织架构图，输出 Mermaid 文本或 SVG 图片。支持 Python、JavaScript、TypeScript、Go 和 Java 项目。当用户需要可视化代码结构、分析模块依赖、生成架构文档，或提及“代码架构图”、“依赖关系图”、“流程图”、“组织架构图”、“Mermaid 图”等关键词时触发。

    154 GitHub stars~596 tokensUpdated today
    DevelopmentAuto-check passed

  • Code Flow Visualizer

    wentorai/research-plugins

    Convert Python, JavaScript, and TypeScript functions into Mermaid flowcharts

    298 GitHub starsUsed in 1 repo~1.9k tokens
    DevelopmentAuto-check passed

  • Microsim Generator

    ynulihao/AgentSkillOS

    Creates interactive educational MicroSims using the best-matched JavaScript library (p5.js, Chart.js, Plotly, Mermaid, vis-network, vis-timeline, Leaflet, Venn.js).

    617 GitHub stars~2.1k tokensUpdated 7 mo ago
    Data & AnalyticsAuto-check passed

  • Microsim Generator

    dmccreary/ibook-skills

    Creates interactive educational MicroSims, routing to the best-matched generator - p5.js, Chart.js, Plotly, Mermaid, vis-network, timelines, maps, Venn, causal-loop/feedback-loop diagrams (CLD)…

    105 GitHub stars~11k tokensUpdated 3 days ago
    Data & AnalyticsAuto-check passed

  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.4k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed

More from Undertone0809/rudder

All 30 skills in this repo

  • Conversation To Skill

    Undertone0809/rudder

    Turn the current conversation's workflow into a reusable agent skill.

    292 GitHub stars~3.6k tokensUpdated yesterday
    Auto-check passed

  • Rudder Worktree Preview Maintainer

    Undertone0809/rudder

    A skill your agent uses when starting the current Rudder checkout as a temporary managed local preview with a stable URL, readiness check, logs, stop command, and cleanup path for manual inspection…

    292 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed

  • Stop Rudder Dev Maintainer

    Undertone0809/rudder

    A skill your agent uses when the user explicitly asks to stop, restart, kill, or clean Rudder repo-local pnpm dev processes or local dev runtime residue, including “把 pnpm dev 停了”, “重启 dev”, or “清掉…

    292 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • Deep Research

    Undertone0809/rudder

    Conducts enterprise-grade research with multi-source synthesis, citation tracking, and verification.

    292 GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Rudder Workspace Hygiene Maintainer

    Undertone0809/rudder

    A skill your agent uses to audit or clean Rudder worktrees, generated artifacts, logs, caches, and repo-owned processes without deleting active work, user data, or unrelated machine state.

    292 GitHub stars~664 tokensUpdated yesterday
    Auto-check passed

  • Advisor Review Loop Maintainer

    Undertone0809/rudder

    A skill your agent uses when Rudder development work needs first-principles advisor analysis plus independent reviewer rounds: proposals, UI/product decisions, architecture, release readiness…

    292 GitHub stars~4.2k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Visualize

What does Visualize do?

Create safe inline visual explanations in Rudder Chat. An agent skill from Undertone0809/rudder. Visualize is an agent skill from Undertone0809/rudder. Create safe inline visual explanations in Rudder Chat.

When should I use Visualize?

Visualize fits situations like: asked for a chart; compact visual that materially improves understanding.

How do I install Visualize in Claude Code?

Run `npx skills add Undertone0809/rudder --skill visualize -a claude-code`. Or copy the skill folder (server/resources/bundled-skills/visualize in Undertone0809/rudder) into .claude/skills/visualize in your project. Claude Code loads it when a task matches its description.

How do I install Visualize in Codex?

Run `npx skills add Undertone0809/rudder --skill visualize -a codex`. Or copy the skill folder (server/resources/bundled-skills/visualize in Undertone0809/rudder) into .agents/skills/visualize in your project. Codex loads it when a task matches its description.

Can I use Visualize in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Undertone0809/rudder --skill visualize -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visualize, .gemini/skills/visualize, .github/skills/visualize and .opencode/skills/visualize in your project.

What does Visualize need to run?

SKILL.md names no scripts, command-line tools or credentials: Visualize is instructions for the agent only. Compatibility (from SKILL.md): Rudder Chat v1 inline visual message protocol. Provider-neutral and filesystem-independent; outside Rudder Chat, fall back to Mermaid, Markdown, or prose..

Does Visualize access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Visualize safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Visualize use?

Visualize is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Visualize use?

About 1.8k tokens (SKILL.md is roughly 7.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.5k tokens, read only when the agent opens those files.

What are the alternatives to Visualize?

Skills that share tags, products or a category with Visualize: Update Web Assets (garfiec/Librechat-Mobile, 110 stars), Code To Chart (rongxinzy/RongxinAI, 154 stars), Code Flow Visualizer (wentorai/research-plugins, 298 stars) and Microsim Generator (ynulihao/AgentSkillOS, 617 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visualize?

Undertone0809 (a GitHub user) maintains it in Undertone0809/rudder, which has 292 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 7, 2026.

Source: Undertone0809/rudder on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.