visual-explainer

Name: visual-explainer
Author: jamditis

336stars57forks

How to install visual-explainer?

jamditis/claude-skills-journalism/visual-explainer

$npx -y skills add jamditis/claude-skills-journalism --skill visual-explainer

Installs into the current project.

Summary

Generate self-contained HTML pages that visually explain systems, data stories, investigations, editorial workflows, and code changes. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, source map, comparison table, timeline, or

Files · 1

View on GitHub

SKILL.md

1	# Visual explainer
2
3	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.
4
5	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.
6
7	## Available commands
8
9	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.
10
11	\| Command \| What it does \|
12	\|---------\|-------------\|
13	\| `generate-web-diagram` \| Generate an HTML diagram for any topic \|
14	\| `generate-visual-plan` \| Generate a visual implementation plan for a feature \|
15	\| `generate-slides` \| Generate a magazine-quality slide deck \|
16	\| `diff-review` \| Visual diff review with architecture comparison and code review \|
17	\| `plan-review` \| Compare a plan against the codebase with risk assessment \|
18	\| `project-recap` \| Mental model snapshot for context-switching back to a project \|
19	\| `fact-check` \| Verify accuracy of a document against actual code \|
20	\| `share-page` \| Deploy an HTML page to Vercel and get a live URL \|
21
22	## Workflow
23
24	### 1. Think (5 seconds, not 5 minutes)
25
26	Before writing HTML, commit to a direction. Don't default to "dark theme with blue accents" every time.
27
28	Visual is always default. Even essays, blog posts, and articles get visual treatment — extract structure into cards, diagrams, grids, tables.
29
30	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.
31
32	For prose accents, see "Prose Page Elements" in `./references/css-patterns.md`. For everything else, use the standard freeform approach with aesthetic directions below.
33
34	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.
35
36	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).
37
38	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.
39
40	Constrained aesthetics (prefer these):
41	- Blueprint (technical drawing feel, subtle grid background, deep slate/blue palette, monospace labels, precise borders)
42	- Editorial broadsheet (serif headlines like Playfair Display or Crimson Pro, generous whitespace, muted earth tones or deep navy + gold)
43	- Paper and ink (warm cream `#faf7f5` background, terracotta/sage accents, informal feel — good for newsroom features)
44	- Magazine feature (large display serif, off-axis composition, rich pull quotes, photo-led)
45	- Academic / research paper (Libre Baskerville or Source Serif, restrained palette, footnotes-style detail, generous margins)
46	- Newsroom board (cork/pushpin texture, handwritten-style notes, pinned-card layouts — for editorial planning, story maps)
47	- Investigation wall (red string aesthetic, connected entities, graph-paper background, mon

People who liked this also viewed

6 picks

Type

visual-explainer

336stars57forks

View on GitHub

How to install visual-explainer?

jamditis/claude-skills-journalism/visual-explainer

$npx -y skills add jamditis/claude-skills-journalism --skill visual-explainer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Visual explainer
2
3	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.
4
5	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.
6
7	## Available commands
8
9	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.
10
11	\| Command \| What it does \|
12	\|---------\|-------------\|
13	\| `generate-web-diagram` \| Generate an HTML diagram for any topic \|
14	\| `generate-visual-plan` \| Generate a visual implementation plan for a feature \|
15	\| `generate-slides` \| Generate a magazine-quality slide deck \|
16	\| `diff-review` \| Visual diff review with architecture comparison and code review \|
17	\| `plan-review` \| Compare a plan against the codebase with risk assessment \|
18	\| `project-recap` \| Mental model snapshot for context-switching back to a project \|
19	\| `fact-check` \| Verify accuracy of a document against actual code \|
20	\| `share-page` \| Deploy an HTML page to Vercel and get a live URL \|
21
22	## Workflow
23
24	### 1. Think (5 seconds, not 5 minutes)
25
26	Before writing HTML, commit to a direction. Don't default to "dark theme with blue accents" every time.
27
28	Visual is always default. Even essays, blog posts, and articles get visual treatment — extract structure into cards, diagrams, grids, tables.
29
30	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.
31
32	For prose accents, see "Prose Page Elements" in `./references/css-patterns.md`. For everything else, use the standard freeform approach with aesthetic directions below.
33
34	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.
35
36	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).
37
38	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.
39
40	Constrained aesthetics (prefer these):
41	- Blueprint (technical drawing feel, subtle grid background, deep slate/blue palette, monospace labels, precise borders)
42	- Editorial broadsheet (serif headlines like Playfair Display or Crimson Pro, generous whitespace, muted earth tones or deep navy + gold)
43	- Paper and ink (warm cream `#faf7f5` background, terracotta/sage accents, informal feel — good for newsroom features)
44	- Magazine feature (large display serif, off-axis composition, rich pull quotes, photo-led)
45	- Academic / research paper (Libre Baskerville or Source Serif, restrained palette, footnotes-style detail, generous margins)
46	- Newsroom board (cork/pushpin texture, handwritten-style notes, pinned-card layouts — for editorial planning, story maps)
47	- Investigation wall (red string aesthetic, connected entities, graph-paper background, mon

People who liked this also viewed

6 picks

Type