The page this skill built from examples/ferrow, working in your browser. Opens in a new tab. Also: .
12-second example rendered by this skill from examples/ferrow · 1280×720
What you get
- A self-contained page that ends with the footer, and a paste-in embed
- Four layouts from one config: wordmark, index, dispatch and place
- The sheet-off-the-board reveal with a cast shadow, reversible on the scroll
- The brand name fitted edge to edge, stacking on two lines on phones
- A drawn street map with a route, and opening hours with a live status
- A newsletter form with empty, typing, error, sending and sent states
- Checks at 4 widths and with reduced motion, plus a 12-second 1080p preview recorder
- Open-source licenses for every part it builds on
Good fit
- A brand with a short, strong name that should be the last thing a visitor sees.
- A restaurant, shop or studio that needs its address, a map and today's hours right where people look for them.
- A studio or maker whose newsletter is the main way people keep in touch.
Not for
- Embedding a real interactive map: the map is a drawn diagram that links to one
- Names longer than 12 characters
- Footers that must sit inside a scrolling or overflow-hidden container
- Sites that want mega-menus with dozens of links per column
About this skill
The end of a landing page as one composed finale. The page above is a sheet lying on a coloured board, and when the reader reaches the end it lifts away: its cut edge and a soft shadow cross the brand's name, which is set edge to edge on the board, fitted to the letters' real ink with kerning kept, and rises through the opening gap. One footer.json gives four layouts: a wordmark footer with the closing call and link columns, an editorial index with leader dots, a newsletter-led footer with designed form states, and a place footer with a drawn street map and live opening hours. On phones the name stacks on two lines. Reduced motion gets the finished footer.
Example request
The last screen of a landing page: a warm paper page lifts off a garden-green board and uncovers the brand's name set edge to edge, its shadow crossing the letters as the name rises into place.
How it works
Your agent
- 1
Collect the content
Use their real addresses, hours, issue titles and numbers.
- 2
Write footer.json
Drawing the map (place only): the map is a 100 × 100 square, with x from the left and y from the top.
- 3
Build
It lists every problem at once (a missing field, a line too long for its place, a colour pair under its contrast minimum, a board too close to the sheet to read as a different stock, a break that doesn't match the name, hours that close before they open, a map point outside the square) and writes nothing until they're fixed.
- 4
Check
It runs at 390, 768, 1024 and 1440 px wide, and with reduced motion at 390 and 1440.
- 5
Look at it
Open the address it prints and scroll to the end on a laptop and a phone.
- 6
Put it on the site
Paste
out/footer-embed.htmlas the last thing inside<body>, after all of the page's content. - 7
Record a preview (optional)
The video follows a fixed 12-second scroll script: from the end of the page above, down onto the board (seconds 1 to 6), holding finished (6 to 7.6), back up three quarters of the board to show that the lift is reversible, then down again.
- 1
You get
- out/footer-embed.html
- out/index.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, and the name is still fitted to whatever face is used.
Last checked Nov 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The footer just sits there; no lift.
The page is in reduced motion (correct: that's the finished state), JavaScript is off,
reveal.liftis false, or the footer is inside an element withoverflowother thanvisible. A footer whose upper part is shorter than its board also shows finished, because the board can't hide under it. Add a line to the closing call or a column.The name doesn't reach the edges.
The display font didn't load (offline, or blocked fonts). The fit is measured on whatever face is used, so it re-fits when the font arrives. If it stays off, the check reports the ink edges in pixels.
The name stacks badly on phones.
Move the
|inbrand.break, or setreveal.stackBelowto 0 to keep one line.
What’s in the download
- SKILL.md18.7 KB
- examples/
- examples/ferrow/10.7 KB3 files
- examples/ostrel/3.49 KB1 file
- kit/
- kit/footer.css17.1 KBthe whole design, scoped to
.fk. Layouts, phone and tablet rules, the lift, and the reduced-motion finished state. - kit/runtime.js11.0 KBthe browser runtime, inlined into every build. The name's ink fit and stacking, the lift, live hours, form states, back to top, and the recording clock.
- scripts/
- scripts/kit/
- scripts/kit/build.mjs15.3 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs18.3 KB
- scripts/kit/record.mjs7.50 KB
- scripts/kit/schema.mjs12.9 KBevery field, its limits and the colour contrast rules; lists every problem at once.
- scripts/kit/serve.mjs2.50 KB
- scripts/build.mjs138 Bfooter.json to
out/index.html(a page that ends with the footer) andout/footer-embed.html(the footer to paste in). - scripts/check.mjs138 Bserves the page and checks it at 390, 768, 1024 and 1440 px, and with reduced motion at 390 and 1440.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs140 Bthe preview video, stills, form-state stills and
--moments. - scripts/serve.mjs138 Bserves
out/on localhost to look at. - NOTICE.md1.08 KB
- TESTED.json696 B
20 files · 128 KB · installs to ~/.claude/skills/footer-kit for Claude Code and ~/.agents/skills/footer-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- page kit · 4 footer 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
How does the name fit the width exactly?
The runtime measures the name on a canvas in the page's own display face with kerning on, scales its inked width to the content width and crops the box to the ink. The check finds the inked pixels in a screenshot and fails if any edge is more than 2 px out.
What happens on a phone?
If the name on one line would be under 120 px tall and you give it a break such as Fer|row, it is set on two lines at one size, first line left and second right. Ferrow comes out 153 px tall per line at 390 px wide.
Does the reveal work with reduced motion?
Visitors who ask for reduced motion get the finished footer: the board sits after the page, there is no shadow or rise, and the route and leader dots are already drawn. The check runs that state at 390 and 1440 px.
Which agents is Footer 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
Lookbk wrote this package with its own runtime and no third-party code; the built pages load Gloock, Instrument Serif, Bricolage Grotesque, Hanken Grotesk and IBM Plex 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.