Bytes chart

Skill shuakami/paperchart/skills/bytes-chart

Quiet, editorial chart PNGs for technical blog posts. 15 primitives, six themes, one CLI.

Install

npx -y skills add shuakami/paperchart --skill bytes-chart

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Render a stacked horizontal bar chart that splits a byte payload into a first-load block and a deferred block, separated by an explicit visible gap. Use when comparing delivery sizes across two or more options and you want to make it obvious that some bytes are on the critical path and others are not.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

1.6 KB, as published. Nobody here has run it

paperchart — bytes chart

Stacked horizontal bars with an explicit gap that separates the first-load critical-path portion from the deferred portion. Each row has a title and a caption; each segment has a tag above or inside it with its size.

When to use

Bundle size breakdowns.
Critical-path vs deferred resource splits.
Comparing how a single payload is delivered across two or more architectures.

Visual rules

Solid segments sit on the critical path. Dashed segments are deferred and separated by a visible horizontal gap.
"first-load critical path" and "deferred" band markers sit above the accented row, so the reader learns the convention from the accent example.
Totals are printed on the right edge of each bar: 107 KB br · first-load critical path + 0 KB deferred.
X axis is linear in KB and the caption ("bytes on the wire after brotli-11 compression, kilobytes") sits below the ticks.

How to use

Edit src/charts/BytesChart.tsx.
Rewrite ROWS: each row has group, caption, segments (with kb, fill, tag, optional dashed), firstLoadKB, deferredKB, optional deferredGap.
npm run dev, open /#/bytes.
npm run snap to render to out/bytes.png.