← 返回 Skills 市场
273
总下载
0
收藏
6
当前安装
1
版本数
在 OpenClaw 中安装
/install 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...
安全使用建议
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.
功能分析
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.
能力评估
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.
如何使用
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install visual-explainer - 安装完成后，直接呼叫该 Skill 的名称或使用
/visual-explainer触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
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.
元数据
常见问题
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... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 273 次。
如何安装 Visual Explainer？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install visual-explainer」即可一键安装，无需额外配置。
Visual Explainer 是免费的吗？
是的，Visual Explainer 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。
Visual Explainer 支持哪些平台？
Visual Explainer 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 Visual Explainer？
由 bengii（@bengii）开发并维护，当前版本 v1.0.0。
推荐 Skills