A conversation-based tool for making visual explanations such as charts, maps, simulations, diagrams, and interactive mockups. It helps you explore how something works rather than only describing it in text.

Use it to inspect data, compare options, demonstrate behavior with adjustable inputs, create maps and graphs, or preview an interface.

It makes changes, comparisons, and relationships easier to understand when words alone are unclear. It also distinguishes between an explanation shown in the conversation and a visual file that belongs in a project.

visualize — Skill for Claude Code and Codex by ccbud/CCBuddy

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 ccbud/CCBuddy --skill visualize

Clone the repo

git clone --depth 1 https://github.com/ccbud/CCBuddy

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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/ccbud/ccbuddy/visualize/github.svg)](https://agentmods.dev/skills/ccbud/ccbuddy/visualize)

Your own site

<a href="https://agentmods.dev/skills/ccbud/ccbuddy/visualize"><img src="https://agentmods.dev/badge/skills/ccbud/ccbuddy/visualize/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.

Your own site · 80×15

<a href="https://agentmods.dev/skills/ccbud/ccbuddy/visualize"><img src="https://agentmods.dev/badge/skills/ccbud/ccbuddy/visualize.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 63 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 7,388 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.

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.

Model	Per session	Once invoked
Fable 5.1	$0.00063	$0.07388
Opus 5.5	$0.00025	$0.02955
Sonnet 5.5	$0.00013	$0.01478
Haiku 4.5	$0.00006	$0.00739

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

Security

Grade A, and why

visualize 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 14d ago.

The scan reads SKILL.md. This mod also ships 9 executable files (assets/calendar.js, assets/standalone-host-bridge.js, assets/standalone-shell.js, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

apps/ccbuddy-cli/packages/visualize-plugin/skills/visualize/SKILL.md · 277 lines

How it starts

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

Visualize

A request for a new standalone file, website, app page, component, or other project change is not an in-conversation visualization request, even when the deliverable contains charts or interactive content.
A request to preview, explain, or explore a proposed interface in the conversation is an in-conversation visualization request.
Create a visual only when the user needs to see or explore it in the conversation and it materially improves the explanation. Do not create an inline visual merely because the request involves data, charts, or an interactive page.
Use a normal Markdown table when the user asks for a table; return it directly and do not create a visualization file.
Use Mermaid when labeled nodes and edges fully explain a static structure; return a normal fenced Mermaid block and no visualization file. Use HTML for dynamics, spatial motion, adjustable inputs, and other visuals.
Work silently unless blocked or the user explicitly asks for progress. Never send commentary or progress updates while reading this skill or writing or updating the file; the final response must be your first user-facing message.
In user-facing prose, describe only what the visual helps the user see or decide. Keep it concise and do not repeat information already clear from the visual. Never announce this skill, a visualization surface, widgets, HTML, SVG, scripts, local files, inline data, or implementation details.

Read the complete skill

Read this file in full before authoring. Reread truncated ranges in smaller calls. Copy into every compaction summary: Reload the full visualize skill before creating or updating a visualization.

Inline HTML output contract

File

For each new or updated visualization, choose a concise ASCII lowercase-hyphenated title and write <title>.html in an explicitly writable, durable, task-owned location. Prefer the thread-scoped visualization directory when it appears in the writable roots or is explicitly supplied by the host. Do not write inline fragments into the project; if no visualization directory is supplied, inline rendering is unavailable.
Never add sandbox: links to inline visualization HTML unless the user specifically requests a download.
Do not choose system temp as a separate fallback. Write access alone does not guarantee that the conversation can read the file.
Use the absolute path on the executor that creates the file. Never assume ~/.ccbuddy is writable beyond the session directory explicitly supplied by the host.
Build the visual in the conversation. Use the open project when the user asks for a site, app page, component, or change to existing project files.

Read the full file on GitHub · 277 lines

Files

What ships with it

23 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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.

14d ago First seen · 277 lines · 63 tokens per session scan A 7099bfab04d8

Subscribe to this mod's changes

visualize is a skill published in the GitHub repository ccbud/CCBuddy (8 stars, last pushed 2d ago), licensed Apache-2.0. It adds 63 tokens to every session and 7,388 once invoked, about $0.0003 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-10-02.

Analytics and metrics Claude Code Design and UX chatgpt claude codex codex-cli grok

anatomy

Explain an idea as an interactive isometric machine figure.

NousResearch/hermes-agent · 15 tokens

ip-as-logo

Design minimal cute IP mascot marks readable at 32px.

NousResearch/hermes-agent · 16 tokens

canva

Create and edit Canva designs, generate images, remove backgrounds, recover editable layers, and work with Canva libraries. Use for branded presentations and slide decks, campaign artwork, flyers and banners, applying saved brand kits and templates, and resizing designs for social posts and stories through Canva's…

asgeirtj/system_prompts_leaks · 62 tokens

visualize