Delivery panels

Skill shuakami/paperchart/skills/delivery-panels

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

Install

npx -y skills add shuakami/paperchart --skill delivery-panels

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 three-up side-by-side panel comparison for architecture options or delivery variants. Each panel has a heading, a subtitle, a list of assets with their sizes, and a totals strip at the bottom. Exactly one panel is accented so the reader understands which option is recommended or which one the post will focus on.

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.7 KB, as published. Nobody here has run it

paperchart — delivery panels

Three side-by-side cards used to compare architecture options or delivery strategies. The layout reads like a small decision matrix: same fields in each column, same vertical alignment, only the colour changes.

When to use

A/B/C architecture comparisons.
Before / middle / after evolution stories in an engineering blog.
"here are three ways to ship this; we chose column three" narratives.

Visual rules

One column uses #C75F3C fills on its asset rows; the other two stay neutral (#D6B99B). The accented column is the recommended or final choice.
Every column shares the same subheading ("what the browser fetches on /docs", or equivalent) directly under the title so scanning across is frictionless.
Each asset row has a label, a one-line detail in 62 % opacity ink, and a right-aligned size in tabular numerals.
Totals at the bottom: first-load total on the left, deferred total on the right. Only the accented column's first-load number is coloured.

How to use

Edit src/charts/Delivery.tsx.
Adjust the three Panel invocations: title, subtitle, accent: boolean, assets list, and the one-line note at the bottom.
npm run dev, open /#/delivery.
npm run snap to render to out/delivery.png.