Skip to content
Claude Code Build Playbook

Project Timeline

A standalone prompt for generating project timelines as single-file HTML artefacts. Replaces the static Gantt screenshot that everyone screenshots from a planning tool with something that travels — emailable, no auth required, and structurally richer than a flat bar chart.

A horizontal-scrolling timeline forms the spine of the page. Phases sit as broad bands; milestones sit as markers within them; dependencies show as connectors between milestones. Click any milestone to expand a side panel with its rationale, dependencies, risks, and owner. The narrative — why the timeline looks this way — is built into the artefact, not lost in a side conversation.

Useful for project kickoffs, steering committee updates, and any situation where a screenshot of a Gantt chart is the laziest version of what you mean.

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

View sample →

How a timeline is structured

Section titled “How a timeline is structured”

Three layers, top to bottom:

  1. Phases — broad bands across the timeline. Discovery, Design, Build, Launch. Each phase has a colour, a start and end, and an optional one-line goal.
  2. Tracks — horizontal lanes within the timeline for parallel workstreams. Engineering, Design, Research, Operations. Tracks are optional — single-track timelines work too.
  3. Milestones — point-in-time markers on a track. Each carries: label, date, owner, status (planned / in progress / done / at risk), rationale, dependencies, risks.

Plus three structural elements:

  • Today line — vertical line showing the current date, drawn by the JS at runtime so it’s always accurate
  • Now panel — fixed strip showing the current phase, milestones imminent in the next two weeks, and any at-risk items
  • Detail drawer — slides out from the right when a milestone is clicked

Visual style

Section titled “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. That default favours legibility at scale — the timeline can get dense, so the default uses thin strokes, generous white space, and accent colour reserved for status (at risk = red, done = green).

Prompt A — Shell bootstrap

Section titled “Prompt A — Shell bootstrap”
You are generating a single-file HTML project timeline. Read this
entire prompt before starting.


OUTPUT:
- One file: timeline.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
- Print stylesheet: timeline fits on landscape A3, dense but legible


VISUAL STYLE — resolve in this order:
1. design.md in this folder, if present
2. Reference URL below, if provided
3. Default: system fonts, neutral palette with status colours
   (planned = neutral, in progress = accent, done = green,
   at risk = amber/red), thin strokes, generous white space


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


SHELL REQUIREMENTS:


1. Page layout
   - Top: header strip (project name, date range, status,
     last-updated)
   - Middle: now panel (~120px tall, fixed)
   - Below: timeline canvas (takes remaining viewport height,
     scrolls horizontally)
   - Right edge: detail drawer (hidden by default, slides in)


2. Header strip
   - Project name (large, left)
   - Date range (e.g. "Jan 2026 — Sep 2026")
   - Overall status pill (On track / At risk / Off track)
   - Last-updated timestamp (right, monospace, small)


3. Now panel
   - Three sections side by side:
     a. CURRENT PHASE — name + percentage complete + days remaining
     b. NEXT 2 WEEKS — list of milestones with dates and owners
     c. AT RISK — list of any at-risk milestones with one-line reason
   - If a section is empty, show a quiet "—" rather than hiding


4. Timeline canvas
   - Horizontal scrolling
   - Vertical fixed: phases form coloured bands across the full
     height; tracks are horizontal lanes within
   - Time axis at the top with month labels and week ticks
   - Today line: vertical accent-coloured line drawn at the
     current date (computed at page load from new Date())
   - Phase headers labelled at the start of each phase band
   - Track labels sticky on the left edge
   - Milestone markers: small shape on the time axis at the
     milestone's date and track
       * Diamond = milestone (point in time)
       * Bar = task (start and end)
       * Status determines fill colour
   - Dependencies drawn as thin curved lines between markers
   - Hover a milestone: tooltip with label and date
   - Click a milestone: opens detail drawer


5. Detail drawer
   - Slides in from the right
   - Header: milestone label + status pill + date
   - Body sections:
       OWNER: name and role
       RATIONALE: why this milestone exists, what it unblocks
       DEPENDENCIES: list of upstream milestones that must complete
                     first (each is a clickable link that jumps to
                     that milestone)
       RISKS: list of things that could delay it, with mitigations
       NOTES: free-form running notes
   - Close button (X) and Escape key both close the drawer


6. Keyboard
   - Left / Right: scroll timeline
   - Home: jump to project start
   - End: jump to project end
   - 'T': jump to today
   - Tab through milestones in chronological order
   - Enter on a focused milestone opens its drawer
   - Escape closes drawer


7. Status legend
   - Bottom-right corner: small legend showing status colours
   - Legend folds out on hover/tap; collapsed by default


MILESTONE / TASK SHAPES:


- milestone (diamond): a point-in-time event (Launch, Sign-off,
  Review). One date.
- task (bar): a span of work (Build phase, Research sprint).
  Start and end dates.
- gate (vertical line + label): a checkpoint that blocks
  subsequent work until cleared (Steerco approval, Security
  review). One date, full timeline-height line.


PLACEHOLDER CONTENT:


