timeline-creator

Solid

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.

AI & Automation 656 stars 91 forks Updated 2 days ago Apache-2.0

Install

View on GitHub

Quality Score: 90/100

Stars 20%
94
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
83
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 ```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> ``` ## Timeline Bar Pattern ```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> ``` ## Workflow 1. Extract tasks, dates, phases from project 2. Calculate duration percentages 3. Group by phases (quarters or custo...

Details

Author
mhattingpete
Repository
mhattingpete/claude-skills-marketplace
Created
9 months ago
Last Updated
2 days ago
Language
HTML
License
Apache-2.0

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

chrono-flow

根据JSON数据生成精美的交互式时间线HTML页面，支持垂直、水平、双侧三种布局，可自定义主题色、展开详情，并适配移动端。适合展示项目里程碑、产品版本记录、公司发展历程或个人简历。当用户提及制作时间线、历程图、历史记录可视化，或需要将一系列事件、日期与描述数据转换为网页时触发。

4 Updated 1 weeks ago
serejaris
AI & Automation Solid

dashboard-creator

Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.

656 Updated 2 days ago
mhattingpete
AI & Automation Solid

flowchart-creator

Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.

656 Updated 2 days ago
mhattingpete