Critical path

Skill shuakami/paperchart/skills/critical-path

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

Install

npx -y skills add shuakami/paperchart --skill critical-path

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 Gantt-style horizontal timeline for a network or load waterfall, with named milestone markers (DOMContentLoaded, user interaction, etc.) and two-colour bars that separate critical-path resources from deferred ones. Use when a technical blog post needs to explain a first-load network waterfall or an asset loading strategy.

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

paperchart — critical path timeline

A horizontal timeline. One row per resource. The x axis is milliseconds since navigation start. Bars on the critical path use the accent colour; deferred bars use the secondary neutral. Two vertical dashed markers label key moments (e.g. DOMContentLoaded, user opens search).

When to use

Explaining why a chunk sits on the critical path.
Showing a before / after network waterfall.
Visualising a deferred-load strategy where only a few resources block first paint.

Visual rules

Accent bars (#C75F3C) sit on the critical path. Neutral bars (#D6B99B) are deferred.
Two dashed vertical markers at named x positions. Their labels live in a dedicated band above the plot so they never collide with row labels.
Each row has a bold label, a 62 %-opacity one-line detail below, and a right-side annotation N KB br · M ms.
Totals strip on the right: X KB br · N resources on critical path vs Y KB br · M resources deferred.
X-axis ticks every 100 ms, caption underneath.

How to use

Edit src/charts/CriticalPathChart.tsx.
Replace the ROWS array with your resources: label, detail, startMs, endMs, kb, critical.
Adjust the two marker constants (DOMContentLoaded, user opens search) to match your story.
npm run dev, open /#/critical-path.
npm run snap to render to out/critical-path.png.