Generate Timeline MicroSim Skill
Claude Code v2.0.36 Sonnet 4.5 · Claude Pro
Prompt
Use the skill-generator skill to create a new skill. The skill name is 'timeline-generator'. Place this new skill in skills/timeline-generator. Use the timeline demo at docs/sims/timeline as your example. Prompt the user for the event list if it was not provided. Ask the user if they want category buttons in the viewer like the example. Make sure the sample code you put in skills/timeline-generator/resources is generic.
⏺ I'll help you create a new timeline-generator skill. Let me start by exploring the existing timeline demo and skill structure, then create the new skill.
⏺ Read(docs/sims/timeline) ⎿ Error: EISDIR: illegal operation on a directory, read
⏺ Search(pattern: "docs/sims/timeline/*/") ⎿ Found 3 files (ctrl+o to expand)
⏺ Read(docs/sims/timeline/main.html) ⎿ Read 417 lines
⏺ Read(docs/sims/timeline/timeline.json) ⎿ Read 623 lines
⏺ Read(docs/sims/timeline/index.md) ⎿ Read 9 lines
⏺ Read(skills/skill-creator/SKILL.md) ⎿ Error reading file
⏺ Search(pattern: "skills/*/SKILL.md") ⎿ Found 17 files (ctrl+o to expand)
⏺ Read(skills/bubble-chart-generator/SKILL.md) ⎿ Read 362 lines
⏺ Bash(ls -la $HOME/Documents/ws/claude-skills/skills/bubble-chart-generator/)
⎿ total 24
drwxr-xr-x 4 dan staff 128 Nov 6 06:10 .
drwxr-xr-x 20 dan staff 640 Nov 9 07:42 ..
… +2 lines (ctrl+o to expand)
⏺ Bash(ls -la $HOME/Documents/ws/claude-skills/skills/bubble-chart-generator/assets/)
⎿ total 48
drwxr-xr-x 6 dan staff 192 Nov 6 07:32 .
drwxr-xr-x 4 dan staff 128 Nov 6 06:10 ..
… +4 lines (ctrl+o to expand)
⏺ Bash(mkdir -p $HOME/Documents/ws/claude-skills/skills/timeline-generator/resources) ⎿ (No content)
⏺ Write(skills/timeline-generator/SKILL.md)
⎿ Wrote 475 lines to skills/timeline-generator/SKILL.md
---
name: timeline-generator
description: This skill generates interactive timeline visualizations using the
vis-timeline JavaScript library. Use this skill when users need to create historical
timelines, project timelines, event sequences, or any chronological data
visualization with optional category filtering. The skill creates a complete
MicroSim package with HTML, CSS, JSON data, and documentation.
---
# Timeline Generator
## Overview
This skill generates professional, interactive timeline visualizations using
vis-timeline.js. Timelines are ideal for displaying chronological events with rich
context including descriptions, notes, and category groupings. The skill creates a
complete MicroSim package suitable for embedding in educational content or
documentation sites built with MkDocs.
… +465 lines (ctrl+o to expand)
⏺ Write(skills/timeline-generator/resources/template-timeline.json) ⎿ Wrote 84 lines to skills/timeline-generator/resources/template-timeline.json { "title": "Sample Timeline", "events": `[ { "start_date": { "year": "2020", "month": "1", "day": "15" }, "text": { … +74 lines (ctrl+o to expand)
⏺ Write(skills/timeline-generator/resources/template-main.html)
⎿ Wrote 387 lines to skills/timeline-generator/resources/template-main.html
<!DOCTYPE html>