timeline

Installation
SKILL.md

Timeline

Renders interactive Gantt-style timelines and roadmaps in the browser using vis-timeline from context-supplied phases, milestones, and tasks.

Workflow

  1. Extract items and groups — identify tasks/phases (items) and workstreams/swimlanes (groups) from context. See TEMPLATE.md for data shapes.
  2. Convert all dates to ISO strings — translate every vague time reference ("month 1-3", "Q2", "next sprint") to "YYYY-MM-DD" format. Default base date is today. See TEMPLATE.md for conversion patterns.
  3. Assign group colors — give each group a className and matching CSS color class. See TEMPLATE.md for the color class system.
  4. Write the HTML file — write a complete self-contained file to /tmp/timeline.html using the vis-timeline template. See TEMPLATE.md for the full template.
  5. Render in browser — follow _shared/chrome-devtools-render.md to open /tmp/timeline.html, wait for render, screenshot, and fix-and-reload if needed. wait_for a group label string that appears after vis-timeline renders. See TROUBLESHOOTING.md for timeline-specific fixes.

Self-review checklist

Before delivering, verify ALL:

Installs
1
GitHub Stars
5
First Seen
Oct 3, 2026