Visualize
Design handbook for rendering inline SVG/HTML/Chart.js visuals in Open WebUI chat
Test report
- Verdict
- Works with setup
- Score
- 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
-
/visualizeDesign 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.