New: 98,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 nexus-research-lab in nexus-research-lab/nexus

在 Nexus 对话中生成交互式图表、流程图、模拟器、可探索讲解、数据看板、视觉对比、SVG/Canvas 艺术和 UI 原型。仅在可视化比正文或表格更清楚时使用；不用于需要持久保存或下载的 HTML、图解文件。

Apache-2.0Auto-check passed

Install Visualize

skills CLI
$ npx skills add nexus-research-lab/nexus --skill visualize -a claude-code

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

GitHub CLI
$ gh skill install nexus-research-lab/nexus 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/nexus-research-lab/nexus.git skills-src && mkdir -p .claude/skills && cp -r skills-src/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
150
Token cost
~1.3k tokens
SKILL.md length
637 words
Files
6 (incl. references)
Skills in repo
17
Repo updated
First seen
Licence
Apache-2.0

At a glance

在 Nexus 对话中生成交互式图表、流程图、模拟器、可探索讲解、数据看板、视觉对比、SVG/Canvas 艺术和 UI 原型。仅在可视化比正文或表格更清楚时使用；不用于需要持久保存或下载的 HTML、图解文件。

  • Works in 4 steps: Choose the visual form and read only the… → Call show_widget with a concise title… → Put explanation and conclusions in the… → …
  • SKILL.md covers Workflow, Read on demand, Widget contract and Nexus visual language, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Visualize is an agent skill from nexus-research-lab/nexus. 在 Nexus 对话中生成交互式图表、流程图、模拟器、可探索讲解、数据看板、视觉对比、SVG/Canvas 艺术和 UI 原型。仅在可视化比正文或表格更清楚时使用；不用于需要持久保存或下载的 HTML、图解文件。

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `references/art.md`, `references/charts.md` and `references/diagrams.md`).

The repository describes itself as: Multi-agent collaboration platform for persistent, proactive AI agents across rooms, workspaces, skills, and external services. The licence is Apache-2.0.

Example prompts

  • “/visualize”

Workflow steps

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

  1. Choose the visual form and read only the relevant references below before composing the fragment.
  2. Call show_widget with a concise title and one self-contained HTML fragment in widget_code.
  3. Put explanation and conclusions in the normal response around the widget. Do not repeat the visual as Markdown.
  4. The tool result only confirms delivery to the client. Do not claim that rendering succeeded.

What it can do on your machine

Read from SKILL.md and the folder at commit e061bd6. 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.

Context cost

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

Always · name and description, kept in context so the agent knows when to use it
~29
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~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 nexus-research-lab/nexus at commit e061bd6, republished under its Apache-2.0 licence (© nexus-research-lab). 637 words, ~1,264 tokens.

Download SKILL.mdSave it as .claude/skills/visualize/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
visualize
description
在 Nexus 对话中生成交互式图表、流程图、模拟器、可探索讲解、数据看板、视觉对比、SVG/Canvas 艺术和 UI 原型。仅在可视化比正文或表格更清楚时使用；不用于需要持久保存或下载的 HTML、图解文件。
title
Interactive Visualization
scope
any
tags
visualization, interactive, chart, diagram, widget

Nexus Generative UI

Create a custom interactive visual only when it communicates the answer better than ordinary prose or a table.

Workflow

  1. Choose the visual form and read only the relevant references below before composing the fragment.
  2. Call show_widget with a concise title and one self-contained HTML fragment in widget_code.
  3. Put explanation and conclusions in the normal response around the widget. Do not repeat the visual as Markdown.
  4. The tool result only confirms delivery to the client. Do not claim that rendering succeeded.

Read on demand

Resolve these paths relative to this skill directory. Do not load the whole reference directory. Combine references only when the widget needs both concerns, such as an interactive diagram.

When buildingRead
Controls, selections, or state-driven viewsInteraction
Quantitative charts, axes, or Chart.jsCharts
Flows, hierarchies, networks, or explanatory diagramsDiagrams
Product UI prototypes, dashboards, or comparison layoutsUI mockups
SVG illustrations, Canvas drawing, or continuous animationArt

