# 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.

- Skill: `shuakami/paperchart-critical-path` (Agent Skill)
- Install (CLI): `npx skillmds@latest add shuakami/paperchart-critical-path`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shuakami/paperchart-critical-path/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: shuakami (https://skillmd.com/u/shuakami)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/shuakami/paperchart-critical-path

---


# 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

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