Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Event timeline chart: 1440, made in this run
Run 1Event timeline chart“Show our three surgery theatres' bookings for tomorrow as timeline bars. Data in brief.md.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Event Timeline Chart

A day timeline of sessions as bars across four rooms, with a "now" line, a type key and a detail panel for the chosen bar.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds an event bar chart (timeline of sessions across lanes) into your own project: a cream panel: time from 9:00 to 18:00 across the top, one lane per room down the side, each session a rounded bar coloured by type (talk, workshop, panel, break) with its title inside; a coral line marks now (13:40); choosing a bar fills a detail panel below. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a conference, school, venue, hospital rota or deploy log needs to show events as bars over time across rooms, people or systems, or someone asks for a timeline, Gantt-style bars or a schedule chart.

By RecaplyUpdated 12 Nov

Install Event Timeline Chart

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/event-timeline-chart/install.md and follow it to install the event-timeline-chart skill from event-timeline-chart.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Event Timeline Chart is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • An event bar chart (timeline of sessions across lanes)
  • Checked at phone and desktop widths

Good fit

  • When a conference, school, venue, hospital rota or deploy log needs to show events as bars over time across rooms, people or systems

Not for

  • An app with a backend, sign-in or a database
  • Copying another company's site

About this skill

You say

Show our three surgery theatres' bookings for tomorrow as timeline bars. Data in brief.md.

It said back

The chart is built and passes the check at 390, 768 and 1440px, but it shows only 2 of your 11 bookings. brief.md gives only the knee replacement (Theatre 1, 08:30–10:15, Mr Shah) and the cataract (Theatre 2, 09:00–09:45, Ms Okafor). I haven't invented the other nine or the cleaning slots, and the page carries a visible note saying so.

  • Missing bookings: add the rest to the BOOKINGS list at the top of script.js, with room, start and end time, type (planned, emergency or cleaning), title and surgeon. The bars, lane layout and counts update from that list.
  • Layout: three lanes, 8:00 to 20:00, bars coloured by type with a key, and a detail panel that shows the bar you pick. Under 900px the chart scrolls sideways inside its frame. The bar titles show only the procedure; the surgeon appears in the detail panel.
  • Current-time line: it uses the real time of day. The chart is for tomorrow, so the line is only a time-of-day marker, and it is hidden outside 8:00–20:00. Say if you'd rather drop it from tomorrow's view.
  • Check: it passed for overflow, small text, names, contrast, focus, reduced motion and script errors. I looked at the 1440 and 390 screenshots. I haven't looked at check/768.png, and I did not re-view the 1440 screenshot after the final fixes.
Show more

