productivityby mhattingpete
Timeline Creator
mhattingpete/timeline-creator
Create HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators.
What it changes
Passed 17 of 25 test cases with the skill, and 9 of 25 without it.
Without skill36%
With skill68%
Checks it passed that the model alone missed
- Planned tasks use hex color #718096
- Completed tasks use hex color #48bb78
- In-progress tasks use hex color #4299e1
and 7 more in the full report
10 fixed7 passed either way6 still failing2 broke
- Pass-rate lift
- +32 pp
- Tokens
- +32%
- Agent turns
- 0%
- Response time
- +11%
Model gemini-3.6-flashMeasured 8/18/2026v117 of 25 cases passed with skill
See it in action
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
PromptWhat padding value is applied to milestone elements in the custom timeline web stylesheet?
What was checked, without and with the skill| Checked | Without skill | With skill |
|---|
| Milestones specify padding-left of 10px | Missed | Passed |
|---|
What's inside
The instructions your model reads when the skill loads.
SKILL.md61 lines3 files
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>
Track record
Benchmark
17 / 25
test cases passed, vs 9 / 25 without
Adoption
- Users
- 0
- Times used
- 0
Safety and source details
SkillSafety
✓ 3 of 3 passed✓Code scan15 of 15 checks clean
0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026
View 15 scanner checks
live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing
✓IntentSafe
LLM judge · does the skill do what it claims
✓ContentClean
LLM judge · policy & harmful-content review
Source
Importedmhattingpete / claude-skills-marketplace
visual-documentation-plugin/skills/timeline-creator/SKILL.md
License Apache-2.0Imported 8/3/2026Version v1Bundled 2 files