Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jamditis/visual-explainer
Generate self-contained HTML pages that visually explain systems, data stories, investigations, editorial workflows, and code changes.
Passed 5 of 13 test cases with the skill, and 4 of 13 without it.
and 5 more in the full report
6 fixed3 passed either way10 still failing3 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
We just generated `~/.agent/diagrams/api-roadmap.html` and want to deploy it immediately as a live public web URL using our local skill deployment script. What command should be executed?
| Checked | Without skill | With skill |
|---|---|---|
| Executes 'share.sh' script to deploy the HTML page. | Missed | Passed |
The instructions your model reads when the skill loads.
Generate self-contained HTML files for technical diagrams, editorial visualizations, and data tables. Always open the result in the browser. Never fall back to ASCII art when this skill is loaded.
Proactive table rendering. When you're about to present tabular data as an ASCII box-drawing table in the terminal (comparisons, audits, feature matrices, status reports, source verification grids, any structured rows/columns), generate an HTML page instead. The threshold: if the table has 4+ rows or 3+ columns, it belongs in the browser. Don't wait for the user to ask, render it as HTML automatically and tell them the file path. You can still include a brief text summary in the chat, but the table itself should be the HTML page.
Detailed prompt templates in ./commands/. In Claude Code, namespaced (/visual-explainer:diff-review). In Pi, these are slash commands (/diff-review). In Codex, use /prompts:diff-review (if installed to ~/.codex/prompts/) or invoke $visual-explainer and describe the workflow.
| Command | What it does |
|---|---|
generate-web-diagram | Generate an HTML diagram for any topic |
generate-visual-plan | Generate a visual implementation plan for a feature |
generate-slides | Generate a magazine-quality slide deck |
diff-review | Visual diff review with architecture comparison and code review |
plan-review | Compare a plan against the codebase with risk assessment |
project-recap | Mental model snapshot for context-switching back to a project |
fact-check | Verify accuracy of a document against actual code |
share-page | Deploy an HTML page to Vercel and get a live URL |
Before writing HTML, commit to a direction. Don't default to "dark theme with blue accents" every time.
Visual is always default. Even essays, blog posts, and articles get visual treatment, extract structure into cards, diagrams, grids, tables.
Prose patterns (lead paragraphs, pull quotes, callout boxes) are accent elements within visual pages, not a separate mode. Use them to highlight key points or provide breathing room, but the page structure remains visual.
For prose accents, see "Prose Page Elements" in ./references/css-patterns.md. For everything else, use the standard freeform approach with aesthetic directions below.
Who is looking? A developer understanding a system? A reporter revisiting an investigation? An editor reviewing a story? A PM seeing the big picture? An academic auditing methodology? This shapes information density and visual complexity.
What type of content? Architecture, flowchart, sequence, data flow, schema/ER, state machine, mind map, class diagram, C4 architecture, data table, timeline, dashboard, source network, investigation map, editorial workflow, story structure, or prose-first page. Each has distinct layout needs and rendering approaches (see Diagram types below).
What aesthetic? Pick one and commit. The constrained aesthetics (Blueprint, Editorial, Paper/ink) are safer, they have specific requirements that prevent generic output. The flexible ones (IDE-inspired) require more discipline.
Constrained aesthetics (prefer these):
test cases passed, vs 4 / 13 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.