From html-skills
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".
How this skill is triggered — by the user, by Claude, or both
Slash command
/html-skills:html-timeline-roadmapThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
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:
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.
.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.localStorage / sessionStorage / IndexedDB. Claude.ai artifacts can't use browser storage. State lives in JS memory; the export / copy button is the persistence layer.<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.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.:root so the whole artifact can be re-skinned in one place — and so design decisions are visible, not buried in 40 inline declarations.Cmd/Ctrl+P should produce something usable: backgrounds that carry meaning print, content doesn't get clipped, dark themes have a sane print fallback.<topic>-<kind>.html) so multiple artifacts on one project compose into a readable folder, not a pile of output.html collisions.Lanes per team/area. Bars per initiative, sized by estimated duration. Status pills (Planned / In Progress / At Risk / Shipped). Dependency arrows between bars where ordering matters. "Today" line.
Granularity: months or quarters. Don't pretend more precision than you have.
Smaller granularity (days/weeks). Lanes per IC or per workstream. More detail per item. Status updated daily. Often shows velocity metrics in a summary panel.
Past releases on the timeline. Each release is a milestone with its version label. Annotations for major events (incidents, hires, decisions). Useful for retrospectives and onboarding new hires to project context.
A specific project's journey. Decision points marked. Things that went well in green, things that went poorly in red. Free-text annotations. Optional "alternate path" branch showing what could have happened.
Minute-level granularity. Stack of events with annotations: detection, escalation, mitigation, resolution. Color-coded by severity/owner. Often has a synthetic "user-impact" lane showing customer-facing effect over time.
For project planning with hard dependencies. Critical path highlighted. Slack visible (light bars showing buffer). Dependency arrows everywhere.
Use a small fixed vocabulary:
Show the legend, even if you think it's obvious.
Use arrows sparingly. Every arrow draws attention; an arrow on every transition makes the diagram unreadable. Show arrows for:
Don't show arrows for things that just happen to be near each other.
For long roadmaps or many lanes, density matters:
Match density to the audience. Leadership briefings should be lower density than internal sprint plans.
Free-text annotations attached to specific dates ("$X funded — Mar 14", "Incident A — Jun 2") are what make timelines tell stories rather than just show schedules. Use them generously but anchor each to a specific date.
Build me an HTML roadmap for the next two quarters. Three lanes (Platform, AI, Infra), eight initiatives total, status pills, dependency arrows where Platform work blocks AI work. Mark today.
Output: HTML file with a time axis showing 6 months in monthly columns, three lanes, eight bars positioned and sized accordingly, status pills, two dependency arrows from Platform items to AI items, a "today" vertical line, click-to-expand details.
npx claudepluginhub f-labs-io/agent-html-skills --plugin html-skillsGenerates self-contained HTML pages for technical diagrams, architecture reviews, diff reviews, plans, and comparisons. Renders complex tables as styled HTML instead of ASCII.
Create SVG-based technical diagrams inside HTML — flowcharts, sequence diagrams, state machines, data-flow diagrams, dependency graphs, request/response timelines. Use whenever the user wants to visualize, illustrate, diagram, or sketch a technical concept, system, or process. Strongly prefer SVG over ASCII art, mermaid blocks, or markdown text for anything spatial or relational. Reach for this whenever an explanation involves arrows, boxes, layers, or sequencing — even when the user doesn't say "diagram".
Creates technical and product diagrams (architecture, flowchart, sequence, etc.) as standalone HTML files with inline SVG. Includes style guide setup and 14 diagram types.