timeline-creator

Q: How do I install timeline-creator?

Run npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill timeline-creator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/timeline-creator/ (personal) or .claude/skills/timeline-creator/ (project).

by mhattingpeteFrontend & Design

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.

Installs: 329
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill timeline-creator

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads timeline-creator automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

FAQ

What does the timeline-creator skill do?

How do I install timeline-creator?

Run npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill timeline-creator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/timeline-creator/ (personal) or .claude/skills/timeline-creator/ (project).

Which AI agents can use timeline-creator?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is timeline-creator safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains timeline-creator?

It is published by mhattingpete in mhattingpete/claude-skills-marketplace. It has 329 recorded installs.