The page this skill built from examples/morrow, working in your browser. Opens in a new tab. Also: .
8-second example rendered by this skill from examples/morrow · 1280×720
What you get
- A self-contained page that ends with the band, and a paste-in embed
- Three layouts from one config: stub, poster and sentence
- A real fact as the hero: places left with seat dots, a date, a held price or a score
- A live day count and a price window with today marked, worked out in the offer's time zone
- After-close copy that replaces the band once the deadline passes
- A sentence form with empty, typing, error, sending and sent states and phone-friendly fields
- Checks at 4 widths and with reduced motion, plus an 8-second 1080p preview recorder
- Open-source licenses for every part it builds on
Good fit
- A course, workshop or event with a fixed number of places and a date when booking closes.
- A software launch with an introductory price that ends on a set day and goes back up.
- A studio or shop that wants a short booking or waitlist form to read like one sentence.
Not for
- Fake urgency such as ticking timers or invented counts: the fact must be real and validated
- Footers, link columns or newsletter archives: pair it with a footer instead
- Forms that need more than one email field, payment or a multi-step checkout
- Pages that want several call-to-action bands: use one band per page
About this skill
The band above the footer, built to ask for one click and show the reason to act now. One cta.json gives three layouts. The stub is an admission ticket: a punched perforation, the places left set as a huge numeral on the stub with seat dots and a legend, and a rubber stamp that the page places where it covers no text. The poster sets a held price as its figure, fitted to its column, over a timeline from the day the price opened to the day it ends, with today marked. In the sentence layout the form is the headline, with empty, typing, error, sending and sent states. Day counts come from real dates, and after the deadline the band switches to its own after-close copy. One entrance, then it holds still.
Example request
A closing call to action set as a cream admission ticket with a cobalt stub: the places left as a giant numeral with seat dots, a rubber stamp beside the perforation, and one button with the price.
How it works
Your agent
- 1
Collect the content
From the person, or from their current page.
- 2
Write cta.json
Set
preview.nowto the day you want the stills and recordings to show. - 3
Build
It lists every problem at once (a missing fact, a count above its total, a price that is not below the old one, a window that closes before it opens, a time zone that does not exist, a line too long for its place, a colour pair under its contrast minimum, a missing after-close, an exclamation mark or an em dash) 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, with today pinned to
preview.now. - 5
Look at it
Open the address it prints, scroll to the band on a laptop and a phone.
- 6
Put it on the site
Paste
out/cta-embed.htmlwhere the band belongs, normally just above the footer. - 7
Record a preview (optional)
The video follows a fixed 8-second script: the page above, a scroll onto the band (0.8 to 2.6 s), the entrance, a hold.
- 1
You get
- out/cta-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.
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.
"theme.ink on theme.card is 6.4:1".
Darken the ink or lighten the card. Contrast is measured with the WCAG formula, so eyeballing won't settle it.
The check says the stamp covers text.
The page could not find a clear place at that width. Shorten the stamp's words, a field or the lede, or leave
stampout.
What’s in the download
- SKILL.md16.2 KB
- examples/
- examples/fernhall/1.88 KB1 file
- examples/morrow/4.90 KB2 files
- kit/
- kit/cta.css19.9 KBthe whole design, scoped to
.cc. The three layouts, the tablet and phone rules, the stamp and the reduced-motion rule. - kit/runtime.js17.2 KBthe browser runtime, inlined into every build. Today and the deadline, the after-close switch, day counts, the perforation, the stamp's placement, the figure's fit, the sentence form's states, the entrance, and the recording clock.
- scripts/
- scripts/kit/
- scripts/kit/build.mjs20.9 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs19.9 KB
- scripts/kit/record.mjs7.76 KB
- scripts/kit/schema.mjs14.9 KBevery field, its limits and the colour contrast rules; lists every problem at once.
- scripts/kit/serve.mjs2.50 KB
- scripts/build.mjs143 Bcta.json to
out/index.html(a short demo page that ends with the band and a footer) andout/cta-embed.html(the band to paste in). - scripts/check.mjs143 Bserves the page and checks it at 390, 768, 1024 and 1440 px, with reduced motion at 390 and 1440, and once the day after the deadline.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs145 Bthe preview video, stills, form-state stills, after-close stills and
--moments. - scripts/serve.mjs143 Bserves
out/on localhost to look at. - NOTICE.md1.29 KB
- TESTED.json556 B
19 files · 137 KB · installs to ~/.claude/skills/closing-cta-kit for Claude Code and ~/.agents/skills/closing-cta-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- page kit · 3 call-to-action 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 band know how many days are left?
The build turns the deadline into an exact moment in its own time zone, and the page counts calendar days from today in that zone, including today. Checks and recordings pin today to preview.now, so the Morrow still always reads 23 days left to book.
What happens after the deadline passes?
The page swaps to the afterClose copy you wrote: a waitlist and the next course date for Morrow, the regular €89 price and an ended price window for Fernhall. The check opens each page the day after its deadline and fails if any open copy still shows.
Can the stamp ever cover the text?
No. The page measures every line of text, field, button and seat dot on the ticket and places the stamp in a clear spot at that width, shrinking it if it must. The check measures again from the drawn boxes at 390, 768, 1024 and 1440 px.
Which agents is Closing CTA 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 Big Shoulders Display, Schibsted Grotesk, IBM Plex Mono, Archivo, JetBrains Mono and Newsreader 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.