Cm Timeline Creator

Name: Cm Timeline Creator
Author: luokai0

ASecurity

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.

11 stars

0 votes

0 copies

0 views

Added 9/10/2026

design

Security Analysis

A100/100

Scanned 9/10/2026

Install to Claude Code

$npx -y skills add luokai0/ai-agent-skills-by-luo-kai --skill cm-timeline-creator --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Cm Timeline Creator?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Cm Timeline Creator

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/luokai0-cm-timeline-creator/badge)](https://www.skillsdirectory.com/skills/luokai0-cm-timeline-creator)

More formats (shields.io, HTML) on the badges page.

Download Zip

Files

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.
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.

Attribution

luokai0

View source More from luokai0 →

Cm Timeline Creator

Security Analysis

Attribution

Comments (0)