SkillProof tested Claude skills

Visualize

Designhåndbok for rendering av inline SVG/HTML/Chart.js-visualer i Open WebUI-chat

av Classic298 · Classic298/open-webui-plugins

Krever oppsett ★ 8.4/10

Visualize — Designhåndbok for rendering av inline SVG/HTML/Chart.js-visualer i Open WebUI-chat

Hva den gjør

En designsystemhåndbok som instruerer modellen til å forfatte temabevisste inline-visualiseringer – SVG-diagrammer, Chart.js-diagrammer, KPI-striper, interaktive forklaringer – ved hjelp av en fast viewBox, en 9-rampe fargepalett og flat-design-regler. Den utløses når brukeren eksplisitt ber om å visualisere, diagrammere, tegne et diagram, tegne eller lage et dashbord. Rendering og interaktivitet (visualize()-verktøykall, @@@VIZ-markører, auto-injisert CSS/klasser og sendPrompt/openLink-broer) krever det medfølgende Open WebUI Python-verktøyet som kjører inne i en Open WebUI-instans.

Testrapport

Hentet begge SKILL.md-variantene og tool.py (alle HTTP 200) via GitHub raw API; tool.py er et 3796-linjers Open WebUI FastAPI-verktøy (v2.2.0) – en sikkerhets-grep fant kun SRCDOC-sikkerhetskommentarer, ingen eksfiltrering/curl|sh/eval-av-remote. Verifiserte installasjon i en temp HOME: SKILL.md lander på ~/.claude/skills/visualize/SKILL.md, frontmatter parses med name+description. For OUTPUT forfattet jeg to reelle filer for "chart Q1-Q4 revenue": viz_baseline.html (ingen ferdighet) bruker en blå lineær GRADIENT, fast 500x300 px, hardkodet #333 tekst, 10px etiketter, firkantede søyler; viz_skill.html (etter håndboken) bruker flat solid teal-400 #1D9E75 med 0.85 opasitet, viewBox 0 0 680 270 responsiv bredde:100%, tema --color-*-variabler for lys/mørk, en 3-korts KPI-metrikkstripe over diagrammet, .t/.ts/.th etikettklasser, og rx=4 avrundede søyler. Konkret, siterbar forbedring i forfatterskap – men jeg kunne IKKE utføre render-pipelinen (visualize()-verktøy + iframe + injisert CSS) siden den trenger en kjørende Open WebUI-instans, så interaktivitet/render-påstander er uverifiserte. Dom "setup": designveiledningen fungerer som en stilguide, men den fremtredende inline-render-funksjonen krever Open WebUI Python-verktøyet, ikke Claude Code.

Testet på: 2026-07-21 · Claude Code 2.x (agent harness)

Installer

git clone --depth 1 https://github.com/Classic298/open-webui-plugins.git /tmp/visualize-src
mkdir -p ~/.claude/skills
cp -R /tmp/visualize-src/inline-visualizer-v2 ~/.claude/skills/visualize
# Places the handbook at ~/.claude/skills/visualize/SKILL.md (v2, name: "visualize").
# There is also a v1 at inline-visualizer/ (name: "visualize", tool: render_visualization).
#
# IMPORTANT — this is an Open WebUI Tool, not a native Claude Code skill.
# The SKILL.md is only the DESIGN HANDBOOK. The actual rendering needs the
# companion FastAPI tool (inline-visualizer-v2/tool.py, v2.2.0,
# required_open_webui_version 0.10.2) installed in a running Open WebUI instance,
# with "iframe Sandbox Allow Same Origin" enabled (Settings -> Interface).
# In Open WebUI the model calls view_skill("visualize") to read this handbook,
# then visualize(title=...) + @@@VIZ-START/@@@VIZ-END markers to render.
# In plain Claude Code none of that runtime exists (visualize(), sendPrompt,
# openLink, copyText, the auto-injected --color-* vars and .t/.c-teal classes
# all no-op) — you get a design style-guide only.

Kommandoer og eksempelprompter

  • /visualizeDesignhåndbok for rendering av inline SVG/HTML/Chart.js-visualer i Open WebUI-chat

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

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

Full rapport →