Milestone Timeline

A standalone prompt for generating a single-screen project overview as a single-file HTML artefact. The simpler cousin of the Project Timeline — no drawer, no detail panels, no dependency arrows. Just a horizontal time axis with activity bars and milestone markers.

Designed to be screenshot-able and slide-droppable. The kind of timeline that goes on slide 2 of a steerco update — a project at a glance, not a project tool.

You’ll use two prompts: Prompt A scaffolds the shell with placeholder content, Prompt B populates the real plan from a brain-dump.

When to use this vs Project Timeline vs Phased Gantt

	Use this when…
Milestone Timeline	You want a glanceable overview for executives. 6–18 month horizon. ~5–10 activities, ~3–5 milestones.
Phased Gantt	You want a delivery view for a PM. 8–20 weeks. ~10–20 activities grouped by phase.
Project Timeline	You want a working project tool with rationale, dependencies, risks per milestone.

If you find yourself wanting drawer detail, dependency arrows, or status pills, use the Project Timeline instead.

How it’s structured

A horizontal time axis runs across the top with month labels. Below the axis sit activity bars — each anchored to its start and end on the axis. Above the axis sit milestone markers — diamonds or triangles at point-in-time events. A “NOW” pill or vertical line marks today.

That’s the whole thing. Single screen on a typical viewport for projects up to ~12 months; horizontal scroll kicks in for longer ranges.

Visual style

As with the other templates, this follows a priority order: a design.md file in the same folder takes precedence, otherwise use any reference URL provided in the prompt, and if neither is available, fall back to the default Playbook style. The default leans warm and slightly informal — soft greys for the axis, two or three accent colours for the bars (assigned in order, no semantic meaning), one stronger accent for milestone markers and the NOW indicator.

Prompt A — Shell bootstrap

You are generating a single-file HTML milestone timeline. Read this entire
prompt before starting.

OUTPUT:
- One file: milestones.html
- Inline CSS in a <style> block, inline JS in a <script> block
- No external dependencies
- Must work from file:// and as an email attachment
- Single-screen artefact: looks good as a screenshot, prints cleanly

VISUAL STYLE — resolve in this order:
1. design.md in this folder, if present
2. Reference URL below, if provided
3. Default: system fonts, warm neutral palette (off-white background,
   soft grey axis, 2-3 accent colours rotating across activity bars,
   one stronger accent for milestones and NOW)

REFERENCE URL (optional):
[paste URL here, or leave empty]

LAYOUT:

1. Page header
   - Project title (large, left)
   - Date range (smaller, below or right of title)
   - Optional one-line subtitle / status

2. Time axis
   - Horizontal strip across the page
   - Month labels in roughly equal cells (months are not perfectly
     to scale — readability beats precision)
   - For projects under 18 months: fits the viewport width
   - For projects 18+ months: horizontal scroll, axis stays sticky
     at the top while scrolling

3. Milestone band (above the axis)
   - Diamond or triangle markers at each milestone's date
   - Label sits above the marker
   - Markers use a single strong accent colour
   - If two milestones are close enough to overlap, stagger their
     labels vertically so both stay readable

4. Activity band (below the axis)
   - Activity bars stack vertically, top-down in the order they
     appear in the data
   - Each bar spans from its start to its end on the time axis
   - Bar carries a label (the activity name) inside it; if too
     short, label sits to the right of the bar
   - "Start / Finish" caption optionally above each bar (small,
     muted, monospace) — controlled by data attribute
   - Bars rotate through 2-3 accent colours (no semantic meaning;
     just visual variety)

5. NOW indicator
   - Vertical line drawn at today's date (computed at page load
     from new Date())
   - Small "NOW" pill at the top or bottom of the line
   - If today is outside the project range, hide the indicator
     entirely

6. Optional: progress shading
   - If an activity carries a "complete: true" flag, render the bar
     with a subtle shaded fill or a slash pattern to mark it done
   - Default: all bars rendered plain

INTERACTIONS:

- Hover an activity bar: tooltip shows full name + start/end dates
- Hover a milestone marker: tooltip shows full label + date
- No drawer, no expanded view, no clickable navigation
- Keyboard: not applicable — this is a static artefact

PRINT BEHAVIOUR:

- Hide hover tooltips
- Force the timeline to fit the print page width (landscape A4 by
  default; if the project range is too long, shrink to fit)

PLACEHOLDER CONTENT:

