kiku-jw 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
- Choose the right visualization type first. Use
~/.codex/skills/visual-explainer/references/routing.mdif you need help selecting between architecture, timeline, comparison, table, or other visual forms. - Build one self-contained HTML artifact with one clear visual direction. Reuse templates from
~/.codex/skills/visual-explainer/assets/templateswhen they help, and validate against~/.codex/skills/visual-explainer/references/style-rules.mdand~/.codex/skills/visual-explainer/references/quality-checks.mdbefore delivery. - 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
.htmlfile 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.