SkillFoxx

Type a name, a task or a service

visual-explainer

A skill that replaces terminal ASCII with self-contained HTML pages: diagrams, diff reviews, plan reviews, tables and slide decks

Skill

Medium risk

We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.

Why this level

  • Writes HTML files into a directory on your machine
  • Optional utilities run Node render scripts
All reasons and checks

nicobailon/visual-explainerAuthor:nicobailon

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/visual-explainer

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Run in a terminal in the project folder

npx skills add nicobailon/visual-explainer --skill visual-explainer -a claude-code -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 7163c3e
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .claude/skills
cp -R "$tmp/plugins/visual-explainer" .claude/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add nicobailon/visual-explainer --skill visual-explainer -a cursor -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 7163c3e
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add nicobailon/visual-explainer --skill visual-explainer -a github-copilot -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 7163c3e
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .github/skills
cp -R "$tmp/plugins/visual-explainer" .github/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add nicobailon/visual-explainer --skill visual-explainer -a codex -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 7163c3e
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add nicobailon/visual-explainer --skill visual-explainer -a gemini-cli -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 7163c3e
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .devin/skills
cp -R "$tmp/plugins/visual-explainer" .devin/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Formerly Windsurf.

Run in a terminal in the project folder

npx skills add nicobailon/visual-explainer --skill visual-explainer -a cline -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 7163c3e
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .cline/skills
cp -R "$tmp/plugins/visual-explainer" .cline/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add nicobailon/visual-explainer --skill visual-explainer -a roo -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 7163c3e
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .roo/skills
cp -R "$tmp/plugins/visual-explainer" .roo/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

A fork of Roo Code, same .roo folders.

Run in a terminal in the project folder

npx skills add nicobailon/visual-explainer --skill visual-explainer -a opencode -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 7163c3e
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

Commands for macOS and Linux, on Windows run them in Git Bash.

You will need: Node.js

Checked against the repository on Sep 24, 2026, commit 7163c3e.

Text for your agent

Install the plugin: /plugin marketplace add nicobailon/visual-explainer, then /plugin install visual-explainer@visual-explainer-marketplace. In other agents copy the plugins/visual-explainer folder into the skills directory.

Other ways from the author
/plugin marketplace add nicobailon/visual-explainer
/plugin install visual-explainer@visual-explainer-marketplace

In Claude Code the commands are namespaced under /visual-explainer:.

This is third-party code. Review the repository files before installing.

What it does

The skill teaches the agent to deliver visual explanations as a ready HTML page opened in the browser rather than as terminal text graphics. It builds self-contained documents with embedded styles and scripts: architecture overviews, Mermaid diagrams with zoom and pan, diff reviews, plan reviews, comparison tables, project recaps and slide decks. Commands such as diff-review, plan-review, generate-web-diagram, generate-slides and project-recap trigger the right format. Before writing markup the skill first picks a palette, type roles and a layout concept so the page does not look templated. Basic use needs no build step and depends only on a browser, while the optional MCP utilities and PPTX export pull in small Node packages.

Who it is for. For developers, technical writers and teams who want readable visual explanations instead of terminal ASCII.

Good fit when

  • You need to draw an architecture or process diagram and open it in the browser
  • You need a visual diff review or plan review
  • You need a comparison table, a project recap or a slide deck

Not a fit when

  • The answer must stay in the terminal or in plain text
  • There is no browser to open the generated HTML pages

Example request

Draw a diagram of our authentication flow and open it in the browser

Limitations

The output is HTML files opened in a browser. The optional MCP utilities and PPTX export need Node packages, and the PPTX export targets only simple decks while HTML stays the source of truth. The MCP server is local, stdio only, and writes into a dedicated output directory, by default ~/.agent/diagrams/.

How to disable. Uninstall the visual-explainer plugin via /plugin, or remove the copied skill folder and the MCP server entry from your configuration.

Security check

  • Writes HTML files into a directory on your machine
  • Optional utilities run Node render scripts

README in short

The README introduces a skill that turns complex terminal output into styled HTML pages that are easy to read. The author explains that agents default to ASCII, which fails for diagrams beyond three boxes and for large tables, while the skill provides real typography, dark and light themes and interactive Mermaid diagrams. It documents installation for Claude Code, Pi, the Antigravity CLI, Codex, OpenCode, Cursor and other environments, plus a local MCP server and a PPTX export utility. It notes that the final page is self-contained HTML with embedded styles and scripts. MIT license.

SKILL.md

---
name: visual-explainer
description: Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Use for diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks, and other visual explanations.
license: MIT
compatibility: Requires a browser to view generated HTML files. Optional surf-cli for AI image generation.
metadata:
  author: nicobailon
  version: "0.11.0"
---

# Visual Explainer

Generate self-contained HTML pages that explain systems, code changes, plans, data, and technical concepts visually. Use this skill for diagram requests, architecture overviews, diff/plan reviews, project recaps, comparison tables, slide decks, and any visual explanation.

## Trigger and delivery rules

- Prefer an HTML page over terminal ASCII when the output is inherently visual.
- If a table would have 4+ rows or 3+ columns, render it as HTML and give only a short chat summary.
- Write files to `~/.agent/diagrams/` or the explicit eval output path. Use descriptive filenames.
- Generate a Markdown companion only when the user explicitly asks for AI-readable output or a source brief. Keep HTML as the final visual output; Markdown is a companion, never the source for HTML.

FAQ

Which agents does it work with?

There is a Claude Code plugin, a Pi install, a local MCP server, and copying the skill folder into Cursor, Codex, OpenCode and the Antigravity CLI.

Is a build step required?

Not for normal use, a browser is enough. Node packages are only needed for the optional MCP utilities and PPTX export.

Editors’ pick

A skills library that gives coding agents a development process: brainstorming, planning, TDD, subagents and code review

PluginMedium riskNo VPN needed292.5K
Editors’ pick

Small composable skills for engineering with agents: plan grilling, TDD, bug diagnosis, code review and architecture

SkillLow risk271.4K
Editors’ pick

GitHub toolkit for spec-driven development: the specify CLI adds agent commands and skills to a project, from principles to implementation

CLIMedium riskNo VPN needed139.3K

Reference MCP servers

Model Context Protocol servers

Official

Official reference MCP servers: Filesystem, Fetch, Git, Memory, Sequential Thinking, Time and Everything

MCP serverMedium risk90.6K
Foxx AIvisual-explainer

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.