visual-explainer

Name: visual-explainer
Author: chacosoldier

29stars6forks

How to install visual-explainer?

chacosoldier/compabob/visual-explainer

$npx -y skills add chacosoldier/compabob --skill visual-explainer

Installs into the current project.

Summary

Generate a single self-contained HTML page that visually explains a system, a plan, a comparison, or a set of data. Use for "/visual-explainer", "make a diagram of", "show this visually", or when a complex table or architecture would land better as a styled page.

Files · 1

View on GitHub

SKILL.md

1	# Visual Explainer
2
3	Produce one standalone HTML file that explains something clearly. Good for architecture overviews, plan reviews, before/after comparisons, timelines, and dashboards.
4
5	## Steps
6
7	1. Clarify the subject and the audience. What is being explained, and who reads it? That sets the depth.
8	2. Choose the form: a flow diagram, a comparison table, a timeline, a layered architecture, a metric dashboard.
9	3. Build one self-contained `.html` file:
10	- All CSS inline in a `<style>` block. No external stylesheets, no CDN links, no network dependencies. The file must open correctly offline by double-clicking it.
11	- Readable typography, generous spacing, a restrained palette.
12	- Content-first: the explanation carries the page, decoration supports it.
13	4. Save to `reports/` (create the directory if needed) as `YYYY-MM-DD-<slug>.html`.
14	5. Tell the user the path so they can open it.
15
16	## Principles
17
18	- Self-contained or it does not count. One file, opens offline.
19	- The page answers a question. Lead with that answer, same as any other output.
20	- Prefer this over a large ASCII table (four or more rows, or three or more columns).

People who liked this also viewed

6 picks

Type

visual-explainer

29stars6forks

View on GitHub

How to install visual-explainer?

chacosoldier/compabob/visual-explainer

$npx -y skills add chacosoldier/compabob --skill visual-explainer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Visual Explainer
2
3	Produce one standalone HTML file that explains something clearly. Good for architecture overviews, plan reviews, before/after comparisons, timelines, and dashboards.
4
5	## Steps
6
7	1. Clarify the subject and the audience. What is being explained, and who reads it? That sets the depth.
8	2. Choose the form: a flow diagram, a comparison table, a timeline, a layered architecture, a metric dashboard.
9	3. Build one self-contained `.html` file:
10	- All CSS inline in a `<style>` block. No external stylesheets, no CDN links, no network dependencies. The file must open correctly offline by double-clicking it.
11	- Readable typography, generous spacing, a restrained palette.
12	- Content-first: the explanation carries the page, decoration supports it.
13	4. Save to `reports/` (create the directory if needed) as `YYYY-MM-DD-<slug>.html`.
14	5. Tell the user the path so they can open it.
15
16	## Principles
17
18	- Self-contained or it does not count. One file, opens offline.
19	- The page answers a question. Lead with that answer, same as any other output.
20	- Prefer this over a large ASCII table (four or more rows, or three or more columns).

People who liked this also viewed

6 picks

Type