timeline-creator

Timeline Creator 是一个用于创建交互式 HTML 时间线和项目路线图的技能，支持甘特图与里程碑展示。

用途 当用户提出以下类型请求时使用：为某项目创建时间线、生成 Q1-Q4 路线图、为日程制作甘特图、展示项目里程碑。

主要能力 该技能可生成包含以下组件的 HTML 时间线：

• 时间线头部：项目名称、日期范围、完成百分比。
• 阶段分组：Q1、Q2、Q3、Q4 或自定义阶段。
• 时间线条目：带开始/结束日期、进度和状态的任务。
• 里程碑：带日期的关键交付物。
• 甘特可视化：展示持续时间的水平条形。

使用方式 工作流程如下：

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

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> <!-- Phase sections with timeline bars --> <!-- Milestones list --> </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>

适用场景 适用于需要将项目任务、日期、阶段和里程碑可视化为 HTML 时间线或路线图的场景，例如项目规划、季度路线图展示、日程甘特图制作等。

限制 使用语义化状态颜色，保持布局响应式。其他限制暂未提供。