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.
Generates interactive HTML timelines with Gantt charts, milestones, and progress tracking. Use when users request project roadmaps, schedules, or milestone visualizations.
/plugin marketplace add mhattingpete/claude-skills-marketplace/plugin install visual-documentation-skills@mhattingpete-claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/templates/base_template.htmlassets/templates/timeline_components.htmlreferences/design_patterns.mdreferences/svg_library.mdCreate interactive HTML timelines and project roadmaps with Gantt charts and milestones.
<!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>
[project]-timeline.htmlUse semantic colors for status, keep layout responsive.