← Back to Skills Marketplace
273
Downloads
0
Stars
6
Active Installs
1
Versions
Install in OpenClaw
/install visual-explainer
Description
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architectur...
Usage Guidance
This skill is functionally coherent with producing HTML reports, but it takes powerful actions that may surprise you: it reads your whole repo and agent memory, can edit files in-place, and can serve and (optionally) publish those reports. Before installing or enabling it: 1) Inspect SKILL.md and the prompt files (prompts/*.md) and the serve scripts to confirm you’re comfortable with file reads/writes; 2) If you want read-only behavior, modify prompts to never perform in-place edits and to output corrected text to a new file instead of overwriting originals; 3) Run it in a sandbox copy of your repo first, or disable automatic actions that start servers or call ngrok; 4) Ensure any CLIs it references (gh, surf, ngrok) are present only if you trust them and avoid granting tokens unless necessary; 5) Backup repositories/docs before letting the skill perform automated fixes. If the author provided explicit per-action confirmations (e.g., ask before editing files, disclose required CLIs/creds), I would raise less concern.
Capability Analysis
Type: OpenClaw Skill
Name: visual-explainer
Version: 1.0.0
The visual-explainer skill bundle is a comprehensive toolset designed to help AI agents generate high-quality, styled HTML visualizations, diagrams, and slide decks. It includes a variety of templates, CSS patterns, and shell scripts (e.g., serve-report-auto.sh, stop-server.sh) to manage a local Python HTTP server for viewing the generated reports. While the bundle includes capabilities for shell execution (to open browsers or generate images via surf-cli) and file modification (via the fact-check.md prompt), these actions are transparently documented and strictly aligned with the stated purpose of creating and verifying technical documentation. A hardcoded local IP address (192.168.50.60) found in several scripts appears to be a non-malicious remnant of the developer's local testing environment.
Capability Assessment
Purpose & Capability
Description: generate HTML diagrams/reports. Reality: prompts and SKILL.md instruct the agent to run git commands, read entire changed files, mine agent memory (~/.agent/memory, ~/.pi/agent/memory), and edit files in-place (fact-check prompt). The registry metadata declares no required binaries or creds, but the instructions rely on many external tools (git, gh, python3, surf, ngrok, npx). Requiring access to repository contents and agent memory is plausible for a diff-review/plan-review tool, but the undeclared reliance on multiple CLIs and the ability to modify files is disproportionate to what a casual 'visual explainer' user might expect.
Instruction Scope
SKILL.md and templates explicitly instruct the agent to: run git commands (git show/diff/log), read full file contents across the repo, consult agent memory files, produce a verification fact sheet, and (in fact-check prompt) perform surgical in-place edits to user files. They also direct writing output to ~/.agent/diagrams/ and to always open files in the browser. Editing arbitrary source/docs content and accessing agent memory expands the skill's scope beyond 'render visuals' into potent codebase mutation and private-data access.
Install Mechanism
No install spec (instruction-only) — lower disk/write risk from automatic installers. The repository includes convenience shell scripts to serve files (python -m http.server, port-check scripts) which are benign but allow starting a local HTTP server; the README even suggests using ngrok to create public URLs. No downloads from untrusted URLs detected. Still, serving/exposing local files is an explicit capability users should be aware of.
Credentials
Declared: no env vars or credentials. Actual instructions reference tools that typically require credentials or network access (gh pr diff via GitHub CLI; surf gemini for AI images; ngrok for public tunnels). The skill also expects access to agent-specific files (~/.agent/memory) and to write under ~/.agent/diagrams/. The absence of declared required binaries/credentials is an incoherence and hides potentially sensitive access requirements.
Persistence & Privilege
The skill writes outputs to ~/.agent/diagrams/, stores a server port in scripts/server-port.txt, and (per fact-check prompt) edits user files in place. It can start a background HTTP server and suggests using ngrok for public sharing. While always:false and model-invocation not disabled, the ability to modify repo/docs and expose local files increases the blast radius if misused or run without careful review.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install visual-explainer - After installation, invoke the skill by name or use
/visual-explainer - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release of Visual Explainer skill — generates visually rich HTML explanations for technical content.
- Automatically creates self-contained HTML pages for diagrams, architecture overviews, data tables, and visual technical explanations, replacing ASCII art.
- Proactively renders tables as HTML when they have 4+ rows or 3+ columns, instead of ASCII.
- Offers multiple design aesthetics (Blueprint, Editorial, Paper/ink, Monochrome terminal, IDE-inspired, Data-dense); certain generic or "AI-slop" styles are forbidden.
- Integrates Mermaid.js for flowcharts, diagrams, and connects visuals with matching page themes.
- Provides workflow guidance and references for choosing layout types and aesthetics.
- Ensures output is always viewable in a browser and communicates file paths to users.
Metadata
Frequently Asked Questions
What is Visual Explainer?
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architectur... It is an AI Agent Skill for Claude Code / OpenClaw, with 273 downloads so far.
How do I install Visual Explainer?
Run "/install visual-explainer" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Visual Explainer free?
Yes, Visual Explainer is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Visual Explainer support?
Visual Explainer is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Visual Explainer?
It is built and maintained by bengii (@bengii); the current version is v1.0.0.
More Skills