visual-explainer

Installation
SKILL.md

Workflow

Step 0: Preflight context and constraints

  • Confirm output destination, viewer constraints, optional flags, and optional tool availability.
  • Define which references are required for the chosen mode before building.
  • Prefer browser-rendered visuals over ASCII diagrams and box-drawing tables, and keep the output deterministic as one HTML file with a clear path plus explicit quality checks.
  • Treat --codex as an optional workflow enhancement flag: when present, swap the default core style references for the strict Codex variants and load references/codex-design-guardrails.md; otherwise ignore those Codex-only references.
  • Workflow: references/step-0-preflight-workflow.md

Step 1: Route content to rendering approach

  • Classify the request and select one deterministic rendering mode.
  • Prefer semantic HTML tables for table-heavy output and Mermaid for topology-centric graphs.
  • Workflow: references/step-1-routing-workflow.md

Step 2: Build structure and style

Installs
5
GitHub Stars
2
First Seen
Mar 7, 2026
visual-explainer — xsolutions365/skills