Timeline Creator
SkillProductivityCreate 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.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Timeline Creator skill
What this skill tells your AI
The instructions your AI receives, as published by mhattingpete/claude-skills-marketplace in visual-documentation-plugin/skills/timeline-creator/SKILL.md and read by ahel’s review.
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.
Signals
- GitHub stars
- 671
- Forks
- 96
- Last commit
- Jul 2026
Advanced
- Catalog kind
- skill
- Gateway key
timeline-creator- Source
- github.com/mhattingpete/claude-skills-marketplace