mcpField
T
timeline-creator

timeline-creator

github.com/mhattingpeteProductivity689329 installsUpdated 14w ago
Repository

About timeline-creator

A skill for creating interactive HTML timelines and project roadmaps. It turns tasks, dates, phases, and milestones into a responsive Gantt-style view.

Key features

  1. 01HTML timeline generation
  2. 02Gantt-style task bars
  3. 03Custom phase groups
  4. 04Milestones with dates
  5. 05Progress and status display
  6. 06Responsive layout

Use cases

  1. 01Build a project schedule overview
  2. 02Present quarterly or custom roadmaps
  3. 03Track task progress and milestones

Install

Copy the command and run it in a terminal.

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

After installing, type/timeline-creatorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

assets/templates/
base_template.html
timeline_components.html
references/
design_patterns.md
svg_library.md

Details

From the project README

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

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

  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.

Comments

Markdown supported