Visual Explainer

Overview

Create clear HTML explainers and requested slide decks from verified source material.

This skill ships inside the Visual Explainer plugin and can be installed through the Claude Code marketplace or directly in Codex from its skill path.

Parent Surface

When to Use

Use this skill when the user asks for a visual HTML explanation of a plan, change, architecture, audit, comparison, or update. Use slides only when the user asks for them.

Example Prompts

• Explain this implementation plan for a mixed technical audience.
• Turn these audit findings into a clear HTML page with a table.
• Create and publish a diagram showing this request flow.

Workflow

when a missing detail would materially change the result.

• confirmed facts
• likely but unconfirmed assumptions
• facts that still need checking

Default Page

Start with four sections when they fit:

Add comparisons, diagrams, implementation status, examples, or a reply draft only when they help explain the material. Do not force every page into the same structure.

Use plain language for a smart but busy audience unless the user asks for a technical treatment. Keep stakeholder pages free of unnecessary file paths, code references, and test commands.

Resources

Declared allowed tools:

Installation

Switch between Claude Code and Codex, then copy the install command for the runtime you use.

claude plugin marketplace add DiversioTeam/agent-skills-marketplace
claude plugin install visual-explainer@diversiotech

CODEX_HOME="${CODEX_HOME:-$HOME/.codex}"
python3 "$CODEX_HOME/skills/.system/skill-installer/scripts/install-skill-from-github.py" \
  --repo DiversioTeam/agent-skills-marketplace \
  --path plugins/visual-explainer/skills/visual-explainer

Invocation:

/visual-explainer:explain

name: visual-explainer