Guide · Agent skill
How to use the Waitlist Page Builder agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The waitlist-page skill is an agent skill that tells a coding agent how to build a single-file HTML landing page for a product that has not launched yet. It includes the brand name, a tagline, a logo and an email sign-up form, styled from a DESIGN.md brand file in your project. This guide explains what the skill does, how to install it, how to ask for a page in plain language, and what it needs before it runs.
Waitlist Page Buildernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the skill ZIP. Get the waitlist-page ZIP from the skill page on this site.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder for one project.
- 3Add a DESIGN.md file. Place a DESIGN.md brand file in your project with colours, typography and layout rules. The skill asks for one if it is missing.
- 4Ask for the page in plain words. Request a waitlist page, coming soon page or launch page, and give the product name and tagline.
- 5Review index.html. Open the generated index.html and check the copy, colours, fonts and form against the checklist.
- 6Connect the form to a backend. Add your own service to store emails, since the skill builds the form markup but the files do not include a backend.
What does the waitlist-page skill make the agent do?
When the skill is active, the agent builds one HTML file, index.html, for a pre-launch product. The page is meant to be a focused entrance: your brand identity, a short description of what you are making, and one clear way to join an early list.
The agent does not write the HTML from scratch. It copies a fixed template (assets/template.html) and replaces its placeholders with your product name, tagline, colours, fonts and logo. The skill also states that the page should avoid fake urgency, so there are no fake countdowns and no artificial scarcity.
- Output: a single-file HTML landing page (index.html)
- Starts from a fixed template rather than new markup
- Colours and fonts come from DESIGN.md in your project
- Includes an email sign-up form and optional decorative elements
How do you install the waitlist-page skill?
You can install the skill in either of two ways. Download the ZIP from the skill page on this site and unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill to apply to one project only.
If you use the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
~/.claude/skills/What do you need before the skill runs?
The skill needs a DESIGN.md brand file in your project. It describes colours, typography and layout rules. The skill reads it first and asks you to provide one if it is missing, because the output depends on it.
The agent also needs file write capability, since it creates index.html. The template loads its display and body fonts from Google Fonts by URL, so the page needs access to Google Fonts when viewed.
- A DESIGN.md brand file (colours, typography, layout rules)
- An agent with file write capability
- Google Fonts access for the chosen fonts
How do you trigger the skill with a natural request?
You do not need a special command. Describe the page you want in ordinary words and include one of the phrases the skill responds to. The listed triggers are waitlist page, coming soon page, pre-launch landing page, email capture page and launch page.
Give the agent the product name, a tagline and any style notes. The agent will then check your DESIGN.md and ask for anything it cannot find.
- Make a waitlist page for my design tool.
- Build a coming soon page for my note-taking app using my DESIGN.md.
- I need a pre-launch landing page with an email capture form.
What inputs does the skill map into the template?
The skill defines required inputs for the product name, tagline, and a set of colour expressions covering background, text, accent, decoration, stripe, input borders, button label, ticker, strokes, logo shadow and logo text. It also takes display and body font names, each in two forms: one for the Google Fonts URL and one for CSS.
Colours must be valid CSS in a supported form: hex, rgb or rgba, hsl or hsla, oklch, or color-mix() using local variables. Values containing characters such as semicolons, curly braces, angle brackets, comment markers, @, or url( are rejected. If you do not supply a success colour, the skill uses #2D6A4F as its fallback.
- Required: product name, tagline, colour expressions, display and body fonts
- Font names use + in the URL form (for example DM+Sans) and normal spacing in CSS form (for example DM Sans)
- The logo can be text initials, which are escaped by default, or an inline SVG that must pass sanitisation
What does the checklist check before the page is delivered?
The skill includes a checklist that must pass before the page is emitted. It checks that the page has exactly one primary call to action, which is the email field and submit button. It also checks that there is no countdown timer, no invented social proof numbers and no horizontal scroll at a 375px-wide viewport.
The form checks include a work email field with type email and required, a first name field without required, and a success message that announces to screen readers. The checklist also limits typography to two font families.
- Exactly one primary call to action
- No countdown timer and no invented social proof numbers
- No horizontal scroll at 375px
- Work email field uses type email and required
- Success message uses role status or aria-live polite
What people use it for
- A founder launching a beta with an early-access email list
- A designer whose brand is already documented in DESIGN.md and who needs a matching signup page
- A small team that needs a quick, mobile-friendly coming soon page
Frequently asked questions
How do I install the waitlist-page skill?
Download the ZIP from the skill page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can upload the ZIP under Settings → Capabilities → Skills instead.
What does the waitlist-page skill need to run?
It needs a DESIGN.md brand file in your project, an agent with file write capability, and access to Google Fonts for the fonts the template loads by URL. The skill asks for DESIGN.md before it continues because the output depends on it.
Does the skill run scripts or use the network?
According to the skill details, it runs no scripts and does use the network. The network use is the Google Fonts loading in the template.
Will the page collect emails automatically?
Not on its own. The skill builds the email form markup, but the files do not show a backend that stores emails, so you need to connect the form to your own service.
Does the skill add fake countdowns or scarcity messages?
No. The skill includes explicit rules against fake urgency such as fake countdowns or artificial scarcity, and its checklist fails any page with a countdown timer.
Is the waitlist-page skill free to use?
The skill is licensed under Apache-2.0. Check that licence for the terms that apply to your use.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a simple, honest pre-launch page that matches a DESIGN.md brand file and you are comfortable connecting the form to your own email storage. Pick something else if your project has no brand file, if you need the page to store emails out of the box, or if you need to embed raw custom HTML or untrusted SVG, since the sanitisation rules are described in prose and not enforced by code in these files.
Download the skill