timeline-creator
Timeline Creator builds interactive HTML visualizations for project planning, rendering Gantt charts with task durations, phase groupings, and milestone markers. It extracts project dates and schedules, calculates progress percentages, and applies semantic color coding to show task status at a glance.
Timeline Creator generates interactive HTML Gantt charts and project timelines with phases, milestones, and progress tracking.
AI-generated summary based on this skill's SKILL.md
Install
mhattingpete/claude-skills-marketplace/timeline-creator · repository language: HTML
git clone https://github.com/mhattingpete/claude-skills-marketplace
cp -r claude-skills-marketplace/visual-documentation-plugin/skills/timeline-creator ~/.claude/skills/timeline-creatorFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can timeline-creator generate a gantt chart for my project?
Yes. Timeline Creator builds interactive HTML Gantt charts that visualize your project tasks with duration bars, phase groupings, and milestone markers. It extracts project dates and schedules, then renders them as interactive visualizations you can embed or share.
What does timeline-creator use to show task status?
Timeline Creator applies semantic color coding to display task status at a glance. It calculates progress percentages for each task and uses these colors to indicate completion state, making it easy to spot which tasks are on track, delayed, or complete.
How does timeline-creator organize quarterly phases?
Timeline Creator organizes project tasks into quarterly phases (Q1, Q2, Q3, Q4) with deliverable milestones. It groups related tasks by phase, displays them hierarchically, and marks key milestones so stakeholders can see both the big picture and detailed scheduling.
Can I create a project roadmap with milestones using timeline-creator?
Absolutely. Timeline Creator generates visual project roadmaps with progress indicators and milestone markers. You can define phases, set deliverable dates, and the tool renders an interactive roadmap showing your project's path from start to completion with clear milestone visibility.
Does timeline-creator support responsive timeline layouts?
Yes. Timeline Creator builds responsive timeline layouts that adapt to different screen sizes. Duration bars and date ranges scale properly, and the interactive HTML visualizations work across desktop and mobile devices, making your project schedules accessible anywhere.
What license does timeline-creator use?
Timeline Creator is released under the Apache-2.0 license, allowing you to use, modify, and distribute it freely while maintaining attribution to the original project.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
visual-documentation-plugin/skills/timeline-creator/SKILL.md
visual-documentation-plugin/skills/timeline-creator/assets/templates/base_template.html
visual-documentation-plugin/skills/timeline-creator/assets/templates/timeline_components.html
visual-documentation-plugin/skills/timeline-creator/references/design_patterns.md
visual-documentation-plugin/skills/timeline-creator/references/svg_library.md