Timeline Creator

This generates standalone HTML files with Gantt-style timeline visualizations for project roadmaps and schedules. You get horizontal bars showing task durations, milestone markers, phase groupings (quarterly or custom), and progress indicators with color-coded status states. It calculates duration percentages automatically and uses a clean, responsive layout with semantic colors for done, in-progress, and planned items. Good for when you need to visualize a project schedule quickly without pulling in a heavy charting library. The HTML is self-contained and uses basic CSS, so you can open it in a browser immediately or tweak the styling without much ceremony.

skills.sh installs: 335
GitHub stars: 693
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mhattingpete/claude-skills-marketplace --skill timeline-creator --agent claude-code

Installs into .claude/skills of the current project.

Files

Timeline Creator

Create interactive HTML timelines and project roadmaps with Gantt charts and milestones.

When to Use

"Create timeline for [project]"
"Generate roadmap for Q1-Q4"
"Make Gantt chart for schedule"
"Show project milestones"

Components

Timeline Header: project name, date range, completion %
Phase Groups: Q1, Q2, Q3, Q4 or custom phases
Timeline Items: tasks with start/end dates, progress, status
Milestones: key deliverables with dates
Gantt Visualization: horizontal bars showing duration

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>[Project] Timeline</title>
  <style>
    body { font-family: system-ui; max-width: 1400px; margin: 0 auto; }
    .timeline-bar { background: linear-gradient(90deg, #4299e1, #48bb78); height: 20px; border-radius: 4px; }
    .milestone { border-left: 3px solid #e53e3e; padding-left: 10px; }
    /* Status colors: #48bb78 (done), #4299e1 (in-progress), #718096 (planned) */
  </style>
</head>
<body>
  <h1>[Project] Timeline</h1>
  <!-- Phase sections with timeline bars -->
  <!-- Milestones list -->
</body>
</html>