Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add f-labs-io/agent-html-skills/plugin install html-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/f-labs-io/agent-html-skills/html-timeline-roadmap)<a href="https://agentmods.dev/skills/f-labs-io/agent-html-skills/html-timeline-roadmap"><img src="https://agentmods.dev/badge/skills/f-labs-io/agent-html-skills/html-timeline-roadmap/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/f-labs-io/agent-html-skills/html-timeline-roadmap"><img src="https://agentmods.dev/badge/skills/f-labs-io/agent-html-skills/html-timeline-roadmap.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00095 | $0.02122 |
| Opus 5 | $0.00048 | $0.01061 |
| Sonnet 5 | $0.00019 | $0.00424 |
| Haiku 4.5 | $0.00010 | $0.00212 |
Grade A, and why
html-timeline-roadmap scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 146 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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.
Pre-flight — run BEFORE writing the artifact
Invoke html-skills:html-skills-listen (Skill tool) first; it is idempotent. If it returns a URL, inject it verbatim as window.__CLAUDE_SUBMIT_URL__ in the HTML you are about to write, ?t= query string included (a local, single-session loopback handshake — not a credential). If it reported web/sandbox mode, leave that line out; submitToClaude then falls back to clipboard mode.
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
Core structure
- Header — title, time range covered, last updated
- Time axis — at the top, with major and minor gridlines
- Lanes — horizontal rows, one per workstream / team / category
- Items — bars/pills positioned by time, sized by duration
- Dependencies — arrows between items (when the next can't start until the prior finishes)
- Milestones — vertical markers at specific dates
- Legend — for status colors and shape conventions
- Detail panel — click an item to see its full info
Patterns
Pattern A: Roadmap (forward-looking)
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago Changed · +12 lines cbf30194d1de
- 9d ago First seen · 134 lines · 95 tokens per session scan A da7690fbfdb2
html-timeline-roadmap is a skill published in the GitHub repository f-labs-io/agent-html-skills (55 stars, last pushed 7d ago), licensed MIT. It adds 95 tokens to every session and 2,122 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
recipe-create-meet-space
Create a Google Meet meeting space and share the join link.
workthreads
SpecStory Workthreads - a weekly work-thread rollup across a team's repos from SpecStory coding histories (any agent - Claude Code, Codex, Cursor, Gemini, and more). It groups the window's sessions into threads of work per project and labels each new / open / recently closed, so a lead sees what shipped, what is still…
atmos-config
Atmos root configuration: atmos.yaml discovery, precedence, deep merging, basepath, imports, minimal bootstrap, and routing to narrower Atmos skills.
story-readiness
Validate that a story file is implementation-ready. Checks for embedded GDD requirements, ADR references, engine notes, clear acceptance criteria, and no open design questions. Produces READY / NEEDS WORK / BLOCKED verdict with specific gaps. Use when user says 'is this story ready', 'can I start on this story', 'is…
autotask-creator
Rules for automation CRUD from the group-chat commander. The commander does not call mutation tools and does not edit cloud/autotasks files directly. It emits one or more top-level ... containers in its final text; the bus parses and applies them after the turn.
projects
List all managed projects with status, branch, open PRs, and open issue counts — portfolio-level view.