Generate a placeholder timeline running from a fictional
"Jan 6 2026" to "Sep 30 2026" with this structure:


  PHASES:
    Discovery       Jan 6  → Feb 28
    Design          Mar 2  → Apr 30
    Build           May 4  → Aug 14
    Launch          Aug 17 → Sep 30


  TRACKS:
    Research
    Design
    Engineering
    Ops


  MILESTONES (mix of types and statuses):
    Discovery — Research — "Field interviews complete" (milestone,
                                                        done, Feb 12)
    Discovery — Design   — "Insight synthesis" (task, Feb 15-Feb 28,
                                                done)
    Design    — gate     — "Concept sign-off" (gate, Apr 28,
                                               at risk)
    Build     — Engineering — "MVP build" (task, May 4-Jul 31,
                                           in progress)
    Build     — Engineering — "Beta launch" (milestone, Aug 1,
                                             planned)
    Launch    — Ops      — "Comms ready" (task, Aug 17-Sep 5,
                                          planned)
    Launch    — gate     — "Go / no-go" (gate, Sep 12, planned)
    Launch    — milestone — "Public launch" (milestone, Sep 30,
                                              planned)


  Add 2-3 dependency arrows: e.g. Insight synthesis → Concept
  sign-off; Concept sign-off → MVP build; Beta launch → Go / no-go.


  For each milestone, generate plausible rationale, 1-2
  dependencies, 1-2 risks, and an owner name.


  Set the today line by computing new Date() in JS — placeholder
  may show "today" landing wherever it lands relative to the
  fictional dates.


CODE QUALITY:


- Semantic HTML where possible (timeline canvas can be SVG for
  the markers and dependency lines, with HTML overlays for labels)
- CSS custom properties for palette and status colours
- Vanilla JS, comment major sections (timeline render, today line,
  drawer, keyboard, dependency drawing)
- Drawer state persists across timeline scrolls


WHEN DONE:


Save as timeline.html. Confirm file size (under 100KB). Tell me
the phase count, milestone count by type and status, and dependency
count.

Prompt B — Rough content dump

Section titled “Prompt B — Rough content dump”
Replace the placeholder content in timeline.html with the real
project from the rough content dump below. Do not change the shell —
canvas mechanics, drawer, keyboard, visual style stay as is.


RULES:


- Rough content dump has four blocks: PROJECT, PHASES, TRACKS, MILESTONES.
- PROJECT: name, date range, current status, last-updated.
- PHASES: ordered list, each with name, start, end, optional goal.
- TRACKS: list of track names, top-to-bottom on the canvas.
- MILESTONES: each milestone has type, label, track, date(s),
  status, owner, rationale, dependencies, risks, notes.
- Dependencies are written as "depends on: <milestone label>".
  Resolve them to milestone IDs in the rendered timeline.
- If a dependency target doesn't exist, flag it in the output but
  render the rest of the timeline normally.
- Update the now panel automatically based on the milestone data
  and today's date at page load.
- Don't invent milestones, owners, risks, or dependencies I didn't
  write. If I leave a field blank, leave it blank in the drawer.


ROUGH CONTENT DUMP:


[paste below this line.]


---


# PROJECT


NAME: [project name]
RANGE: [start date] → [end date]
STATUS: [On track / At risk / Off track]
UPDATED: [date]


# PHASES


## Discovery
START: [date]
END: [date]
GOAL: [optional one-liner]


## Design
START: [date]
END: [date]
GOAL: [optional]


## Build
START: [date]
END: [date]


## Launch
START: [date]
END: [date]


# TRACKS


- Research
- Design
- Engineering
- Ops


# MILESTONES


## [milestone label]
TYPE: milestone | task | gate
TRACK: [track name]
DATE: [single date for milestone/gate]   OR
START: [date]
END: [date]                              (for tasks)
STATUS: planned | in progress | done | at risk
OWNER: [name, role]
RATIONALE: [why this exists, what it unblocks]
DEPENDS ON: [comma-separated list of upstream milestone labels]
RISKS:
- [risk]: [mitigation]
- [risk]: [mitigation]
NOTES: [running notes, optional]


## [next milestone label]


[...continue...]


---


WHEN DONE:


Save the updated timeline.html. Tell me the milestone count by
type and status, the dependency count, any unresolved dependencies,
and any milestones missing rationale or owner — those are usually
the ones that need more thought.

design.md — optional style brief

Section titled “design.md — optional style brief”

Same shape as other templates. For timelines, consider adding:

  • Status colour scale — if the default green/amber/red doesn’t suit, override here
  • Phase palette — phase bands can carry brand colours; specify if needed

Recurring patterns

Section titled “Recurring patterns”

Re-baseline. When the plan changes, ask Claude Code to save the current timeline as timeline-baseline.html and update the working version. Generates a “what changed” diff between them on request.

Filter to a track. For audiences that only care about engineering or design, ask Claude Code to render a single-track view that hides other tracks while keeping phases and gates intact.

Compress for steerco. Steerco audiences usually want phases + gates + at-risk items only, no detail. Ask Claude Code for a “steerco view” — same data, compressed presentation, no hover detail.

Promote a delay into a decision memo. When a milestone slips significantly, ask Claude Code to extract the milestone’s rationale, dependencies, and risks into the Decision Memo Template — turns a slip into a reasoned ask for what to do about it.