@mhattingpete/timeline-creator
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.
No skills found in this collection.
SKILL.md
| 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
- 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.
Loading...
Select a file to preview
Analyzing security...
Checking scan reports and verification data.
Bill of Materials
Everything this skill can do — files, network, commands, and more.
No demos yet. To add one, ask your AI agent: "Submit a demo for @mhattingpete/timeline-creator" — or upload via the API.
To add a demo, ask your AI agent: "Submit a demo for @mhattingpete/timeline-creator"
No eval data yet. Eval results are published via the SkillSafe API.