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.

Quality

100%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Timeline Builder

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 the side field, 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)

Repository: zebbern/claude-code-guide
Path: skills/timeline-builder/SKILL.md
Commit: af7d491

Last updated: about 7 hours ago
First committed: about 2 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.