home / skills / mhattingpete / claude-skills-marketplace / timeline-creator

timeline-creator skill

safe

/visual-documentation-plugin/skills/timeline-creator

This skill helps you generate interactive HTML timelines and roadmaps with Gantt charts, milestones, and phase grouping for project planning.

npx playbooks add skill mhattingpete/claude-skills-marketplace --skill timeline-creator

Review the files below or copy the command above to add this skill to your agents.

Files (5)

SKILL.md

1.9 KB

---
name: timeline-creator
description: Create HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators. Use when users request timelines, roadmaps, Gantt charts, project schedules, or milestone visualizations.
---

# 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

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

## HTML Structure

```html
<!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

```html
<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

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

Use semantic colors for status, keep layout responsive.

Overview

This skill generates interactive HTML timelines and project roadmaps with Gantt-style bars, phase groupings, milestones, and progress indicators. It outputs a responsive, self-contained HTML page that visualizes tasks, dates, status colors, and overall completion. Use it to quickly produce shareable schedule snapshots for planning, reporting, or stakeholder reviews.

How this skill works

The skill extracts tasks, start/end dates, phases, progress values, and milestone dates from your input. It calculates durations and percentage widths relative to the timeline range, groups items by phase (quarters or custom), and assigns semantic status colors. Finally it builds a responsive HTML page containing a header, phase sections, Gantt bars, and a milestone list you can open in any browser.

When to use it

Create a project timeline or roadmap for a stakeholder presentation
Generate a Gantt chart from a list of tasks and dates
Visualize milestones and delivery dates for planning meetings
Produce a phase-by-phase schedule for quarterly roadmaps
Export a shareable HTML timeline for project status reports

Best practices

Provide clear start/end dates and phase names to ensure accurate duration calculations
Include task progress (0-100) to show partial completion visually
Group related tasks under phase headings for readability
Use semantic status colors (done/in-progress/planned) for quick scanning
Keep the overall date range tight to avoid tiny bars for short tasks

Example use cases

Quarterly roadmap with Q1–Q4 phase groups, milestones, and percent complete
Sprint schedule showing tasks, start/end dates, and in-progress indicators
Release plan with key deliverables marked as milestones and status colors
Onboarding timeline for a new hire, grouped by training phases
Client-facing project schedule exported as a single HTML file

FAQ

Can the output be customized with colors and fonts?

Yes. The generated HTML uses CSS variables and inline styles so you can tweak colors, fonts, and layout to match brand guidelines.

How are durations converted to bar widths?

The skill computes each task's duration as a percentage of the overall timeline span and sets the bar width accordingly for proportional visualization.