Skip to main content
Renders interactive Gantt-style timelines and roadmaps in the browser using vis-timeline from phases, milestones, and tasks found in the conversation context. The output is a self-contained HTML file with zoomable, scrollable swimlanes. Use this skill when you mention timeline, Gantt chart, roadmap, project plan, phases, milestones, schedule, sprints, quarters, or ask when things happen or want to show a schedule.

​
Invocation

/timeline [describe the project, phases, or schedule]
Examples: 
/timeline Q1–Q3 product roadmap with three workstreams
/timeline Gantt chart for the API migration project
/timeline six-month onboarding plan with milestones
/timeline historical timeline of AI model releases from 2020 to 2024

​
Data format

Describe your timeline in natural language. The skill extracts:
  • Items — individual tasks, phases, or milestones with start and end dates
  • Groups — workstreams or swimlanes that items belong to
Vague time references are automatically converted to ISO dates:
InputConverted to
”Q1”2026-01-01 – 2026-03-31
”month 1–3”YYYY-01-01 – YYYY-03-31
”next sprint”Two-week window from today
Always provide enough date context (year, quarter, or month) for accurate conversion. Ambiguous references default to the current year.

​
Workflow

1

Extract items and groups

Identify tasks/phases (items) and workstreams/swimlanes (groups) from context.
2

Convert all dates to ISO strings

Translate every vague time reference to "YYYY-MM-DD" format. Default base date is today.
3

Assign group colors

Give each group a className and matching CSS color class from the palette in TEMPLATE.md.
4

Write the HTML file

Write a complete self-contained file to /tmp/timeline.html using the vis-timeline template.
5

Open in browser

Call mcp__chrome-devtools__new_page with url: file:///tmp/timeline.html.
6

Wait for render

Call mcp__chrome-devtools__wait_for on a group label string that appears after vis-timeline renders. Timeout 10000ms.
7

Take screenshot

Call mcp__chrome-devtools__take_screenshot and verify all items and group labels are visible.
8

Fix and reload if broken

If the screenshot shows problems, edit /tmp/timeline.html, then call mcp__chrome-devtools__navigate_page with type: reload.

​
Use cases

Project roadmaps

Lay out a quarterly or annual roadmap with multiple workstreams as swimlanes and milestones as point items.

Gantt charts

Visualize overlapping tasks, dependencies, and phase durations for engineering or operations projects.

Historical timelines

Plot events, releases, or milestones across a historical span to show chronological progression.

​
Self-review checklist

Before delivering, the skill verifies all of the following:
  • Screenshot shows all group swimlane labels in the left panel
  • Screenshot shows colored item bars spanning correct date ranges
  • No items are invisible or rendering as unstyled plain text (CSS CDN loaded)
  • Timeline container has explicit pixel height — vis-timeline did not collapse to 0px
  • All start/end values in the items array are ISO date strings "YYYY-MM-DD", not relative strings
  • Every item has a group property matching a group id
  • Dark theme CSS overrides are present and text is readable on dark background
  • wait_for was called before take_screenshot

​
Golden rules

Always convert vague references (“month 1”, “Q3”, “next sprint”) to explicit ISO date strings "YYYY-MM-DD" before passing to vis-timeline. Relative strings will throw a parse error or render at wrong positions.
vis-timeline collapses to 0px without it. Use height: 500px; width: 100%; at minimum.
stack: false causes overlapping items in the same group to render on top of each other, hiding all but the topmost. Default to stack: true for safety.
Ungrouped items pile into a single unlabelled row, defeating swimlane separation.
The group label only appears after vis-timeline fully renders. Screenshotting before it appears captures a blank or partially-rendered page.
Use mcp__chrome-devtools__new_page with url: file:///tmp/timeline.html. Use navigate_page with type: reload only for subsequent fixes.

​
Reference files

FileContents
TEMPLATE.mdComplete vis-timeline HTML template, date conversion patterns, color class system, group/item data format
TROUBLESHOOTING.mdFailure diagnosis table: symptoms, causes, fixes