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
- Extract items and groups — identify tasks/phases (items) and workstreams/swimlanes (groups) from context. See TEMPLATE.md for data shapes.
- 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.
- Assign group colors — give each group a className and matching CSS color class. See TEMPLATE.md for the color class system.
- 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.
- Render in browser — follow
_shared/chrome-devtools-render.mdto open/tmp/timeline.html, wait for render, screenshot, and fix-and-reload if needed.wait_fora group label string that appears after vis-timeline renders. See TROUBLESHOOTING.md for timeline-specific fixes.
Self-review checklist
Before delivering, verify ALL: