Back to skills
SKILL.md
Cm Timeline Creator
ASecurityCreate 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.
- 11 stars
- 0 votes
- 1 copy
- 4 views
- Added September 10, 2026
Security analysis
100/100Pro scans all 5 files and shows the line behind each finding
npx -y skills add luokai0/ai-agent-skills-by-luo-kai --skill cm-timeline-creator --agent claude-codeAre you the author of Cm Timeline Creator?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/luokai0-cm-timeline-creator)---
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.
author: luo-kai
---
# 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.
Files in this skill
- SKILL.md
- assets/templates/base_template.html
- assets/templates/timeline_components.html
- references/design_patterns.md
- references/svg_library.md
Attribution
Comments
Loading comments…
Newsletter
Get the weekly list of safe new skills, and the ones we pulled.