timeline-creator

Create stunning, interactive HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators. Use when users request timelines, roadmaps, Gantt charts, project schedules, milestone visualizations, or project plans - regardless of whether they specify HTML format.

About timeline-creator

timeline-creator is a Claude AI skill developed by mhattingpete. Create stunning, interactive HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators. Use when users request timelines, roadmaps, Gantt charts, project schedules, milestone visualizations, or project plans - regardless of whether they specify HTML format. This powerful Claude Code plugin helps developers automate workflows and enhance productivity with intelligent AI assistance.

0Stars

0Forks

2025-11-09

Why use timeline-creator? With 0 stars on GitHub, this skill has been trusted by developers worldwide. Install this Claude skill instantly to enhance your development workflow with AI-powered automation.

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>

Timeline Bar Pattern

<div class="timeline-item">
  <span>Task Name</span>
  <div class="timeline-bar" style="width: [percentage]%; background: [status-color];"></div>
  <span>[start] - [end]</span>
</div>

Workflow

Extract tasks, dates, phases from project
Calculate duration percentages
Group by phases (quarters or custom)
Create HTML with Gantt-style bars
Add milestones section
Write to [project]-timeline.html

Use semantic colors for status, keep layout responsive.

Skills Marketplace