Phased Gantt

A standalone prompt for generating a delivery-grain Gantt chart as a single-file HTML artefact. Mid-way between the Milestone Timeline (executive overview) and the Project Timeline (full project tool).

A labelled list of activities runs down the left, grouped under phase headings. A gridded canvas runs across the right with weeks or sprints across the top and bars inside the grid. An optional % complete column sits between the label and the bar, driving a fill state on each bar.

Designed for project managers running a single workstream. The kind of plan you put on a delivery slide for stakeholders who actually care about what’s happening week to week.

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 Milestone Timeline vs Project Timeline

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

If you find yourself wanting to capture why an activity is structured the way it is, or its dependencies, use the Project Timeline instead. If you want fewer activities and a longer horizon, use the Milestone Timeline.

How it’s structured

Two columns:

Left column — activities listed top-to-bottom, grouped under phase headings. Optional % complete field per activity. Phase headings are the structural element; there are no separate tracks or swim lanes.
Right column — gridded canvas with time units (weeks, sprints) across the top and bars inside the grid. Bars span from start to end on the time axis. The % value drives a fill state on each bar.

A small set of milestones can sit above the canvas as point-in-time markers, but they’re optional and lighter than the activity bars.

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 is utilitarian — clean grid lines, restrained palette, phase grouping carrying the structure. Bars rotate through colours per-phase (all activities in Phase 1 share a colour, all in Phase 2 share another, and so on) so the phase grouping is visible in the canvas as well as in the labels.

Prompt A — Shell bootstrap

You are generating a single-file HTML phased Gantt chart. Read this
entire prompt before starting.

OUTPUT:
- One file: gantt.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 for short projects; horizontal scroll for
  longer ones with the activity column staying sticky

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, thin grid lines, phase
   colours rotating through 3-4 distinct hues (no semantic meaning;
   each phase gets one colour shared by all its activities)

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

LAYOUT:

1. Page header
   - Project title (large, left)
   - Subtitle: time unit + range (e.g. "Weeks 1-20" or
     "Sprints 1-10")
   - Optional: status pill (On track / At risk / Off track)

2. Two-column body
   - LEFT COLUMN: activity label list
     - Width: ~280px on desktop, sticky during horizontal scroll
     - Phase headings as section dividers
     - Each activity: name + optional % complete
     - % complete shown as a small monospace value to the right of
       the name
   - RIGHT COLUMN: time grid + bars
     - Width: takes remaining viewport; horizontal scroll if needed
     - Top axis: time unit cells (weeks, sprints, days — set in
       brain-dump)
     - Vertical grid lines between time units
     - Horizontal grid lines align with each activity row in the
       left column
     - Bars span from start to end on the time axis
     - Bars carry the activity name inside (or to the right if too
       short) — same as the Milestone Timeline

3. Phase headings
   - Span both columns horizontally
   - Bold, slightly larger than activity rows
   - Subtle background tint matching the phase's bar colour at
     low opacity

4. Bars
   - Each bar is filled with the phase's colour
   - If activity has % complete, a darker overlay fills that
     percentage of the bar from the left
   - 0% renders as an empty outline-only bar
   - 100% renders as a fully filled bar
   - Resource name (optional) sits to the right of the bar in
     muted small text

5. Optional milestone band (above the time axis)
   - Diamond markers at point-in-time events
   - Use sparingly — this template is activity-focused, not
     milestone-focused
   - If no milestones in brain-dump, hide the band entirely

