Visual Explainer

Generate self-contained HTML pages that explain technical systems, plans, diffs, and structured data with strong visual hierarchy.

Prefer browser-rendered visuals over ASCII diagrams and box-drawing tables.
Use mode-specific references only when the selected rendering path needs them.
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.
Keep outputs deterministic: one HTML file, clear path, and explicit quality checks.

Workflow

Confirm output destination, viewer constraints, optional flags, and optional tool availability.
Define which references are required for the chosen mode before building.
Workflow: references/step-0-preflight-workflow.md

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

Build semantic HTML and a complete CSS variable theme with intentional typography and hierarchy.
Keep anti-slop and readability guardrails aligned with canonical style references.
Workflow: references/step-2-build-workflow.md

Load only the mode-specific references required for Mermaid, slides, navigation, and tables.
Apply template guidance without duplicating deep reference content in this file.
Workflow: references/step-3-mode-specific-workflow.md

Write to .visual-explainer/ in the current project root, open the file, and verify quality before handoff.
Report the path and any unresolved limitations explicitly.
Workflow: references/step-4-deliver-workflow.md