timeline-creator — Claude Code skill: HTML timelines and roadmaps
Turns a project's tasks and dates into an interactive HTML timeline with Gantt bars, phases and milestones. Handy when a plan has to live in one file.
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a claude-codeWhat timeline-creator does
The skill builds an HTML page out of your task list: a header with the project name, date range and completion percentage, phase groups such as quarters or your own, tasks with start and end dates plus progress and status, a separate milestones block, and Gantt bars whose width is a percentage of the schedule.
Inside are the structure description and ready markup patterns. There is a timeline bar pattern with a percentage width and a status colour, and a palette for three states: done, in progress, planned. The skill advises keeping the layout responsive and writing the result to a file named like [project]-timeline.html.
The workflow runs in order: pull tasks, dates and phases out of the project, work out duration percentages, group by phase, build the HTML with bars, then add the milestones section. Everything comes from what you hand over, so a vague request for a roadmap with no dates produces an equally vague picture.
What it helps with
- build a four-quarter project roadmap as a single HTML file
- show task durations as Gantt bars with completion percentages
- pull key deliverables into their own milestones block
- group tasks by phase and colour them by status
- send a client a visual plan instead of a table in chat
Example prompts for the agent
- Create a timeline for the API migration project, phases by quarter
- Make a Gantt chart from these tasks and dates, colour the statuses
- Show the project milestones and completion percentage in an HTML file
How to install timeline-creator
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a claude-code2Manually: put the files in place
~/.claude/skills/timeline-creator/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/timeline-creator/
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a codex2Manually: put the files in place
.agents/skills/timeline-creator/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a cursor2Manually: put the files in place
.cursor/skills/timeline-creator/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install mhattingpete/claude-skills-marketplace timeline-creator2Manually: put the files in place
.github/skills/timeline-creator/SKILL.md1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a gemini-cli2Platform CLI
gemini skills install https://github.com/mhattingpete/claude-skills-marketplace --path visual-documentation-plugin/skills/timeline-creatorManually: put the files in place
.devin/skills/timeline-creator/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about timeline-creator
How do I install timeline-creator in Claude?
Run npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a claude-code. The skill file then sits at ~/.claude/skills/timeline-creator/SKILL.md.
What does timeline-creator do?
It creates HTML timelines and project roadmaps with Gantt charts, phase groupings, milestones and progress indicators.
Which platforms does this skill support?
Beyond Claude there are install paths for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Source text
SKILL.md · Apache-2.0
---
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.
© mhattingpete · Apache-2.0 · mhattingpete/claude-skills-marketplace
