mhattingpete
Install Timeline Creator
Pick your agent. Every command is ready to paste.
npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creatorThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads timeline-creator when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the timeline-creator skill”. In Codex, type $timeline-creator.
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.
Tips for Timeline Creator
- • Start a fresh session after installing so your agent picks up the new skill.
- • It bundles reference files. The agent reads them only when needed, so they cost no context until then.
- • It is part of a pack with 18 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Timeline Creator
What does the Timeline Creator skill do?
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.
How do I install Timeline Creator?
Run "npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Timeline Creator work in Cursor and Codex?
Yes. Timeline Creator uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Timeline Creator free?
Timeline Creator is open source on GitHub under the Apache-2.0 license. It is free to install; check the license before commercial use.
Who made Timeline Creator?
Timeline Creator is published by mhattingpete in the mhattingpete/claude-skills-marketplace repository, together with 17 other skills.
