timeline-builder
Generate beautiful interactive timeline HTML pages from JSON data, with vertical, horizontal, or dual-side layouts, collapsible details, and custom colors. Ideal for project milestones, company histories, or resumes. Triggered when a user mentions 'timeline', 'history of events', 'project milestones', 'release log', or asks to visualize a chronological sequence of data.
pinned to #9d252b3updated last month
Ask your AI client: “install skills/timeline-builder”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install skills/timeline-buildermetahub onboarded this repo on the author's behalf.
If you own github.com/zebbern/claude-code-guide on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
4,573
Last commit
last month
Latest release
published
- #ai
- #ai-agent
- #ai-agent-tools
- #anthropic-claude
- #claude
- #claude-ai
- #claude-api
- #claude-code
- #claude-code-communication
- #claude-code-guide
- #claude-code-skills
- #claude-commands
- #claude-desktop
- #claude-mcp
- #claude-sonnet
- #code
- #mcp
- #mcp-agents
- #mcp-tools
- #vscode-extension
About this skill
Pulled from SKILL.md at publish time.
Generate beautiful interactive timeline HTML pages from JSON configuration data, with three layout modes:
Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.9d252b3· last month
Behavioral checks ran but aren't published for this artifact; the static checks above ran at publish time.
Documentation
8 passed1 warningHomepage or repository declaredwarn
No homepage or repository declared.
Add a "homepage" or "repository" field to SKILL.md.
Description quality
50 words · 372 chars — "Generate beautiful interactive timeline HTML pages from JSON data, with vertical…"
README is present and substantial
168,182 chars · 12 sections · 127 code blocks
Tags / topics declared
20 total — ai, ai-agent, ai-agent-tools, anthropic-claude, claude, claude-ai (+14)
README has usage / example sections
found: Quick Start · Example · Example
Homepage / docs URL declared
no homepage declared (registry will use the repo URL) — info-only, not blocking
Description is substantive
Description is 50 words.
Documentation present and substantive
Documentation present (SKILL.md, 507 words).
Documentation shows usage
Documentation includes 4 code examples.
Release history
1- releasecurrent9d252b3warnlast month
Contents
Generate beautiful interactive timeline HTML pages from JSON configuration data, with three layout modes:
- Vertical layout (
vertical) — A classic top-to-bottom timeline with event cards alternating on either side of the axis - Horizontal layout (
horizontal) — A horizontally scrollable timeline, best for displaying fewer events - Dual-side layout (
dual-side) — Events are placed on the left or right based on thesidefield, great for side-by-side comparisons
All layouts support:
- Click to expand/collapse event details
- Mobile-friendly responsive design
- Custom theme colors, icons, and category labels
- Pure static HTML with zero dependencies — opens directly in any browser
Usage
Basic: Generate from a JSON config file
python3 scripts/generate_timeline.py --config timeline_data.json --output timeline.html
Read JSON from stdin
cat timeline_data.json | python3 scripts/generate_timeline.py --stdin --output timeline.html
Override layout mode (takes precedence over config file)
python3 scripts/generate_timeline.py --config data.json --layout horizontal --output timeline.html
JSON Configuration Format
{
"title": "Project Milestones",
"layout": "vertical",
"theme": {
"primaryColor": "#2563eb",
"secondaryColor": "#7c3aed",
"backgroundColor": "#ffffff",
"textColor": "#1f2937",
"lineColor": "#d1d5db",
"fontFamily": "system-ui, -apple-system, sans-serif"
},
"events": [
{
"date": "2024-01-15",
"title": "Project Kickoff",
"summary": "Approval completed, core team assembled",
"details": "Detailed description text, shown when the card is expanded...",
"icon": "🚀",
"category": "Milestone",
"color": "#10b981",
"side": "left"
}
]
}
CLI Arguments
| Argument | Description |
|---|---|
--config, -c | Path to the JSON config file (mutually exclusive with --stdin) |
--stdin | Read JSON from standard input |
--output, -o | Output HTML file path (defaults to stdout) |
--layout, -l | Override layout mode: vertical, horizontal, dual-side |
--title, -t | Override the timeline title |
Event Fields
| Field | Required | Description |
|---|---|---|
date | Yes | Date label — any format works (e.g. 2024-01, Q1 2024, Phase One) |
title | Yes | Event title |
summary | No | Short description, always visible on the card |
details | No | Detailed content, revealed on click |
icon | No | Emoji or single-character icon (defaults to ●) |
category | No | Category tag displayed on the card |
color | No | Event node color (overrides the theme color) |
side | No | Only for dual-side layout: left or right |
Use Cases
- Project milestone displays
- Product release histories
- Company growth timelines
- Personal resume timelines
- Course syllabus outlines
- Any scenario requiring chronological information display
Dependencies
- Python 3.6+ (standard library only — no extra packages required)
Reviews
No reviews yet. Be the first.
Related
Verification Before Completion
Evidence before assertions, always
Writing Plans
Turn specs into phased implementation plans
Test-Driven Development
Red → green → refactor discipline for any feature or bugfix
mh install skills/timeline-builder