skills.rest
zebbern
zebbernCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

timeline-builder

Generate interactive timeline HTML pages from JSON event data.

4.6k|462|Updated Jun 21, 2025
Search Tags:#HTML#generator#Visualization#Json#chronological#Interactive#Timeline
One-click install
npx skills add https://github.com/zebbern/claude-code-guide --skill timeline-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: timeline-builder
Source: https://github.com/zebbern/claude-code-guide/tree/main/skills/timeline-builder
Command: npx skills add https://github.com/zebbern/claude-code-guide --skill timeline-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Turning chronological data like project milestones, release logs, or company histories into a presentable visual timeline normally requires manual HTML/CSS work or a dedicated charting library. This Skill converts a simple JSON file into a self-contained, interactive timeline page with zero dependencies.

Core Features & Use Cases

  • Three Layout Modes: Choose vertical (alternating cards), horizontal (scrollable), or dual-side (left/right comparison) layouts via config or CLI flag.
  • Interactive Event Cards: Click to expand and collapse event details, with custom icons, category tags, per-event colors, and a full theme system for colors and fonts.
  • Zero-Dependency Output: Produces a single static HTML file with inline CSS and JavaScript that opens directly in any browser, responsive on mobile and print-friendly.
  • Use Case: A product manager wants to present a release history to stakeholders. They write a JSON file listing each release date, title, and notes, then run the script to get a polished timeline page to share.

Quick Start

Ask the AI to generate a timeline HTML page from your JSON event data using the timeline-builder skill, for example: "Create a vertical timeline from my project milestones JSON and save it as timeline.html."

Frequently Asked Questions about timeline-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an interactive timeline HTML page from JSON data?▼

Run the generate_timeline.py script with a JSON config file containing a title, layout, theme, and events array. Use --config to pass the file and --output to write the HTML, or pipe JSON via stdin with the --stdin flag.

What timeline layouts are available for visualizing chronological events?▼

Three layouts are supported: vertical with alternating event cards, horizontal with a scrollable row of events, and dual-side where events are placed left or right based on a side field. Override the config layout with the --layout CLI flag.

Does the timeline generator require external Python packages or JavaScript libraries?▼

No. The script uses only the Python 3.6+ standard library, and the output is a single static HTML file with inline CSS and JavaScript. No npm packages, CDNs, or frameworks are needed to view the result.

Can I customize colors, icons, and categories on timeline events?▼

Yes. The theme object sets global colors and fonts, while each event supports an icon emoji, category tag, and per-event color that overrides the theme. Dates accept any text format such as 2024-01 or Q1 2024.

Why does the timeline script fail with a JSON error?▼

The script exits with an error if the config file is missing, contains invalid JSON, or has an empty events array. Validate your JSON syntax and ensure at least one event with date and title fields is present.

Related Skills

Explore More Design & Creative Skills→
coco-decoco-de

coui-timeline

Generate chronological event displays with CoUI's Timeline component in Flutter and Web applications.

Official
Basic
ZJU-REALZJU-REAL
195

site-builder

Build and publish accessible websites from user ideas to hosted URLs.

Official
Advanced
marcelocantosmarcelocantos

progress-report

Automate weekly progress reports across Git repositories with charts.

Community
Advanced
mafvietnammafvietnam

ck:mermaidjs-v11

Generate diagrams from Mermaid.js v11 syntax across multiple diagram types.

Community
Advanced