Widget contract

  • Return a fragment only. Do not include html, head, or body tags.
  • Inline the widget's CSS and JavaScript. SVG, Canvas, DOM, Web Components, and external CDN libraries are supported.
  • Network access and external resources are allowed without a domain allowlist. Prefer established HTTPS CDNs.
  • The fragment runs in an isolated iframe and cannot access the Nexus page, cookies, storage, or parent DOM.
  • To show an image that already exists in the current Agent workspace, use a host reference such as src="nexus://workspace/.cloud-photo/preview.jpg". Nexus resolves this reference through the authenticated workspace preview endpoint before handing the fragment to the isolated iframe. The path is workspace-relative and must not contain an Agent absolute path.
  • Do not use file://, localhost URLs, absolute workspace paths, or Base64 for workspace images. Those forms either cannot cross the iframe boundary safely or make the model carry large binary payloads.
  • Streaming order is short style, visible content, then scripts last. Scripts run only after the complete tool input arrives. Keep native controls and static content useful before initialization.
  • Before calling show_widget, check every inline script for unmatched quotes, backticks, brackets, and incomplete blocks. Prefer short functions over one monolithic script.
  • Before calling show_widget, verify that every id, class, or data attribute referenced by JavaScript exists in the submitted markup and is spelled identically.
  • Separate source data, derived calculations, rendering, and event binding. Avoid constructing large interfaces through nested template literals or long HTML string concatenation; update existing DOM nodes when practical.
  • Use the smallest implementation that fully answers the request. Split independent visuals into separate show_widget calls with short prose between them, but keep one cohesive widget when its views share state.
  • Make the layout responsive at 320px width and avoid fixed viewport dimensions.
  • Use accessible labels, keyboard-operable controls, visible focus, and reduced-motion fallbacks.
  • Keep interaction local to the widget. Do not assume a host API or postMessage bridge.
Show full SKILL.md (166 more words)Show less

Nexus visual language

  • Make the visual feel native to the surrounding answer: flat, quiet, compact, and content-first.
  • Keep the outermost background transparent. Use neutral surfaces, one-pixel borders, and 8px or 12px radii; avoid gradients, glass, glow, heavy shadows, and decorative hero layouts.
  • Use only 400 and 500 font weights. Body text is 14px to 16px, labels are at least 12px, and controls are compact rather than oversized.
  • Use the accent color only for selection, focus, or the primary data series. Prefer one neutral ramp and at most two categorical color ramps.
  • Do not recreate Nexus chrome or add a second page title inside the widget. widget_code contains the visual and its local controls, not duplicate prose.
  • Let content determine height. Do not create nested scrolling, fixed-position overlays, or viewport-sized shells.

Theme variables

  • --nexus-background
  • --nexus-surface
  • --nexus-surface-hover
  • --nexus-text
  • --nexus-muted
  • --nexus-border
  • --nexus-accent
  • --nexus-accent-contrast
  • --nexus-chart-1 through --nexus-chart-5
  • --nexus-font-sans
  • --nexus-font-mono
  • --nexus-radius-md
  • --nexus-radius-lg

Use these variables for CSS and SVG. Canvas APIs cannot resolve CSS var(...) strings; read their computed values first.

© nexus-research-lab, 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 5 other files (references) in skills/visualize of nexus-research-lab/nexus.

  • SKILL.md
  • references/art.md
  • references/charts.md
  • references/diagrams.md
  • references/interaction.md
  • references/ui-mockups.md

Open the folder on GitHubat commit e061bd6

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 skillnexus-research-lab/nexus150—~1.3kAutomated safety check: PassApache-2.0
Visualizeopenclaw/openclaw392k—~2.4kAutomated safety check: PassMIT
Visual Stylecalesthio/OpenMontage65k—~1.5kAutomated safety check: PassAGPL-3.0
D3 Visualizationnexu-io/open-design100k—~523Automated safety check: PassApache-2.0
Visual Regressionthedaviddias/Front-End-Checklist74k—~493Automated safety check: PassMIT
Visualizecode-yeongyu/oh-my-openagent70k—~954Automated safety check: PassCustom licence

