The page this skill built from examples/brine-crumb, working in your browser. Opens in a new tab. Also: .
12-second example rendered by this skill from examples/brine-crumb · 1280×720
What you get
- A self-contained page and a paste-in section, in a page layout or an inline layout
- The latest issue opened in a neutral inbox, with a fold that says how much more there is
- A send calendar, next issue and archive dates worked out from the schedule, in the reader's time zone
- One email field with empty, typing, invalid, sending, check your inbox, already subscribed, subscribed and error states, none of which moves the layout
- The sample email's to line mirroring the address as it is typed, and the confirmation email landing in that inbox
- Presets for a plain form post and common list services, plus a server-function recipe for lists that need a key
- Checks at 390, 768, 1024 and 1440 px and with reduced motion, a self-test of 17 refusals, and a 12-second preview recorder
- Open-source licenses for every part it builds on
Good fit
- A writer or small team with a regular letter and an archive worth showing to new readers.
- A company blog or engineering team that wants a signup section at the end of each article.
- A newsletter that uses double opt-in and wants the confirming step explained instead of hidden.
Not for
- A waitlist before anything has been sent: there is no issue to show yet
- Signup forms that ask for more than an email address, such as names, interests or payment
- Inventing a subscriber count or issue history: every number needs its source
- Sending email or managing the list itself: the kit posts to the list you already use
About this skill
A newsletter signup whose pitch is the letter itself. One letter.json builds a standalone page or an inline section where the latest real issue sits opened in a neutral inbox: sender, subject, preheader, the first screen of the email and a fold that says how many words are left. The cadence is a send calendar worked out from the schedule, so issue dates, the archive and the next issue come from one source and show in the reader's own time zone. The subscriber count carries its source and date, beside a privacy ledger. The form has every state designed, from typing, mirrored on the sample email's to line, through check your inbox and already subscribed to an honest error, without moving the layout. The build refuses typed dates that disagree and anything shaped like a secret key.
Example request
A newsletter signup on warm paper: a serif headline and a send calendar on the left, and on the right the latest issue opened inside a quiet inbox, with its subject, preheader, drop cap and a dashed fold line.
How it works
Your agent
- 1
Collect the letter
From the person, or from their list's archive.
- 2
Write letter.json
Leave out
today(it pins "today" for the examples so they build the same forever) anddemo(the demo page around an inline section, and the address the recorder types). - 3
Choose where sign-ups go
Set
form.providerand paste the address from your list's own embed or form code intoform.action. - 4
Build and run the self-test
The build lists every problem at once (a missing field, a line too long for its place, a colour pair under its contrast minimum, a first issue that isn't on the weekday, a skipped week that isn't a send day, a typed date or count that disagrees with the schedule, an issue that hasn't gone out yet, a count dated after today, anything key-shaped) and writes nothing until they are fixed.
- 5
Check
It runs at 390, 768, 1024 and 1440 px wide, and with reduced motion at 390 and 1440, and fails on.
- 6
Look at it, and test the real list
Open the address it prints on a laptop and a phone.
- 7
Put it on the site
For
page, deployout/index.htmlas the page. - 8
Record a preview (optional)
The video follows a fixed 12-second script: the inbox arrives (0.3 to 2.1 s), an address is typed (3.4 to 4.9 s), sent (5.6 s), the confirmation lands (6.5 s), and on the page layout it scrolls to the archive (9 to 10.2 s).
- 1
You get
- out/index.html
- out/newsletter-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). - The latest issue as sent: subject, preheader, the first paragraphs, its number and the schedule it goes out on.
- Internet access when the page is opened, for its Google Fonts. Without it, system fonts stand in.
Last checked Nov 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
"issue.date says …, but on this schedule No. 87 went out on …"
The schedule and the real send log disagree. Usually a week the letter skipped is missing from
schedule.skipped, orfirstis wrong. Fix the schedule rather than the date, so the archive and calendar are right too."No. 88 is scheduled for …, after today"
Show the latest issue that has actually gone out.
"looks like a secret key"
A key, token or long random string is in letter.json. Remove it and use
proxywithrecipes/proxy-function.mjs. A list's public ID or form ID is fine; if a public ID is flagged, it is very long and random, so check the provider's docs for the public value.
What’s in the download
- SKILL.md20.3 KB
- examples/
- examples/brine-crumb/3.79 KB1 file
- examples/tail-latency/3.94 KB1 file
- kit/
- kit/newsletter.css20.4 KBthe whole design, scoped to
.nk: both layouts, the inbox, the form states, phone and tablet rules. - kit/runtime.js16.2 KBthe browser runtime, inlined into every build: the reader's time zone, the next issue from the clock, the entrance, the form and its states, the "to:" mirror, the sending adapters, and the recording clock.
- recipes/
- recipes/proxy-function.mjs3.71 KBa server function for lists that need a secret key (standard Request and Response, so it runs on most hosts).
- scripts/
- scripts/kit/
- scripts/kit/build.mjs20.1 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs20.5 KB
- scripts/kit/dates.mjs4.24 KBsend times in the sender's zone as exact instants, summer time included.
- scripts/kit/record.mjs9.48 KB
- scripts/kit/schema.mjs20.9 KBevery field and its limits, the provider presets, and the derivation of every date from the schedule; lists every problem at once.
- scripts/kit/secrets.mjs3.93 KBthe key patterns and the long-random-string test.
- scripts/kit/selftest.mjs5.20 KB
- scripts/kit/serve.mjs3.81 KB
- scripts/build.mjs142 Bletter.json to
out/index.htmlandout/newsletter-embed.html(the section to paste in); refuses key-shaped values. - scripts/check.mjs142 Bchecks the built page at 390, 768, 1024 and 1440 px and with reduced motion, including the form end to end against stand-in addresses and the times from Los Angeles.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs144 Bthe preview video, stills, form-state stills and
--moments. - scripts/selftest.mjs148 Bbreaks example 1 one way at a time and proves the build refuses each (17 cases), accepts what it should, and gets summer time right.
- scripts/serve.mjs142 Bserves
out/on localhost to look at; also answers the stand-in sign-up addresses the check uses. - NOTICE.md1.54 KB
- TESTED.json537 B
23 files · 168 KB · installs to ~/.claude/skills/newsletter-kit for Claude Code and ~/.agents/skills/newsletter-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- page kit · newsletter signup · page or inline section · 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 are the issue dates and the next issue worked out?
You give the date of the first issue, how often it goes out, the weekday, the send time, the sender's time zone and any skipped weeks. The build numbers every send from that, refuses any typed date that disagrees, and the page shows each time in the reader's own zone.
Where do the sign-ups go?
To the address from your list's own embed code, posted from the page, or to a small server function you deploy when the list needs a secret key. The build scans the config and the finished page and refuses to write anything that looks like a key.
What does the reader see after pressing the button?
With double opt-in, a panel names the address and says a confirmation email is on its way, and that email appears as a new row in the sample inbox. Already subscribed and error each get their own state, and nothing on the page moves.
Which agents is Newsletter Signup 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 Young Serif, Newsreader, Geist, Literata, IBM Plex Sans, IBM Plex Mono and Geist 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.