html-timeline-roadmap

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: html-timeline-roadmap
description: Create HTML timelines and roadmaps with status pills, dependency arrows, and milestone markers — for quarterly planning, project retrospectives, release histories, incident timelines, sprint visualizations. Use whenever the user wants to visualize a sequence of events over time, a plan, a roadmap, a release schedule, or look back at how a project unfolded. Reach for this whenever the explanation has a clear time axis, even if the user doesn't say "timeline".
metadata:
  version: "1.2.1"
---

# HTML Timeline & Roadmap Views

Timelines are how humans think about anything with a time axis. Roadmaps, retrospectives, release histories, incident timelines, sprint plans — they all benefit from seeing time horizontally.

## When to use this skill

- "Make me a roadmap / timeline / Gantt for X"
- "Plan the next [quarter, 6 months, year]"
- "Visualize the release history / sprint plan / project schedule"
- "Build a retrospective timeline showing how X unfolded"
- "Map the incident timeline"
- Any explanation where time order matters and the time spans are visible

## Output requirements

Time runs horizontally (left=past, right=future). On a phone, time runs vertically with bars rendered as stacked cards — that's the responsive collapse for this skill.

Include:
- A clear time axis with appropriate granularity (days for incidents, weeks for sprints, months for roadmaps, quarters for annual plans)
- "Today" marker if the timeline straddles now

## HTML output foundation

These defaults apply to **every** artifact this skill produces, on top of the requirements above. If a rule above conflicts with this list, the rule above wins; otherwise these are non-negotiable.

- **Output a real `.html` file the user opens in a browser — never inline-render in chat.** Every artifact this skill produces is a file on disk (`<topic>-<kind>.html`), not an HTML block embedded in the agent's chat surface (claude.ai artifact/canvas widgets, fenced ```html``` blocks, custom rendered iframes, etc.). Inline rendering strips features, themes unpredictably against the surrounding chat (often unreadable in dark mode), and lacks the stable origin and clipboard/network access the submit handler needs. Always write the file. The file itself must be self-contained: no build step, no external runtime, inline CSS and JS. Google Fonts via `<link>` is fine; otherwise nothing loaded from npm or a CDN unless this skill explicitly calls for it.
- **Mobile-responsive.** Collapse cleanly to a single column under ~700px so the artifact opens on a phone — including during incidents, commutes, and link-shares to non-laptop reviewers.
- **No `localStorage` / `sessionStorage` / `IndexedDB`.** Claude.ai artifacts can't use browser storage. State lives in JS memory; the export / copy button is the persistence layer.
- **Real semantic HTML, not screenshots.** Code goes in `<pre><code>` (selectable, copyable). Tabular data goes in `<table>`. Diagrams are inline `<svg>` with real `<g>` and `<path>` elements, not embedded PNGs. The reader should be able to copy any value, line, or label out of the artifact.
- **Build DOM safely; don't sling strings.** Use `textContent` for text and `document.createElement` + `appendChild` for structure. **Never** set `innerHTML` from a string that includes a variable, user input, computed value, or imported data — it's an XSS vector and many agent harnesses (including Claude Code) block it via security hooks. Static literal markup inline in your script is fine.
- **SVG text doesn't wrap — size the shape to the label, or use `<foreignObject>`.** Plain SVG `<text>` overflows silently when the label is longer than the box was sized for, crashing into adjacent shapes. For variable-length or potentially-long labels, wrap with `<foreignObject width="W" height="H">` plus an HTML `<div>` inside — real wrapping, real padding, real `text-overflow:ellipsis`. Plain `<text>` is fine only for short, fixed-length labels — a