How do I customize colors for status?

Use the provided status colors in CSS (e.g., #48bb78 for done, #4299e1 for in-progress, #718096 for planned) and apply them to each timeline-bar accordingly.

Can I group tasks into custom phases?

Yes. Define Phase Groups (quarterly or custom) and assign tasks to these groups to organize the Gantt bars.

How are milestones represented?

Milestones are key deliverables with dates displayed in a dedicated milestones section, styled to stand out from regular timeline items.

timeline-creator

npx machina-cli add skill mhattingpete/claude-skills-marketplace/timeline-creator --openclaw

Files (1)

SKILL.md

1.9 KB

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.

Source

git clone https://github.com/mhattingpete/claude-skills-marketplace/blob/main/visual-documentation-plugin/skills/timeline-creator/SKILL.md

View on GitHub

Overview

Timeline Creator builds interactive HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators. It’s ideal for visualizing timelines, roadmaps, schedules, or milestone visualizations in a clean HTML output.

How This Skill Works

The tool extracts tasks, dates, and phases from the project data, calculates duration percentages, and groups items by phases (quarters or custom). It then generates HTML with Gantt-style bars, a milestones section, and semantic status colors, finally writing to a [project]-timeline.html file for easy viewing.

When to Use It

Create timeline for [project]
Generate roadmap for Q1-Q4
Make Gantt chart for schedule
Show project milestones
Visualize phase groups (quarterly or custom)

Quick Start

Step 1: Collect tasks, start/end dates, phases, and milestone dates from the project
Step 2: Generate HTML using the Timeline Bar Pattern and include a milestones section
Step 3: Export to [Project]-timeline.html and verify responsiveness and visuals

Best Practices

Use semantic colors for status (done, in-progress, planned) to keep visuals intuitive
Group tasks by well-defined phases (quarters or custom) for clarity
Include milestones with clear dates to anchor the timeline
Ensure duration bars reflect actual start/end dates and progress
Keep HTML responsive with a consistent header, bars, and milestone layout

Example Use Cases

Product launch roadmap spanning multiple quarters with phased tasks
Software development timeline showing sprints, features, and milestones
Marketing campaign schedule with timelines for prep, launch, and follow-up
Construction project phase timeline with critical milestones
Event planning schedule highlighting key deliverables and dates

Frequently Asked Questions

Add this skill to your agents