Agent Skills › mhattingpete/claude-skills-marketplace › timeline-creator

timeline-creator

GitHub

生成包含甘特图、里程碑和进度指示器的交互式HTML项目时间线与路线图。适用于创建项目计划、季度路线图及关键节点可视化，支持自定义阶段分组与状态颜色标识。

visual-documentation-plugin/skills/timeline-creator/SKILL.md mhattingpete/claude-skills-marketplace

Trigger Scenarios

创建项目时间线生成季度路线图制作甘特图展示项目里程碑

Install

npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -g -y

More Options

Non-standard path

npx skills add https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/timeline-creator -g -y

Use without installing

npx skills use mhattingpete/claude-skills-marketplace@timeline-creator

指定 Agent (Claude Code)

npx skills add mhattingpete/claude-skills-marketplace --skill timeline-creator -a claude-code -g -y

安装 repo 全部 skill

npx skills add mhattingpete/claude-skills-marketplace --all -g -y

预览 repo 内 skill

npx skills add mhattingpete/claude-skills-marketplace --list

SKILL.md

Frontmatter

{
    "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

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>