Generate a placeholder timeline running from "Jan 2026" to "Dec 2026"
with this content:

  TITLE: "Project timeline: 12 months"
  SUBTITLE: "Q1 onwards"

  MILESTONES:
    - "Milestone 01" — Feb 1
    - "Milestone 02" — Mar 1
    - "Milestone 03" — Jul 15
    - "Milestone 04" — Nov 15

  ACTIVITIES (in order, top to bottom):
    1. "Field research"      Jan 6  — Feb 12
    2. "Synthesis"           Feb 15 — Mar 15
    3. "Concept design"      Mar 1  — Jun 30
    4. "Detailed design"     Jul 1  — Aug 5
    5. "Build prep"          Aug 1  — Aug 30
    6. "Build"               Sep 1  — Oct 30
    7. "Launch comms"        Oct 15 — Dec 5
    8. "Public launch"       Nov 20 — Dec 31

  Show "Start / Finish" captions above activities 1, 2, 3, 6, 7, 8
  (skip 4 and 5 to demonstrate that captions are optional).

  Mark activity 1 as complete to demonstrate the shaded-fill state.

  The NOW indicator should compute itself from new Date() at page
  load — don't fake the position.

CODE QUALITY:

- The timeline canvas should be SVG (markers, bars, axis lines).
- Labels and tooltips can be HTML overlays positioned over the SVG.
- Vanilla JS, comment major sections (axis layout, NOW computation,
  tooltip handling).
- CSS custom properties for palette and bar colours.

WHEN DONE:

Save as milestones.html. Confirm file size (under 40KB).
Tell me the milestone count, activity count, and where the NOW
indicator landed.

Prompt B — Rough content dump

Replace the placeholder content in milestones.html with the real
project from the brain-dump below. Do not change the shell — axis,
milestone band, activity band, NOW indicator, visual style stay
as is.

RULES:

- Brain-dump format is intentionally loose. Parse forgivingly.
- Top of the brain-dump: project metadata (title, range, optional
  subtitle).
- A MILESTONES section: list of milestones, each as one line. Format
  is roughly "name | date" but accept variations:
    - "Milestone name — 28 Feb"
    - "Milestone name | Feb 28"
    - "Milestone name: 2026-02-28"
    - "28 Feb — Milestone name"
  Parse the date in any reasonable format. If a year isn't given,
  infer from the project range.
- An ACTIVITIES section: list of activities, each as one line.
  Format is roughly "name | start — end" but accept variations:
    - "Activity name | Jan 6 — Feb 12"
    - "Activity name: Jan 6 to Feb 12"
    - "Activity name (Jan — Feb)"
    - "Jan 6 — Feb 12 | Activity name"
  Parse start and end dates in any reasonable format.
- Mark an activity complete if the line ends with "✓" or "[done]"
  or "(complete)" or "100%".
- Add "Start / Finish" caption to an activity if the line includes
  "[caption]" or "[show dates]" anywhere.
- Update the page header, milestone band, and activity band.
- Don't invent activities, milestones, or dates I didn't write.
- If a date is ambiguous or unparseable, render the activity but
  flag the issue in the report at the end.

BRAIN-DUMP:

[paste below this line. Don't worry about exact formatting — just
get the project, milestones, and activities written down with
something resembling dates.]

---

PROJECT: [project name]
RANGE: [start month/year] — [end month/year]
SUBTITLE: [optional one-liner]

MILESTONES:
- [milestone name] | [date]
- [milestone name] | [date]
- [milestone name] | [date]

ACTIVITIES:
- [activity name] | [start] — [end]
- [activity name] | [start] — [end] [caption]
- [activity name] | [start] — [end] ✓
- [activity name] | [start] — [end]

---

WHEN DONE:

Save the updated milestones.html. Tell me:
- Final milestone count and activity count
- Where the NOW indicator landed (inside or outside the project range)
- Any dates that didn't parse cleanly and how I might rewrite them
- Any activities that overlap visually in a way that looks cluttered
  (so I can decide whether to combine them or accept the overlap)

design.md — optional style brief

Same shape as other templates. For this template, the most useful design.md fields are:

Bar palette — override the default 2–3 rotating accents
Milestone marker shape — diamond, triangle, circle, or custom
NOW indicator style — line + pill, line only, or pill only

Recurring patterns

Add a milestone mid-project. Tell Claude Code: “add a milestone called ‘security review’ on 15 Apr”. It’ll insert it into the milestone band and stagger labels if needed.

Compress to portrait. For embedding in a slide that’s portrait-oriented, ask Claude Code to render the timeline vertically — months down the left, activities flowing left-to-right inside each month band. Same data, rotated layout.

Strip to milestones only. For executive audiences who only care about the dated events, ask for a milestones-only version that hides the activity band entirely.

Promote to a Project Timeline. When this overview starts attracting questions about why the dates are what they are, regenerate as a Project Timeline — same milestones, but now with rationale, dependencies, and risks per milestone.