Skill
code-execution
Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests…
@mhattingpeteInstall SkillDevelopment
Skill
/timeline-creator
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.
Install
$ npx -y skills add mhattingpete/claude-skills-marketplace --skill timeline-creator --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/timeline-creator
Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
SKILL.md
timeline-creator.SKILL.mdname: timeline-creator
description: 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.
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
<!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
1. Extract tasks, dates, phases from project 2. Calculate duration percentages 3. Group by phases (quarters or custom) 4. Create HTML with Gantt-style bars 5. Add milestones section 6. Write to `[project]-timeline.html`
Use semantic colors for status, keep layout responsive.
Read more
name: timeline-creator description: 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.
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
<!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
1. Extract tasks, dates, phases from project 2. Calculate duration percentages 3. Group by phases (quarters or custom) 4. Create HTML with Gantt-style bars 5. Add milestones section 6. Write to `[project]-timeline.html`
Use semantic colors for status, keep layout responsive.
Ships withclaude-skills-marketplace
A curated marketplace of Claude Code plugins for software engineering workflows.
Get the whole plugin
Other skills on claude-skills-marketplace.
@mhattingpeteInstall SkillSkill
code-refactor
Perform bulk code refactoring operations like renaming variables/functions across files, replacing patterns, and updating API…
@mhattingpeteInstall SkillSkill
code-transfer
Transfer code between files with line-based precision. Use when users request copying code from one location to another, moving…
@mhattingpeteInstall SkillSkill
file-operations
Analyze files and get detailed metadata including size, line counts, modification times, and content statistics. Use when users…
@mhattingpeteInstall SkillSkill
ensemble-solving
Generate multiple diverse solutions in parallel and select the best. Use for architecture decisions, code generation with…
@mhattingpeteInstall SkillSkill
feature-planning
Break down feature requests into detailed, implementable plans with clear tasks. Use when user requests a new feature,…
@mhattingpeteInstall Skill