Similar skills

  • Visualize

    openclaw/openclaw

    Create inline visuals for code and explanations, or author persistent OpenClaw dashboard widgets with showwidget.

    392k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Visual Style

    calesthio/OpenMontage

    Create, extract, and apply portable visual design systems via visual-style.md files.

    65k GitHub stars~1.5k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • D3 Visualization

    nexu-io/open-design

    Teaches the agent to produce D3 charts and interactive data visualizations.

    100k GitHub stars~523 tokensUpdated today
    Data & AnalyticsAuto-check passed

  • Visual Regression

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing CI coverage, automated checks, or test strategy related to Use visual regression testing.

    74k GitHub stars~493 tokensUpdated yesterday
    Testing & QAAuto-check passed

  • Visualize

    code-yeongyu/oh-my-openagent

    Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread.

    70k GitHub stars~954 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Chart Visualization

    bytedance/deer-flow

    Picks a suitable chart type from 26 options for your data, maps the data to that chart's parameters and generates a chart image through a JavaScript script.

    83k GitHub starsUsed in 2 repos~840 tokens
    Data & AnalyticsAuto-check passed

More from nexus-research-lab/nexus

All 17 skills in this repo

  • Imagegen

    nexus-research-lab/nexus

    Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, UI mockups, product shots, or transparent-background…

    150 GitHub stars~600 tokensUpdated today
    Auto-check passed

  • Caixun Work Hours

    nexus-research-lab/nexus

    彩讯（RichPMS）工时填报助手：把当前会话、代码记录或用户口述整理成日报，按 8 小时分配，经用户确认后写入工时系统。用户提到“填日报、报工、补报、本周工时、日报被驳回”时使用。

    150 GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Wechat Article Search

    nexus-research-lab/nexus

    搜索微信公众号文章，并整理标题、摘要、发布时间、来源公众号和链接。用户提到微信公众号、 公众号文章、微信文章、搜一批公众号资料、按关键词找公众号内容、查某公众号相关报道， 或需要为中文研究收集微信公众平台文章时使用；即使用户只说“搜微信里的文章”也应触发。

    150 GitHub stars~858 tokensUpdated today
    Auto-check: notes

  • XLSX

    nexus-research-lab/nexus

    只要电子表格文件（.xlsx、.xlsm、旧版 .xls、.csv、.tsv）是任务的主要输入或输出，或者需要 被打开、读取、创建、修改，就使用本 Skill。也适用于公式、格式、图表、数据清洗和表格格式转换。

    150 GitHub stars~501 tokensUpdated today
    Auto-check passed

  • Automation

    nexus-research-lab/nexus

    通过宿主提供的 nexus.command 结构化工具查询、规划、确认并管理 scheduled task。用户要求提醒、延迟执行、周期检查、定时报表、补跑、结果重投递、持续关注、修改或删除任务、处理任务权限阻塞时使用；同时适用于定时任务后台 run 检查自身状态。

    150 GitHub stars~541 tokensUpdated today
    Auto-check passed

  • Execution Orchestrator

    nexus-research-lab/nexus

    选择执行结构、委派子智能体、管理 Nexus 工作图与可复用模板；遵守本轮权限，简单任务直接完成. An agent skill from nexus-research-lab/nexus.

    150 GitHub stars~821 tokensUpdated today
    Auto-check passed

Questions about Visualize

What does Visualize do?

在 Nexus 对话中生成交互式图表、流程图、模拟器、可探索讲解、数据看板、视觉对比、SVG/Canvas 艺术和 UI 原型。仅在可视化比正文或表格更清楚时使用；不用于需要持久保存或下载的 HTML、图解文件。. Visualize is an agent skill from nexus-research-lab/nexus.

How do I install Visualize in Claude Code?

Run `npx skills add nexus-research-lab/nexus --skill visualize -a claude-code`. Or copy the skill folder (skills/visualize in nexus-research-lab/nexus) 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 nexus-research-lab/nexus --skill visualize -a codex`. Or copy the skill folder (skills/visualize in nexus-research-lab/nexus) 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 nexus-research-lab/nexus --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.

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.3k tokens (SKILL.md is roughly 5.1k 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.7k 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: Visualize (openclaw/openclaw, 392k stars), Visual Style (calesthio/OpenMontage, 65k stars), D3 Visualization (nexu-io/open-design, 100k stars) and Visual Regression (thedaviddias/Front-End-Checklist, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visualize?

nexus-research-lab (a GitHub organization) maintains it in nexus-research-lab/nexus, which has 150 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 7, 2026.

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