skills.rest
npow
npowCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

timeline

Render project schedules as interactive Gantt-style timelines in the browser.

4|Updated Feb 23, 2026
Search Tags:#timeline#project planning#roadmap#milestones#scheduling#vis-timeline#gantt chart
One-click install
npx skills add https://github.com/npow/claude-skills --skill timeline-npow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: timeline
Source: https://github.com/npow/claude-skills/tree/main/timeline
Command: npx skills add https://github.com/npow/claude-skills --skill timeline-npow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns vague project schedules, phases, milestones, and roadmap details into clear interactive Gantt-style timelines that are easier to understand and review.

Core Features & Use Cases

  • Interactive Timeline Rendering: Creates browser-based timelines with draggable navigation, zooming, selectable items, and swimlane grouping.
  • Schedule Normalization: Converts quarters, months, sprints, and relative date phrases into explicit ISO date ranges for reliable visualization.
  • Use Case: Give the Skill a product roadmap with workstreams, delivery phases, and milestones to generate a color-coded timeline that shows when each initiative happens and how schedules overlap.

Quick Start

Use the timeline skill to render the project's phases, milestones, and workstreams as an interactive Gantt chart in the browser.

Frequently Asked Questions about timeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize project phases and milestones as an interactive Gantt chart?▼

You can render project phases and milestones as an interactive Gantt chart by providing schedule details, which this Skill normalizes into explicit ISO date ranges and visualizes using vis-timeline with swimlane grouping.

What is the best way to turn a product roadmap with relative dates into a visual timeline?▼

Turning a product roadmap into a visual timeline involves schedule normalization, converting relative phrases like quarters and sprints into explicit ISO date ranges to ensure accurate and reliable timeline rendering.

Can I use vis-timeline to generate color-coded workstream schedules in the browser?▼

Yes, this Skill uses vis-timeline to generate color-coded workstream schedules directly in the browser, allowing you to visually compare when initiatives happen and how overlapping schedules align.

Does this timeline rendering approach require explicit ISO dates for project plans?▼

Yes, explicit ISO dates are required for reliable timeline rendering, but the Skill handles schedule normalization by converting quarters, months, sprints, and relative date phrases into explicit ISO date ranges automatically.

How does Chrome DevTools verify the rendering of project schedules as interactive timelines?▼

Chrome DevTools verifies the rendering of project schedules as interactive timelines by capturing a screenshot of the browser output, ensuring the Gantt-style chart displays grouped items and normalized dates correctly.

Related Skills

Explore More Software Engineering Skills→
orbtyapporbtyapp
1

roadmap-planning

Generate a project roadmap with milestones and a Mermaid-based timeline.

Official
Basic
haomingzhaomingz
12

gantt-chart-builder

Convert structured task lists into interactive CPM-based Gantt charts.

Community
Advanced
HuuBarHuuBar

timeline-generator

Generate interactive timelines from structured event data using vis-timeline.js.

Community
Advanced
Aken-TeamsAken-Teams

Interactive Web Page Generator

Generate a self-contained HTML dashboard with inline charts and CDN libraries.

Official
Advanced