mhattingpete

timeline-creator

@mhattingpete/timeline-creator
mhattingpete
225
33 forks
Updated 1/18/2026
View on GitHub

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.

Installation

$skills install @mhattingpete/timeline-creator
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Repositorymhattingpete/claude-skills-marketplace
Pathvisual-documentation-plugin/skills/timeline-creator/SKILL.md
Branchmain
Scoped Name@mhattingpete/timeline-creator

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

skills list

Skill Instructions

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

  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.

More by mhattingpete

View all
file-operations
225

Analyze files and get detailed metadata including size, line counts, modification times, and content statistics. Use when users request file information, statistics, or analysis without modifying files.

conversation-analyzer
225

Analyzes your Claude Code conversation history to identify patterns, common mistakes, and opportunities for workflow improvement. Use when user wants to understand usage patterns, optimize workflow, identify automation opportunities, or check if they're following best practices.

code-execution
225

Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests bulk operations (10+ files), complex multi-step workflows, iterative processing, or mentions efficiency/performance.

feature-planning
225

Break down feature requests into detailed, implementable plans with clear tasks. Use when user requests a new feature, enhancement, or complex change.