mcpField
T
timeline-creator

timeline-creator

github.com/mhattingpete生产力689329 次安装14 周前更新
代码仓库

关于 timeline-creator

用于创建交互式 HTML 时间线和项目路线图的技能，可将任务、日期、阶段和里程碑整理为响应式甘特图视图。

主要功能

  1. 01生成 HTML 时间线
  2. 02甘特图式任务条
  3. 03自定义阶段分组
  4. 04显示里程碑日期
  5. 05展示进度和状态
  6. 06响应式布局

适用场景

  1. 01制作项目进度概览
  2. 02展示季度或自定义路线图
  3. 03跟踪任务进度与里程碑

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/timeline-creator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

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

详细介绍

时间线创建器

创建交互式 HTML 时间线和项目路线图，包含甘特图和里程碑。

使用场景

-“为 [project] 创建时间线” -“生成 Q1-Q4 的路线图” -“为日程安排制作甘特图” -“展示项目里程碑”

组件

  1. 时间线标题：项目名称、日期范围、完成百分比
  2. 阶段分组：Q1、Q2、Q3、Q4 或自定义阶段
  3. 时间线项目：包含开始/结束日期、进度和状态的任务
  4. 里程碑：包含日期的关键交付物
  5. 甘特图可视化：显示持续时间的水平条形

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>
  
  
</body>
</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>

工作流

  1. 从项目中提取任务、日期和阶段
  2. 计算持续时间百分比
  3. 按阶段分组（季度或自定义阶段）
  4. 创建包含甘特图样式条形的 HTML
  5. 添加里程碑部分
  6. 写入 [project]-timeline.html

使用语义化颜色表示状态，并保持布局响应式。

评论

支持 Markdown