The page this skill built from examples/margin-27, working in your browser. Opens in a new tab. Also: .
18.5-second example rendered by this skill from examples/margin-27 · 1280×720
What you get
- A self-contained event page and a paste-in embed
- A multi-room timetable drawn to scale, with breaks, track marks and a now line
- A calendar file for every session and one for the whole programme
- Visitor time beside venue time for online sessions, correct across daylight saving
- Speakers with a quote, tickets with live sales-end countdowns, and a venue plan drawn from the config
- A phone layout of one room or one track at a time with a sticky time rail, and one printed A4 page per day
- Checks at 390, 768, 1024 and 1440 px, and an 18.5-second preview recorder
- Open-source licenses for every part it builds on
Good fit
- A one-day or two-day design or public-sector conference with parallel rooms, shared breaks and an online stream for people abroad.
- A small film festival weekend with two screens, late screenings past midnight and talks in the bar.
- An organiser who wants the build to catch a double-booked room or a speaker in two places before the page goes live.
Not for
- Events longer than 3 days or with more than 5 rooms
- Selling tickets: the page links to your own booking pages
- Personal schedules, logins or attendee accounts
- Weekly series without fixed dates
About this skill
An event page built from one event.json and set like a printed festival programme. The programme is a multi-room timetable drawn to scale, so a session is exactly as tall as its minutes, with breaks as hatched bands and a code on every session that the cover, the speakers, the tickets and the calendar files point back to. On the day it shows a now line, marks sessions past, now or next and fills a now and next row for each room; before and after the event it counts down or says it has ended. Visitors abroad see their own time beside the venue's for online sessions. Speakers come with what they will actually say, tickets with live sales-end countdowns, and the build refuses double-booked rooms and speakers in two places at once.
Example request
A conference programme page on warm paper: a wide black grotesk name with a vermilion year, a glance strip of every session as bars, and a ruled multi-room timetable drawn to scale with hatched coffee breaks and a vermilion now line across the grid.
How it works
Your agent
- 1
Collect the programme
From the organiser's running order, not from memory.
- 2
Write event.json
Set
preview.clockto a moment during the event that shows it well (something running in most rooms),preview.beforeto a moment before it,preview.afterto one after it. - 3
Build
It lists every problem at once and writes nothing until they are fixed.
- 4
Check
It proves the time-zone conversions across the March 2027 clock changes and that
fixtures/broken.jsonfails with exactly its six faults; parses every calendar file back; then, at the preview clock, at 390, 768, 1024 and 1440 px and with reduced motion, on every day and every phone switcher tab, it fails on script errors, links without an address, sideways scrolling, copy under 14 px (16 px on a phone) or labels under 12 px, contrast under WCAG AA measured against what is behind the text, text cut off or off screen, a session drawn at the wrong place for its times, a glance bar that does not match its session, the now line away from the clock, a session marked now that is not running, a switcher or day tabs that are not working tablists, a speaker link that leads nowhere, and a focus that can't be seen. - 5
Look at it
Open the address it prints.
- 6
Put it on the site
out/index.htmlis a complete page with a demo nav. - 7
Record a preview (optional)
--momentslists the holds (cover, programme, later, speakers, tickets, venue) where nothing on screen moves; take posters and stills from inside one.
- 1
You get
- out/index.html
- out/event-embed.html
- out/programme.ics
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the video (the scripts find it; set
CHROME_PATHif they don't). - ffmpeg for the video only (
brew install ffmpeg,winget install ffmpeg,apt install ffmpeg; or setFFMPEG_PATH). - Internet access when the page is opened, for the Google Fonts. Without them, system fonts stand in.
Last checked Nov 9, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
"room A is double-booked"
Two sessions in one room overlap by at least a minute. Move one, or put it in another room. Back-to-back is fine (10:15 to 11:00, then 11:00).
"is in two places at once"
The person is in two overlapping sessions. Often a panel and a workshop; check the running order with them.
"does not exist in Europe/London (the clocks go forward then)"
That clock time is in the hour skipped on the change day. Use the time the venue's clocks will actually show.
What’s in the download
- SKILL.md17.3 KB
- examples/
- examples/low-light/12.4 KB1 file
- examples/margin-27/15.5 KB1 file
- kit/
- kit/event.css30.0 KBthe whole design, scoped to
.ev: cover and glance strip, facts, the timetable (positions computed from minutes), now / next, speakers, tickets, venue and plan; tablet, phone, reduced-motion and print rules. - kit/runtime.js19.1 KBthe browser runtime, inlined into every build. The clock (real or preview), now / next / past, the now line, visitor times, the day tabs and phone switcher as tablists, countdowns, fitting each block's text, and the recorder's script.
- scripts/
- scripts/kit/
- scripts/kit/fixtures/
- scripts/kit/fixtures/broken.json2.94 KBthe check's deliberate faults, and an event across the US clock change.
- scripts/kit/fixtures/dst.json2.18 KB
- scripts/kit/build.mjs23.9 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs26.0 KB
- scripts/kit/ics.mjs5.04 KBwrites the calendar files (UTC times) and reads them back strictly for the check.
- scripts/kit/record.mjs7.81 KB
- scripts/kit/schema.mjs20.9 KBevery field, its limits, the colour rules and the schedule rules; lists every problem at once.
- scripts/kit/serve.mjs2.53 KB
- scripts/kit/tz.mjs3.44 KBvenue clock times to exact instants and back, with Intl only.
- scripts/build.mjs163 Bevent.json to
out/index.html(the page with a demo nav),out/event-embed.html(the sections to paste in),out/ics/<code>.icsandout/programme.ics. - scripts/check.mjs163 Bthe time-zone and schedule-rule tests, the calendar files, then the page at 390, 768, 1024 and 1440 px (and with reduced motion), visitor times against Intl, the before, during and after states, and print.
- scripts/chrome.mjs3.64 KB
- scripts/record.mjs165 Bthe preview video, stills at any preview clock, full-page shots and
--moments. - scripts/serve.mjs163 Bserves
out/on localhost to look at. - NOTICE.md1.47 KB
- TESTED.json431 B
22 files · 200 KB · installs to ~/.claude/skills/event-page-kit for Claude Code and ~/.agents/skills/event-page-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- page kit · rooms or tracks on the phone · page + embed + .ics · 1080p video
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Page Kits · 29 skills
- Updated
- Nov 9, 2026
- Checked
- Nov 9, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
How does it know what is on now?
Live, it reads the visitor's clock and marks each session past, now or next, draws a line across the grid and fills a row for each room. For previews and screenshots the config holds a preview clock, plus moments before and after the event.
Are the times right for someone in another country?
For events with online sessions the page shows the visitor's own time beside the venue's, worked out by the browser's built-in time-zone data. The check compares every session with Node's own conversion, including a fixture across the US clock change on 14 March 2027.
What happens on a phone?
The grid shows one room or one track at a time, chosen from a switcher that works with arrow keys and screen readers. Sessions keep their true heights, and the hour label stays pinned under the switcher with the visitor's time beneath it.
Which agents is Event Page written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesWritten by Lookbk
Lookbk wrote this package with its own runtime and no third-party code; the built pages load Archivo, IBM Plex Mono, Instrument Serif, Instrument Sans and DM Mono from Google Fonts under the SIL Open Font License 1.1. Written by Lookbk, no third-party code.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.