Visualize
Manuel de design pour le rendu de visuels SVG/HTML/Chart.js intégrés dans le chat Open WebUI
Fonctionne avec configuration
Ce que fait
Un manuel de système de design qui instruit le modèle à créer des visualisations intégrées sensibles au thème — diagrammes SVG, graphiques Chart.js, bandes KPI, explications interactives — en utilisant un viewBox fixe, une palette de couleurs à 9 rampes et des règles de design plat. Il se déclenche lorsque l'utilisateur demande explicitement de visualiser, diagrammer, graphiquer, dessiner ou créer un tableau de bord. Le rendu et l'interactivité (l'appel d'outil visualize(), les marqueurs @@@VIZ, les CSS/classes auto-injectées et les ponts sendPrompt/openLink) nécessitent l'outil Python Open WebUI compagnon exécuté dans une instance Open WebUI.
Rapport de test
Les deux variantes de SKILL.md et tool.py (toutes HTTP 200) ont été récupérées via l'API GitHub raw ; tool.py est un outil FastAPI Open WebUI de 3796 lignes (v2.2.0) — un grep de sécurité n'a trouvé que des commentaires SRCDOC-safety, pas d'exfiltration/curl|sh/eval-of-remote. Installation vérifiée dans un HOME temporaire : SKILL.md atterrit à ~/.claude/skills/visualize/SKILL.md, le frontmatter est analysé avec name+description. Pour OUTPUT, j'ai créé deux fichiers réels pour "chart Q1-Q4 revenue" : viz_baseline.html (sans compétence) utilise un DÉGRADÉ linéaire bleu, 500x300 px fixes, texte #333 codé en dur, étiquettes de 10px, barres carrées ; viz_skill.html (suivant le manuel) utilise un teal-400 solide plat #1D9E75 à 0.85 d'opacité, viewBox 0 0 680 270 responsive width:100%, variables de thème --color-* pour clair/sombre, une bande de métriques KPI à 3 cartes au-dessus du graphique, des classes d'étiquettes .t/.ts/.th, et des barres arrondies rx=4. Amélioration concrète et citée de la création — mais je n'ai PAS pu exécuter le pipeline de rendu (outil visualize() + iframe + CSS injecté) car il nécessite une instance Open WebUI en cours d'exécution, donc les affirmations d'interactivité/rendu ne sont pas vérifiées. Verdict "setup" : les conseils de design fonctionnent comme un guide de style, mais la fonctionnalité principale de rendu intégré nécessite l'outil Python Open WebUI, pas Claude Code.
Testé le: 2026-07-21 · Claude Code 2.x (agent harness)
Installation
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. Commandes et exemples de prompts
/visualizeManuel de design pour le rendu de visuels SVG/HTML/Chart.js intégrés dans le chat Open WebUI
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Visualize this dataset as an interactive chartDraw a diagram of this system architectureShow this data as a dashboard