Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In
Open live demo

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.

Similar Skills

View all
New
video
Motion Sections KitClaude CodeCodexCursor+3 more agents
New
video
Auth over FootageClaude CodeCodexCursor+3 more agents

Details

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.

Generates with

Five scenes drawn on a canvas in plain JavaScript, from the page colours and fonts (no images, no libraries)A small inlined runtime: scene picker, iris transition, headline swap, pointer-following lensHeadless Chrome checks and a frame-stepped recorder + ffmpeg

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

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.