Visualize
Podręcznik projektowania do renderowania wizualizacji SVG/HTML/Chart.js w czacie Open WebUI
Działa po konfiguracji
Co robi ten skill
Podręcznik systemu projektowego, który instruuje model, aby tworzył świadome tematycznie wizualizacje inline — diagramy SVG, wykresy Chart.js, paski KPI, interaktywne wyjaśnienia — używając stałego viewBox, 9-stopniowej palety kolorów i zasad płaskiego projektowania. Uruchamia się, gdy użytkownik wyraźnie prosi o wizualizację, diagramowanie, tworzenie wykresu, rysowanie lub tworzenie pulpitu nawigacyjnego. Renderowanie i interaktywność (wywołanie narzędzia visualize(), znaczniki @@@VIZ, automatycznie wstrzykiwane CSS/klasy oraz mosty sendPrompt/openLink) wymagają towarzyszącego narzędzia Open WebUI Python działającego w instancji Open WebUI.
Raport z testu
Pobrano oba warianty SKILL.md i tool.py (wszystkie HTTP 200) za pośrednictwem GitHub raw API; tool.py to 3796-liniowe narzędzie Open WebUI FastAPI (v2.2.0) — grep bezpieczeństwa znalazł tylko komentarze SRCDOC-safety, brak eksfiltracji/curl|sh/eval-of-remote. Zweryfikowano instalację w tymczasowym HOME: SKILL.md ląduje w ~/.claude/skills/visualize/SKILL.md, frontmatter parsuje z name+description. Dla OUTPUT stworzyłem dwa rzeczywiste pliki dla „chart Q1-Q4 revenue”: viz_baseline.html (bez umiejętności) używa niebieskiego liniowego GRADIENTU, stałych 500x300 px, sztywno zakodowanego tekstu #333, etykiet 10px, kwadratowych słupków; viz_skill.html (zgodnie z podręcznikiem) używa płaskiego, jednolitego teal-400 #1D9E75 z przezroczystością 0.85, viewBox 0 0 680 270 responsywnej szerokości:100%, zmiennych tematycznych --color-* dla jasnego/ciemnego, paska metryk KPI z 3 kartami nad wykresem, klas etykiet .t/.ts/.th i zaokrąglonych słupków rx=4. Konkretne, godne uwagi ulepszenie autorstwa — ale NIE MOGŁEM wykonać potoku renderowania (narzędzie visualize() + iframe + wstrzykiwany CSS), ponieważ wymaga to działającej instancji Open WebUI, więc twierdzenia o interaktywności/renderowaniu są niezweryfikowane. Werdykt „setup”: wskazówki projektowe działają jako przewodnik stylistyczny, ale główna funkcja renderowania inline wymaga narzędzia Open WebUI Python, a nie Claude Code.
Testowano: 2026-07-21 · Claude Code 2.x (agent harness)
Instalacja
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. Komendy i przykładowe prompty
/visualizePodręcznik projektowania do renderowania wizualizacji SVG/HTML/Chart.js w czacie Open WebUI
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
Visualize this dataset as an interactive chartDraw a diagram of this system architectureShow this data as a dashboard