What it did in run 1

  1. event-timeline-chart
  2. ./brief.md
  3. cd .; ls -a; cd .claude/skills/event-timeline-chart/reference; cat index.html style.css script.js
  4. cd . R=.claude/skills/event-timeline-chart/reference sed 's#calc((100% - 1px) / 9)#calc((100% - 1px) / var(--n))#g; s#calc(100% / 9)#calc(100% / var(--n))#g' $R/style.css | sed -n '1,/^\/\* this design/p' > /dev/null sed 's#/ 9)#/ var(--n))#g; s#100% / 9)#100% / var(--n))#g' $R/style.css > style.css cat >> style.css <<'EOF' /* theatres overrides */ .et{--n:12} .et-lane{min-height:56px} .et-bar.planned{background:var(--talk)} .et-bar.emergency{background:#F9CDBD;border-color:rgba(31,26,20,.35)} .et-bar.cleaning{background:var(--break);font-weight:500} .et-hours span{font-size:.85rem} .et-note{margin-top:.8rem;font-size:.95rem;color:var(--muted)} EOF cat > index.html <<'EOF' <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Theatre bookings for tomorrow · St Brannock Hospital</title> <meta name="description" content="Timeline of tomorrow's bookings in St Brannock Hospital's Theatres 1, 2 and 3, from 8:00 to 20:00."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <main id="main"> <section class="d-sec" aria-labelledby="th-h"> <div class="sec-head"><h1 id="th-h" style="font-size:clamp(1.8rem,3.8vw,2.8rem);letter-spacing:-.02em">Theatre bookings <em style="color:var(--em)">tomorrow</em></h1> <p class="sub">Bookings in Theatres 1, 2 and 3 between 8:00 and 20:00, with cleaning slots shown between cases.</p></div> <div class="wrap"><div class="d-card et"> <div class="d-top"> <div><p class="d-title" data-day></p><p class="d-sub" data-count></p></div> <p class="key"><span style="--c:var(--talk)"><i></i>Planned</span><span style="--c:#F9CDBD"><i></i>Emergency</span><span style="--c:var(--break)"><i></i>Cleaning</span></p> </div> <div class="et-frame"><div class="et-grid" data-grid></div></div> <div class="et-detail" aria-live="polite" data-detail><p class="d-sub">No booking chosen yet.</p></div> <p class="et-note" data-note></p> </div></div> </section> </main> <script src="script.js" defer></script> </body> </html> EOF cat > script.js <<'EOF' // Theatre timeline. Bars are buttons; the chosen one fills the detail panel. document.documentElement.classList.add('js'); const START = 8, END = 20; const ROOMS = ['Theatre 1', 'Theatre 2', 'Theatre 3']; const TYPES = { planned: 'Planned', emergency: 'Emergency', cleaning: 'Cleaning' }; const EXPECTED = 11; // TODO: replace with the full day's bookings (brief.md lists only these two of 11). // Fields: room, start/end 'HH:MM', type, title, surgeon (optional). const BOOKINGS = [ { room: 'Theatre 1', start: '08:30', end: '10:15', type: 'planned', title: 'Knee replacement', surgeon: 'Mr Shah' }, { room: 'Theatre 2', start: '09:00', end: '09:45', type: 'planned', title: 'Cataract', surgeon: 'Ms Okafor' }, ]; const mins = (t) => { const [h, m] = t.split(':').map(Number); return h * 60 + m; }; const pct = (m) => ((m - START * 60) / ((END - START) * 60)) * 100; const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])); const el = (tag, cls, html) => { const e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }; const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); document.querySelector('[data-day]').textContent = tomorrow.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' }) + ' · St Brannock Hospital'; document.querySelector('[data-count]').textContent = Three theatres, ${BOOKINGS.length} bookings shown. Choose a bar for details.; if (BOOKINGS.length < EXPECTED) document.querySelector('[data-note]').textContent = Only ${BOOKINGS.length} of ${EXPECTED} bookings have been supplied so far; the rest, including cleaning slots, will appear once added.; const grid = document.querySelector('[data-grid]'); const ruler = el('div', 'et-ruler'); ruler.setAttribute('aria-hidden', 'true'); ruler.append(el('span', 'et-corner')); const hours = el('div', 'et-hours'); for (let h = START; h <= END; h++) hours.append(el('span', null, h + ':00')), hours.lastChild.style.left = pct(h * 60) + '%'; ruler.append(hours); grid.append(ruler); const bars = []; for (const room of ROOMS) { const lane = el('div', 'et-lane'); lane.append(el('p', 'et-room', esc(room))); const track = el('ul', 'et-track'); track.setAttribute('aria-label', room); BOOKINGS.filter((b) => b.room === room).sort((a, b) => mins(a.start) - mins(b.start)).forEach((b) => { const li = el('li'); li.style.left = pct(mins(b.start)) + '%'; li.style.width = calc(${pct(mins(b.end)) - pct(mins(b.start))}% - 4px); const label = b.surgeon ? ${b.title} (${b.surgeon}) : b.title; const btn = el('button', 'et-bar ' + b.type, <span>${esc(label)}</span><span class="sr-only">, ${TYPES[b.type]}, ${b.start} to ${b.end}, ${esc(b.room)}</span>); btn.type = 'button'; btn.setAttribute('aria-pressed', 'false'); btn.title = ${label}, ${b.start}–${b.end}; btn.dataset.i = BOOKINGS.indexOf(b); li.append(btn); track.append(li); bars.push(btn); }); lane.append(track); grid.append(lane); } const det = document.querySelector('[data-detail]'); bars.forEach((b) => b.addEventListener('click', () => { bars.forEach((x) => x.setAttribute('aria-pressed', String(x === b))); const s = BOOKINGS[b.dataset.i]; det.innerHTML = <h3>${esc(s.title)}</h3><p>${TYPES[s.type]} · ${s.start} to ${s.end} · ${esc(s.room)}${s.surgeon ? ' · ' + esc(s.surgeon) : ''}</p>; })); // Current time line (position by time of day) const fr = document.querySelector('.et-frame'); const d = new Date(), nm = d.getHours() * 60 + d.getMinutes(); if (nm >= START * 60 && nm <= END * 60) { const now = el('div', 'et-now', <span>Now ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}</span>); now.setAttribute('aria-hidden', 'true'); now.style.left = calc(130px + (100% - 130px) * ${pct(nm) / 100}); grid.append(now); if (fr.scrollWidth > fr.clientWidth + 2) fr.scrollTo({ left: Math.max(0, now.offsetLeft - fr.clientWidth / 2), behavior: 'instant' }); } EOF node .claude/skills/event-timeline-chart/scripts/check.mjs index.html --out check 2>&1 | tail -30
  5. cd . && ls
  6. sed 's#/ 9)#/ var(--n))#g' .claude/skills/event-timeline-chart/reference/style.css > style.css && grep -c 'var(--n)' style.css
  7. ./index.html
  8. ./script.js
  9. W=.; sed 's#/ 9)#/ var(--n))#g' $W/.claude/skills/event-timeline-chart/reference/style.css > $W/style.css; ls $W; grep -c 'var(--n)' $W/style.css
  10. ./.claude/skills/event-timeline-chart/reference/style.css
  11. ./style.css
  12. node .claude/skills/event-timeline-chart/scripts/check.mjs index.html --out check 2>&1 | tail -30
  13. ./check/1440.png
  14. sed -i '' 's/var(--talk)/var(--planned)/; s/--c:#F9CDBD/--c:var(--emergency)/; s/--c:var(--break)/--c:var(--cleaning)/' index.html && sed -i '' 's/const label = b.surgeon ? ${b.title} (${b.surgeon}) : b.title;/const label = b.title;/' script.js && sed -i '' 's/.et-now span{position:absolute;top:4px;/.et-now span{position:absolute;bottom:12px;/' style.css && node .claude/skills/event-timeline-chart/scripts/check.mjs index.html --out check 2>&1 | tail -5
  15. ./index.html
  16. ./script.js
  17. ./style.css
  18. node .claude/skills/event-timeline-chart/scripts/check.mjs index.html --out check 2>&1 | tail -5
  19. ./check/390.png
  20. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min 51 s · $0.34 of API use

Questions

Is Event Timeline Chart free?

No. Event Timeline Chart costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Event Timeline Chart?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Event Timeline Chart?

A ZIP of the whole skill folder (35 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Event Timeline Chart?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./event-timeline-chart with your agent's flag.

What do I get from Event Timeline Chart?

One HTML file with its CSS inside: no build step, no framework. An event bar chart (timeline of sessions across lanes). Checked at phone and desktop widths.

What does Event Timeline Chart need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Event Timeline Chart?

7 files, about 23,977 tokens in all. The SKILL.md is about 2,256 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 51 s to 1 min 51 s and $0.34 to $0.34 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Event Timeline Chart to use it?

Type /event-timeline-chart first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.