# Visual Explainer

> Create a self-contained HTML explainer for systems, workflows, diagrams, timelines, comparisons, or data-heavy summaries when plain terminal text would be painful to read. Use when the output naturally wants a visual artifact instead of chat prose.

- Skill: `kiku-jw/visual-explainer` (Agent Skill, multi-file: 11 files)
- Install (CLI): `npx skillmds@latest add kiku-jw/visual-explainer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kiku-jw/visual-explainer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kiku-jw (https://skillmd.com/u/kiku-jw)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kiku-jw/visual-explainer

---


# Visual Explainer

## Metadata
- Trigger when: the best output is a browser-readable HTML artifact rather than a wall of text.
- Do not use when: a short plain-text answer would already communicate the structure clearly.

## Skill Purpose

Show structure visually through a single portable HTML artifact so complex systems, tables, and flows become readable at a glance instead of buried in chat.

## Instructions
1. Choose the right visualization type first. Use `~/.codex/skills/visual-explainer/references/routing.md` if you need help selecting between architecture, timeline, comparison, table, or other visual forms.
2. Build one self-contained HTML artifact with one clear visual direction. Reuse templates from `~/.codex/skills/visual-explainer/assets/templates` when they help, and validate against `~/.codex/skills/visual-explainer/references/style-rules.md` and `~/.codex/skills/visual-explainer/references/quality-checks.md` before delivery.
3. Save the file to a sensible workspace path, open or inspect it when possible, and return the path plus a short note about what the artifact shows.

## Non-Negotiable Acceptance Criteria
- Prefer semantic HTML and a useful first screen over generic dashboard sludge.
- The output is one self-contained `.html` file unless the user explicitly asked for a multi-file artifact.
- Use Mermaid only when automatic layout helps more than it hurts.
- If the user asked for a wide table or large structured comparison, render it in HTML instead of pasting a painful terminal table.

## Output
- The HTML file path.
- A short description of what the explainer shows and how it is organized.
- Any note about template reuse, browser inspection, or unresolved visual caveats.