mph-figure

Name: mph-figure
Author: mphinance

15stars3forks

How to install mph-figure?

mphinance/alpha-skills/mph-figure

$npx -y skills add mphinance/alpha-skills --skill mph-figure

Installs into the current project.

Summary

Render markdown or HTML into a crisp, accurately-rendered PNG — tables, data figures, stat cards — for inlining into Substack posts (where markdown tables render as garbage) or anywhere a real-browser-rendered image beats a hand-drawn one. Use whenever a post or doc needs a table

Files · 1

View on GitHub

SKILL.md

1	# MPH Figure
2
3	Turns markdown (or raw HTML) into a pixel-accurate image: it renders the content in a
4	real browser via Playwright and screenshots it. Because a browser does the layout, the
5	output has full CSS fidelity — real fonts, text wrapping, column alignment, the lot.
6	More accurate than SVG-shortcut generators, which only support a subset of CSS.
7
8	Built mainly for one job: Substack cannot render markdown tables. The
9	`mph-substack-writer` skill mandates "generate an image instead." This skill is how you
10	generate it.
11
12	## When to use it
13
14	- A Substack post (or any doc) needs a table — render it as an image instead of
15	writing a raw markdown table.
16	- Any time structured content (a comparison, a stat block, a small data card) reads
17	better as a clean image than as plain markdown.
18
19	## One-time setup
20
21	This skill bundles a script with dependencies. Run once:
22
23	```
24	cd ~/.claude/skills/mph-figure
25	npm install
26	npx playwright install chromium # skip if Playwright's browser is already installed
27	```
28
29	## How to use it
30
31	1. Write the figure as markdown (a normal markdown table works; column alignment
32	with `:---:` is respected) and save it to a file, e.g. `figure.md`.
33	2. Render it:
34
35	```
36	node ~/.claude/skills/mph-figure/scripts/render.mjs --in figure.md --out figure.png
37	```
38
39	3. Inline the result in the post: `![caption](figure.png)`.
40
41	Need full control of the markup? Pass a `.html` file (or add `--html`) instead.
42
43	## Options
44
45	- `--in <file>` markdown or HTML input (required)
46	- `--out <file>` output PNG (required)
47	- `--width <px>` figure width, default 720 (a good Substack inline width)
48	- `--scale <n>` sharpness / device scale, default 2 (retina-crisp)
49	- `--theme <name>` visual theme, default `bloomberg`
50	- `--html` treat the input as raw HTML regardless of extension
51
52	## Theme
53
54	`bloomberg` — a dark, sharp, data-first look: near-black card, amber accents, clean
55	tables with uppercase headers and tabular numerals. This is the "dark theme, Bloomberg
56	aesthetic" `mph-substack-writer` asks for. Add more themes to the `THEMES` map in
57	`scripts/render.mjs`.

People who liked this also viewed

6 picks

Type

mph-figure

15stars3forks

View on GitHub

How to install mph-figure?

mphinance/alpha-skills/mph-figure

$npx -y skills add mphinance/alpha-skills --skill mph-figure

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# MPH Figure
2
3	Turns markdown (or raw HTML) into a pixel-accurate image: it renders the content in a
4	real browser via Playwright and screenshots it. Because a browser does the layout, the
5	output has full CSS fidelity — real fonts, text wrapping, column alignment, the lot.
6	More accurate than SVG-shortcut generators, which only support a subset of CSS.
7
8	Built mainly for one job: Substack cannot render markdown tables. The
9	`mph-substack-writer` skill mandates "generate an image instead." This skill is how you
10	generate it.
11
12	## When to use it
13
14	- A Substack post (or any doc) needs a table — render it as an image instead of
15	writing a raw markdown table.
16	- Any time structured content (a comparison, a stat block, a small data card) reads
17	better as a clean image than as plain markdown.
18
19	## One-time setup
20
21	This skill bundles a script with dependencies. Run once:
22
23	```
24	cd ~/.claude/skills/mph-figure
25	npm install
26	npx playwright install chromium # skip if Playwright's browser is already installed
27	```
28
29	## How to use it
30
31	1. Write the figure as markdown (a normal markdown table works; column alignment
32	with `:---:` is respected) and save it to a file, e.g. `figure.md`.
33	2. Render it:
34
35	```
36	node ~/.claude/skills/mph-figure/scripts/render.mjs --in figure.md --out figure.png
37	```
38
39	3. Inline the result in the post: `![caption](figure.png)`.
40
41	Need full control of the markup? Pass a `.html` file (or add `--html`) instead.
42
43	## Options
44
45	- `--in <file>` markdown or HTML input (required)
46	- `--out <file>` output PNG (required)
47	- `--width <px>` figure width, default 720 (a good Substack inline width)
48	- `--scale <n>` sharpness / device scale, default 2 (retina-crisp)
49	- `--theme <name>` visual theme, default `bloomberg`
50	- `--html` treat the input as raw HTML regardless of extension
51
52	## Theme
53
54	`bloomberg` — a dark, sharp, data-first look: near-black card, amber accents, clean
55	tables with uppercase headers and tabular numerals. This is the "dark theme, Bloomberg
56	aesthetic" `mph-substack-writer` asks for. Add more themes to the `THEMES` map in
57	`scripts/render.mjs`.

People who liked this also viewed

6 picks

Type