6. NOW indicator
   - Vertical line drawn at the current time unit (computed at
     page load by mapping today's date to a position on the axis)
   - Time unit logic:
       weeks: assume project starts on the Monday of week 1; today
              maps to whichever week it falls in
       sprints: brain-dump must specify sprint length and start
                date; today maps to whichever sprint it falls in
       days: today maps directly to the day cell
   - Hide the indicator if today is outside the project range

INTERACTIONS:

- Hover an activity bar: tooltip with full name, time range, % complete,
  resource name (if any)
- Hover a milestone marker: tooltip with full label
- Click an activity row in the left column: highlight that row
  across the full canvas (dim the others) for focus
- Click anywhere else to clear the highlight
- No drawer, no expanded view

PRINT BEHAVIOUR:

- Hide tooltips
- Force the chart to fit print page width
- Landscape A4 by default; for very long projects, scale down
- Activity column stays full-width on print

PLACEHOLDER CONTENT:

Generate a placeholder Gantt with this structure:

  TITLE: "Website redesign"
  SUBTITLE: "Weeks 1–20"
  STATUS: "On track"
  TIME UNIT: weeks
  RANGE: 1 to 20

  PHASE 1 — Discovery (rotates first colour)
    - Stakeholder interviews    weeks 1-3   (100%)  resource: Sam
    - Audit                     weeks 2-4   (100%)  resource: Sam
    - Synthesis                 weeks 4-5   (60%)   resource: Sam

  PHASE 2 — Design (rotates second colour)
    - IA                        weeks 5-7   (30%)   resource: Lou
    - Wireframes                weeks 7-10  (0%)    resource: Lou
    - Visual design             weeks 10-13 (0%)    resource: Lou
    - Design QA                 weeks 13-14 (0%)

  PHASE 3 — Build (rotates third colour)
    - Front-end                 weeks 13-18 (0%)    resource: Devs
    - CMS integration           weeks 14-18 (0%)    resource: Devs
    - QA                        weeks 18-20 (0%)

  MILESTONES (sparse, only the most important):
    - Design sign-off | week 13
    - Launch | week 20

  Demonstrate the % complete fill states using activities at
  100%, 60%, 30%, and 0%.

  The NOW indicator should compute its position from today's date.
  For the placeholder, assume "week 1" started 18 weeks ago, so NOW
  lands somewhere in week 18 of the placeholder (this is just for
  the placeholder; the real version recomputes from real dates).

CODE QUALITY:

- The grid canvas should be a CSS grid or HTML table
  (semantic <table> is fine — this IS tabular data)
- Bars rendered as positioned divs over the grid
- Vanilla JS for tooltips, row highlighting, NOW computation
- CSS custom properties for palette and phase colours
- Comment major sections (grid layout, bar positioning, NOW logic,
  highlight state)

WHEN DONE:

Save as gantt.html. Confirm file size (under 50KB). Tell me:
- Phase count and activity count
- How many activities at each completion bracket (0%, 1-99%, 100%)
- Where the NOW indicator landed
- Whether the chart fits the viewport without horizontal scroll

Prompt B — Rough content dump

Replace the placeholder content in gantt.html with the real plan from
the brain-dump below. Do not change the shell — two-column layout,
phase grouping, grid, NOW indicator, visual style stay as is.

RULES:

- Brain-dump format is intentionally loose. Parse forgivingly.
- Top of the brain-dump: project metadata (title, time unit, range,
  optional subtitle and status).
- TIME UNIT can be: weeks, sprints, or days. Default: weeks.
- If sprints, brain-dump should specify sprint length and start
  date so NOW can be computed; if missing, default to 2-week
  sprints starting today minus the current sprint number.
- Phases are written as "# Phase name" or "## Phase name" headings.
  Treat both as phase markers.
- Activities under each phase are written as bullet lines. Format
  is loose — parse for these elements in any order:
    - activity name (the prose part)
    - time range, written as one of:
        "weeks 1-3"
        "weeks 1 to 3"
        "1 — 3"
        "Jan 6 — Feb 12" (translate to weeks/sprints/days)
    - % complete, written as one of:
        "(60%)"
        "60%"
        "[done]" → 100%
        "[half]" → 50%
        "(in progress)" → render as striped bar with no specific %
    - resource name, written as one of:
        "resource: Sam"
        "@Sam"
        "(Sam)"
- If an activity has no time range, flag it in the report. Don't
  invent a range.
- Milestones (optional) listed under a "# MILESTONES" heading at
  the end. Format: "name | time-unit-position".
- Update the page header, phase headings, activity rows, bars,
  milestone band, and NOW position.
- Don't invent activities, % complete values, resources, or
  milestones I didn't write.
- Tighten typos and casual phrasing. Don't editorialise.

BRAIN-DUMP:

[paste below this line.]

---

PROJECT: [project name]
TIME UNIT: [weeks / sprints / days]
RANGE: [start] to [end]
SUBTITLE: [optional]
STATUS: [optional]

# Phase 1 — [phase name]

- [activity name] | weeks [start]-[end] (%) @[resource]
- [activity name] | weeks [start]-[end] [done]
- [activity name] | weeks [start]-[end]

# Phase 2 — [phase name]

- [activity name] | weeks [start]-[end] (50%)
- [activity name] | weeks [start]-[end] (in progress) @[resource]

# Phase 3 — [phase name]

- [activity name] | weeks [start]-[end]
- [activity name] | weeks [start]-[end]

# MILESTONES

- [milestone name] | week [n]
- [milestone name] | week [n]

---

WHEN DONE:

Save the updated gantt.html. Tell me:
- Phase count, activity count, milestone count
- Activities by completion bracket
- Activities missing time ranges (so I can fix them)
- Activities missing resources (so I can decide whether to add them)
- Where the NOW indicator landed
- Whether anything overlaps visually in a way that's hard to read

design.md — optional style brief

Same shape as other templates. Useful additions for this template:

Phase palette — explicit hex codes for each phase’s bar colour
Time unit — if your team consistently uses sprints or days, set the default here
Resource styling — show resource names as initials, full names, or hide them entirely

Recurring patterns

Add a phase mid-project. Tell Claude Code where to insert and what activities to include. It’ll renumber phases if needed and rotate colours so the new phase gets a distinct hue.

Replan from current date. When the project slips, ask Claude Code to “shift everything after week N by M weeks” — it’ll update the time ranges and the NOW indicator stays where it is.

Filter to a resource. For one-on-ones with a specific team member, ask Claude Code to render a version showing only their activities. Same phases, fewer rows.

Strip to phases only. For high-level views, ask for a phases-only version — each phase becomes a single bar spanning the earliest start to latest end of its activities. Useful for steerco when the Milestone Timeline is too sparse and the full Gantt is too dense.

Promote a single phase to a Project Timeline. When one phase becomes complex enough to need rationale and risks per milestone, regenerate that phase as a Project Timeline and link to it from the Gantt.