Visualize

Design handbook for rendering inline SVG/HTML/Chart.js visuals in Open WebUI chat

Works with setup

Test report

Verdict
Works with setup
Score
8.4/10
Tested
Jul 21, 2026
Environment
Claude Code 2.x (agent harness)

This skill is no longer available upstream. Our re-check on Aug 10, 2026 couldn't find it any more (SKILL.md not found in repo tree). The test below is what we measured on Jul 21, 2026 and we're leaving it up as a record — but there is nothing left to install, so we've removed the command.

Fetched both SKILL.md variants and tool.py (all HTTP 200) via the GitHub raw API; tool.py is a 3796-line Open WebUI FastAPI tool (v2.2.0) — a security grep found only SRCDOC-safety comments, no exfiltration/curl|sh/eval-of-remote. Verified install into a temp HOME: SKILL.md lands at ~/.claude/skills/visualize/SKILL.md, frontmatter parses with name+description. For OUTPUT I authored two real files for "chart Q1-Q4 revenue": viz_baseline.html (no skill) uses a blue linear GRADIENT, fixed 500x300 px, hardcoded #333 text, 10px labels, square bars; viz_skill.html (following the handbook) uses flat solid teal-400 #1D9E75 at 0.85 opacity, viewBox 0 0 680 270 responsive width:100%, theme --color-* variables for light/dark, a 3-card KPI metric strip above the chart, .t/.ts/.th label classes, and rx=4 rounded bars. Concrete, quotable authoring improvement — but I could NOT execute the render pipeline (visualize() tool + iframe + injected CSS) since it needs a running Open WebUI instance, so interactivity/render claims are unverified. Verdict "setup": the design guidance works as a style-guide, but the headline inline-render feature requires the Open WebUI Python tool, not Claude Code.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 5/5
  • Triggers reliably 5/5
  • Output vs. baseline 7/10
  • Docs & honesty 4/5

What Visualize does

A design-system handbook that instructs the model to author theme-aware inline visualizations — SVG diagrams, Chart.js charts, KPI strips, interactive explainers — using a fixed viewBox, a 9-ramp color palette, and flat-design rules. It triggers when the user explicitly asks to visualize, diagram, chart, draw, or dashboard something. Rendering and interactivity (the visualize() tool call, @@@VIZ markers, auto-injected CSS/classes, and sendPrompt/openLink bridges) require the companion Open WebUI Python tool running inside an Open WebUI instance.

How to install Visualize

Nothing to install: the source repository no longer has this skill. If the author brings it back, our daily re-check will pick it up and the command will reappear here.

Commands — how to trigger Visualize

  • /visualize Design handbook for rendering inline SVG/HTML/Chart.js visuals in Open WebUI chat

It also activates on plain-language prompts like these:

  • Visualize this dataset as an interactive chart
  • Draw a diagram of this system architecture
  • Show this data as a dashboard

Frequently asked questions

Is the Visualize skill free?
Yes. The skill itself is free from Classic298/open-webui-plugins. SkillProof publishes the install command and an independent test verdict at no cost.
Does Visualize work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 21, 2026. Verdict: Works with setup. Fetched both SKILL.md variants and tool.py (all HTTP 200) via the GitHub raw API; tool.py is a 3796-line Open WebUI FastAPI tool (v2.2.0) — a security grep found only SRCDOC-safety comments, no exfiltration/curl|sh/eval-of-remote. Verified install into a temp HOME: SKILL.md lands at ~/.claude/skills/visualize/SKILL.md, frontmatter parses with name+description. For OUTPUT I authored two real files for "chart Q1-Q4 revenue": viz_baseline.html (no skill) uses a blue linear GRADIENT, fixed 500x300 px, hardcoded #333 text, 10px labels, square bars; viz_skill.html (following the handbook) uses flat solid teal-400 #1D9E75 at 0.85 opacity, viewBox 0 0 680 270 responsive width:100%, theme --color-* variables for light/dark, a 3-card KPI metric strip above the chart, .t/.ts/.th label classes, and rx=4 rounded bars. Concrete, quotable authoring improvement — but I could NOT execute the render pipeline (visualize() tool + iframe + injected CSS) since it needs a running Open WebUI instance, so interactivity/render claims are unverified. Verdict "setup": the design guidance works as a style-guide, but the headline inline-render feature requires the Open WebUI Python tool, not Claude Code.
What is the Visualize SkillProof Score?
8.4/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 4/5.
How do I install Visualize?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Visualize with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.