timeline-creator
Generates interactive HTML-based project timelines and Gantt charts with milestones and phase tracking.
Install
mkdir -p .claude/skills/timeline-creator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3235" && unzip -o skill.zip -d .claude/skills/timeline-creator && rm skill.zipInstalls to .claude/skills/timeline-creator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Map tasks and milestones to HTML bar visualizations
- →Calculate visual duration percentages for Gantt bars
- →Organize project items into time-based phase groups
- →Render project headers with completion tracking
- →Generate responsive milestone markers
How it works
Transforms structured date and task input into a styled HTML document utilizing CSS Grid and Flexbox for the timeline representation.
Inputs & outputs
When to use timeline-creator
- →Creating a project roadmap for the quarter
- →Visualizing milestone delivery dates
- →Generating a Gantt chart from task lists
- →Tracking phase progress percentages
About this skill
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
<!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
<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
- Extract tasks, dates, phases from project
- Calculate duration percentages
- Group by phases (quarters or custom)
- Create HTML with Gantt-style bars
- Add milestones section
- Write to
[project]-timeline.html
Use semantic colors for status, keep layout responsive.
When not to use it
- →When managing real-time task databases
- →For creating complex dynamic web dashboards
Limitations
- →Static visualization only
- →Requires manual task date updates
How it compares
It produces a shareable static artifact, avoiding the need for dedicated project management software.
Compared to similar skills
timeline-creator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| timeline-creator (this skill) | 1 | 9mo | No flags | Beginner |
| mckinsey-consultant | 9 | 4mo | No flags | Advanced |
| board-deck-builder | 1 | 2mo | No flags | Intermediate |
| investor-materials | 0 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by mhattingpete
View all by mhattingpete →You might also like
mckinsey-consultant
fleurytian
McKinsey顾问式问题解决系统。从商业问题出发,通过假设驱动的结构化分析方法,生成McKinsey风格研究报告和PPT。融合Problem Solving方法论、MECE原则、Issue Tree拆解、Hypotheses形成、Dummy Page设计、智能数据收集和专业PPT生成能力。
board-deck-builder
alirezarezvani
Assembles comprehensive board and investor update decks by pulling perspectives from all C-suite roles. Use when preparing board meetings, investor updates, quarterly business reviews, or fundraising narratives. Covers structure, narrative framework, bad news delivery, and common mistakes.
investor-materials
tan-yong-sheng
Create and update pitch decks, one-pagers, investor memos, accelerator applications, financial models, and fundraising materials. Use when the user needs investor-facing documents, projections, use-of-funds tables, milestone plans, or materials that must stay internally consistent across multiple fu
planning-with-files
davila7
Implements Manus-style file-based planning for complex tasks. Creates task_plan.md, findings.md, and progress.md. Use when starting complex multi-step tasks, research projects, or any task requiring >5 tool calls.
trello
openclaw
Manage Trello boards, lists, and cards via the Trello REST API.
pmbok-project-management
jgtolentino
Comprehensive PMP/PMBOK project management methodologies and best practices. Use this skill when users need guidance on project management processes, templates, knowledge areas, process groups, tools, techniques, or certification preparation. Covers all 10 PMBOK Knowledge Areas and 5 Process Groups with practical templates, frameworks, and industry-standard approaches. Includes risk management, stakeholder engagement, schedule management, cost control, quality assurance, and resource planning.