How do I install the Paperchart Critical Path skill?

Run npx skillmds@latest add shuakami/paperchart-critical-path in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Paperchart Critical Path safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Paperchart Critical Path?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Paperchart Critical Path free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Paperchart Critical Path?

shuakami (@shuakami) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Paperchart Critical Path by shuakami

Name: Paperchart Critical Path
Author: shuakami

Paperchart Critical Path

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.

shuakami d16f384 1.8 KB Updated Sep 17, 2026

File contents

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.

Frequently asked questions