The page this skill built from examples/hollin, working in your browser. Opens in a new tab. Also: .
17-second example rendered by this skill from examples/hollin · 1280×720
What you get
- A self-contained About page and a paste-in embed
- Two record layouts: a spine with the empty years ticked, and a rail on a true time scale
- Two people layouts: a contact sheet with hover decisions, and an index with a viewer and a full roll of names
- A duotone treatment for your own portraits, and designed initial tiles when there is no photo
- Footnoted numbers with an as-of date, and practices with a way to check each one
- Build-time refusal of unsourced numbers, milestones without evidence and headcounts that do not add up
- Checks at 4 widths and with reduced motion, plus a 17-second 1080p preview recorder
- Open-source licenses for every part it builds on
Good fit
- A small workshop or studio that wants every maker named, with what each person does and one decision they made.
- A consultancy or agency that needs to show 40 people honestly without a wall of stock headshots.
- A company rewriting its About page around dated milestones, sourced figures and the people a visitor can actually email.
Not for
- Teams that want stock photography or generated headshots: the kit ships no faces
- Pages that need claims without sources: the build refuses unsourced numbers and milestones
- Careers boards, job listings or application forms
- Long company histories with more than 12 milestones
About this skill
An About page built from one about.json, where every claim sits beside its receipt. A founding sentence opens with a record card of dates and headcount. The record lists milestones, each with what changed and a lettered evidence note, drawn as you scroll down a spine or along a rail on a true time scale. The people appear as a contact sheet or an index with a viewer, each with what they actually do and one dated decision shown on hover. Practices carry the year they started and how to check them, up to 4 numbers are footnoted and dated, and the close names who to email. Your own portraits show in the palette's duotone, with timber-ring or hatched initial tiles when there is no photo, and the build refuses unsourced numbers.
Example request
An editorial About page on warm paper: a founding sentence in a book serif with a madder turn, a dated record down a scroll-drawn spine with lettered evidence notes, and a contact sheet of timber-ring initial tiles with a hover strip showing each person's dated decision.
How it works
Your agent
- 1
Collect the evidence first
From the person, or from their records, not from imagination.
- 2
Write about.json
Put photos next to about.json (for example
people/ines.jpg) and setphotoand, if the face is not centred,focus("50% 30%"). - 3
Build
It lists every problem at once and writes nothing until they are fixed.
- 4
Check
At 390, 768, 1024 and 1440 px, and with reduced motion at 390 and 1440, 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 actually behind the text, text cut off or off screen, initials that reach the edge of their tile (measured from the glyphs' ink), a decision that is not printed where there is no hover, a viewer that does not follow the hovered row, a headcount that does not match the people listed, a milestone without its evidence or a number without its source, rail entries that overlap, a record already drawn at the top of the page or not fully drawn at the bottom (or under reduced motion), a section that never fades in, and a keyboard focus that can't be seen.
- 5
Look at it
Open the address it prints, scroll through the record, hover the people, and try it on a phone.
- 6
Put it on the site
out/index.htmlis a complete About page with a demo nav and footer. - 7
Record a preview (optional)
--momentslists the holds (hero, record, record-end, people, numbers, close) where nothing on screen moves; take posters and stills from inside one.
- 1
You get
- out/index.html
- out/about-embed.html
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 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The build lists problems and writes nothing.
Fix them all and build again; it reports everything at once.
"the people section lists 39 people, but founding.headcount.count says 40".
Add the missing person to
people.others(orfeatured), or correct the count and itsasOf. The page must agree with itself."numbers.items[1].source is required".
Say how the number was counted: which register, ledger or log, and over what period. If nobody can say, leave the number out.
What’s in the download
- SKILL.md15.8 KB
- examples/
- examples/halyard/9.56 KB1 file
- examples/hollin/44.8 KB14 files
- kit/
- kit/about.css25.7 KBthe whole design, scoped to
.ab. Hero, record (spine and rail), people (sheet and index), practices, numbers, close; tablet and phone rules; touch and reduced-motion rules. - kit/runtime.js9.52 KBthe browser runtime, inlined into every build. Draws the record as you scroll, lays out the rail on its time scale, runs the index viewer, fades sections in once, and gives the recorder its clock.
- scripts/
- scripts/kit/
- scripts/kit/build.mjs18.9 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs16.4 KB
- scripts/kit/paper-portraits.mjs5.80 KBdraws the cut-paper stand-in portraits for the Hollin photo example.
- scripts/kit/record.mjs8.02 KB
- scripts/kit/schema.mjs14.8 KBevery field, its limits, the colour contrast rules and the evidence rules; lists every problem at once.
- scripts/kit/serve.mjs2.53 KB
- scripts/build.mjs164 Babout.json to
out/index.html(the About page with the site's nav and footer),out/about-embed.html(the sections to paste in) andout/people/(your portraits). - scripts/check.mjs143 Bserves the page and checks it at 390, 768, 1024 and 1440 px, with reduced motion at 390 and 1440.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs145 Bthe preview video, stills, full-page shots and
--moments(the holds where nothing moves). - scripts/serve.mjs143 Bserves
out/on localhost to look at. - NOTICE.md1.44 KB
- TESTED.json552 B
32 files · 183 KB · installs to ~/.claude/skills/about-story-kit for Claude Code and ~/.agents/skills/about-story-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- page kit · 2 record layouts · 2 people layouts · page + embed · 1080p video
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Page Kits · 29 skills
- Updated
- Nov 8, 2026
- Checked
- Nov 8, 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
What stops someone putting a made-up number on the page?
The build refuses any number without a source and any as-of date that has not happened yet. Each figure is printed with a footnote saying how it was counted, so a reader can see the register, ledger or log behind it.
What shows when a person has no photo?
A tile with their initials seated on a baseline with the same margin on every tile, over a pattern drawn from their name: timber growth rings, fine hatching or plain. The check measures the letters' ink so they never touch the tile's edge.
How does the timeline behave on a phone?
Both layouts run down a spine on a phone, with the year and month on one line, before and after on one wrapped line, and the evidence note under each entry. The line still draws as you scroll, and reduced motion shows it fully drawn.
Which agents is About 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 Source Serif 4, IBM Plex Mono, Familjen Grotesk and Martian 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.