---
id: mhattingpete/claude-skills-marketplace/timeline-creator
version: "b6c93154"
license: Apache-2.0
install: manual
updated: 2026-07-25
---
# timeline-creator — Timeline Creator builds interactive HTML visualizations for project planning, rendering Gantt charts with task durations, phase groupings, and milestone markers. It extracts project dates and schedules, calculates progress percentages, and applies semantic color coding to show task status at a glance.
Publisher: mhattingpete · Stars: 657 · Updated: 2026-07-25
Install (manual): `git clone https://github.com/mhattingpete/claude-skills-marketplace`
## SKILL.md
# 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
[Project] Timeline
[Project] Timeline
```
## Timeline Bar Pattern
```html
Task Name
[start] - [end]
```
## 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.
[View on SkillFed](https://skillfed.io/mhattingpete/claude-skills-marketplace/timeline-creator) · [View on GitHub](https://github.com/mhattingpete/claude-skills-marketplace)