zebbern/claude-code-guide

timeline-builder

Generate beautiful interactive timeline HTML pages from JSON data, with vertical, horizontal, or dual-side layouts, collapsible details, and custom colors.

First seen May 31, 2026

Installation

$ npx skills add zebbern/claude-code-guide --skill timeline-builder

View on skills.sh ↗ GitHub repository ↗

Summary

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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs

agent-browser Same topic

vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs

vercel-react-best-practices Same topic

vercel-labs/agent-skills 697.8K installs

web-design-guidelines Same topic

vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs

microsoft-foundry Same topic

microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs

azure-diagnostics Same topic

microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from zebbern/claude-code-guide · top by installs.

npx skills add zebbern/claude-code-guide

pentest-checklist 131 wordpress-penetration-testing 126 ethical-hacking-methodology 125 sql-injection-testing 120 metasploit-framework 111 pentest-commands 111 active-directory-attacks 105 ssh-penetration-testing 104 cloud-penetration-testing 103 smtp-penetration-testing 100

Browse all from zebbern/claude-code-guide

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Repository health

Stars 4.6K

License LICENSE

Default branch main

Open issues 1

Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

LicenseMIT

Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 3,673 B
docs SUMMARY.md 396 B

History

May 31, 2026 First seen on skills.sh
Sep 9, 2026 First recorded snapshot · 22 installs

SKILL.md

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)

npx skills add zebbern/claude-code-guide --skill timeline-builder