The page this skill built from examples/lodestar, working in your browser. Opens in a new tab. Also: Pip parcel.
18-second example rendered by this skill from examples/lodestar · 1280×720
Example settingswhat each example above was built from
examples/lodestarpage.json
- Brand
- Lodestar
- Layout
- split
- Headline
- Page not found
- Scenes
- 3
- Colors
- bg #0b1220 · ink #efe8d8 · muted #a3abb8 · accent #ff7a45 · onAccent #1a0b04 · accent2 #6fb3c8 · paper #f1ebdc
examples/pip-parcelpage.json
- Brand
- Pip & Parcel
- Layout
- card
- Headline
- Page not found
- Scenes
- 2
- Colors
- bg #f3ead9 · ink #1f2a22 · muted #535c52 · accent #bb3224 · onAccent #fff8ee · accent2 #e8a93a · paper #fffaf0
What you get
- One self-contained 404 page in your words, colours and Google Fonts, with search, links and the way home
- Five scenes to choose from, each with its own headline, introduction and numbered caption, and a button that shows the next
- Two layouts: copy beside the scene (split), or the scene full-bleed under a raised card
- A paper plane that really folds in 3D, with the 404 print folding with the sheet
- A phone layout with the scene in a band on top and the search in the first screen, and a reduced-motion version that draws each scene once
- Checks at 390, 768, 1024 and 1440 px for overflow, text size, contrast against the drawn pixels and focus rings
- A 1080p video of every scene in turn, rendered frame by frame
- Open-source licenses for every part it builds on
Good fit
- Data, map and developer products can pair a satellite drifting off its orbit with a magnifier hunting a missing map tile, like the Lodestar example.
- Shops and stationery brands get a page that folds itself into a paper plane, or a vending machine that drops a 404 can, as in Pip & Parcel.
- Teams who want a 404 that still does its job: a real search box, up to four links with notes, and a plain way home, all readable on a phone.
Not for
- Your own illustration or mascot: the five scenes are the design, coloured by your palette
- Other error pages with different wording per status code (one page per build; build twice for a 500 page)
- Search results: the box sends the query to your own search page
- Sound: the page is silent and so is the recording
About this skill
A not-found page people enjoy landing on, in your colours, fonts and words. Pick from five small scenes, each drawn in code on one canvas with no pictures: a satellite tumbling far from where it was expected while its signal breaks up, a page with 404 printed on it that folds itself into a paper plane and flies a loop away, a magnifier that follows the pointer over a city map with one tile missing, a vending machine that drops a 404 can into its tray, and the number blowing away into a sand dune and building itself back. Each scene gets its own headline and introduction, a visit gets one of them, and a button opens the next in an iris. Two layouts: a quiet split page with the copy beside the scene, or the scene full-bleed with the copy in a raised card. With it come a working search box, up to four links and the way home. Your agent writes one page.json; the build checks every length and writes one HTML file, and the check measures contrast against the real pixels behind the words at four widths.
Example request
Make our 404 page with the 404 Page Kit: our colours and fonts, the map and satellite scenes, search going to /search, and links to docs, pricing and status.
How it works
Your agent
- 1
Collect the brand
Every number and claim in the copy must come from the person or their site.
- 2
Write page.json
Copy
<skill>/examples/lodestar/page.json(a dark map-data brand,split: satellite, map, sand) or<skill>/examples/pip-parcel/page.json(a light snack-box shop,card: plane, vending) and replace every value. - 3
Build
It lists every problem at once and writes nothing until they are fixed.
- 4
Check
It opens the page at 390, 768, 1024 and 1440 px and with reduced motion, shows every scene in turn, and fails on script errors, a blank scene, sideways scrolling, text off the screen or cut off (including the search hint), text under 14 px (16 px on a phone), contrast under WCAG AA measured against the real canvas pixels behind the words, the copy running into the scene, links without an address, controls without a visible focus ring, and reduced motion that still moves.
- 5
Look at it
Open the address it prints;
?scene=map(or any id) forces one scene. - 6
Record a video (optional)
Writes
out/preview.mp4(1920×1080, 30 fps, each scene forrecord.perseconds, default 6) andout/poster.png. - 7
Put it on the site
out/index.htmlis the whole page.
- 1
You get
- out/preview.mp4
- out/poster.png
- out/index.html


What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge for the check and the video (found automatically; set
CHROME_PATHotherwise). - ffmpeg, only for the video (
brew install ffmpeg,winget install ffmpeg,apt install ffmpeg; or setFFMPEG_PATH).
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
A contrast failure on
mutedoraccentDarken it on a light bg, lighten it on a dark bg, and build again. A failure tagged with a scene means that scene's drawing was behind the words; it is usually the bar link on a phone. Use a slightly stronger
muted."the hint is cut off"
Shorten
search.placeholder.The scene's numbers look like a fallback font
The Google Fonts link didn't load the display family or weight named in page.json.
What’s in the download
- SKILL.md12.9 KB
- examples/
- examples/lodestar/2.52 KB1 file
- examples/pip-parcel/2.16 KB1 file
- scripts/
- scripts/kit/
- scripts/kit/build.mjs8.72 KB
- scripts/kit/cdp.mjs4.90 KB
- scripts/kit/check.mjs12.0 KB
- scripts/kit/record.mjs5.56 KB
- scripts/kit/runtime.js9.40 KB
- scripts/kit/scenes.js67.7 KB
- scripts/kit/serve.mjs2.47 KB
- scripts/build.mjs140 Bentry points; the work is in
scripts/kit/(build.mjs,scenes.jsandruntime.jsfor the browser,check.mjs,serve.mjs,record.mjs,cdp.mjs). - scripts/check.mjs140 B
- scripts/chrome.mjs3.63 KBfinds Chrome, Chromium or Edge.
- scripts/record.mjs142 B
- scripts/serve.mjs140 B
- template/
- template/fields.json8.26 KBevery field and its limit.
- template/page.html13.1 KBboth layouts and their CSS.
- NOTICE.md1.06 KB
- TESTED.json429 B
19 files · 155 KB · installs to ~/.claude/skills/animated-404-kit for Claude Code and ~/.agents/skills/animated-404-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Branded 404 page · five animated scenes drawn in code, no images · search, links home and a 1080p video
- Needs
- Node.js 18+, and Chrome for the checks; ffmpeg only for the video
- Series
- Page Kits · 4 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 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
Can I put my own illustration in?
No. The five scenes are drawn in code and take their colours from your palette and their numbers and signs from your headline font, so they always match. You choose which scenes show and write each one's headline and caption.
Does it need any images or libraries?
No. The build writes one HTML file with the scenes and a small runtime inlined; the only outside request is your Google Fonts link. Without JavaScript the copy, search and links still work.
What about people who turn off motion?
With reduced motion each scene is drawn once at a telling moment, the headline appears without its rise, and the button still switches scenes. The check fails if anything still moves.
Which agents is 404 Page Kit 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
the five scenes, the page, template and kit, all written for Lookbk and drawn in code. The fonts are from Google Fonts. 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.