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, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/bengii/visual-explainerWhat This Skill Does
The visual-explainer skill transforms complex technical data, code structures, and architectural plans into beautiful, self-contained HTML pages. Instead of overwhelming the terminal with clunky ASCII art or dense text, this skill creates professional-grade visual documents that are rendered directly in your browser. It serves as a visual bridge between the AI agent and the user, utilizing various aesthetic modes—such as Blueprint, Editorial, or Monochrome Terminal—to match the context of the information being presented. Whether you are documenting a system architecture, auditing a data table, or drafting a project proposal, this skill ensures the information is readable, structured, and visually compelling.
Installation
To integrate this skill into your environment, run the following command in your terminal:
clawhub install openclaw/skills/skills/bengii/visual-explainer
Use Cases
- Architecture Documentation: Visualize system components and their relationships using flowcharts or diagrams.
- Data Audits: Automatically render tabular data with more than 3 columns or 4 rows as a clean, sortable HTML table instead of ASCII.
- Diff Reviews: Present code changes in a clean, highlighted format that is easier to parse than standard terminal output.
- Project Roadmaps: Display complex timelines or task lists in a visual card-based layout.
- Technical Presentations: Convert markdown-heavy explanations into structured pages with callouts, pull quotes, and visual hierarchy.
Example Prompts
- "I have a list of user requirements and system constraints for the new database migration; please organize this into a feature matrix and show it as a visual HTML page."
- "Explain the sequence of events in our current authentication flow by creating a diagram page using the Blueprint aesthetic."
- "Here is a CSV of our latest API latency metrics. Please analyze these and create a dashboard-style HTML page that highlights the outliers."
Tips & Limitations
- Proactive Rendering: Don't wait to be asked. If you notice yourself generating a large table (4+ rows or 3+ columns), use this skill automatically to improve the user experience.
- Aesthetic Consistency: Choose a theme that fits the audience. Use 'Blueprint' for technical engineering diagrams and 'Editorial' for summaries meant for product managers.
- Keep it Self-Contained: Ensure all styles and logic are embedded within the generated HTML file so the user can open it without dependencies.
- Limitations: The skill is designed for static presentation; avoid embedding complex interactive elements that require external database connections or live backend services.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-bengii-visual-explainer": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write