waitlist-page

A skill for Claude Code that builds high-converting waitlist and coming soon pages — from discovery through deployment and nurture emails — as a single HTML file.

---

What it does

The skill guides you through eight phases to build a complete pre-launch presence:

Phase	What happens
0. Discovery	Targeted questions about your product, audience, brand, and incentives
1. Design	Visual identity, design dials, style guide — approved before any code
2. Copy	Every word written first: headlines, CTAs, value props, micro-copy
3. Build	A single waitlist.html file with Tailwind CSS and Lucide Icons
4. Terms & Consent	Opt-in checkbox and T&C modal added to the form
5. Email Backend	Form wired to Mailchimp or GoHighLevel
6. Deployment	Live on a real domain via Vercel for ~$10/year
7. Nurture Emails	A 5-email sequence from signup confirmation through launch day

The output is a .html file you can open by double-clicking and deploy by dragging a folder to Netlify Drop or Vercel.

---

What makes the pages distinctive

The skill enforces a set of non-negotiable rules that prevent the "generic waitlist page" look:

• No centered dark hero with an email form — uses split layouts, typographic heroes, or product previews instead
• No three identical feature cards in a row
• No background blobs, glow effects, or decorative grid textures
• Off-white backgrounds, dark navy text — never pure white or pure black
• Display serif font (Fraunces, Playfair Display, Cormorant) paired with a sans-serif — never a single generic font
• Copy rules enforced throughout: no exclamation points, no em dashes, no buzzwords, specific over vague

---

Install

This skill is part of the Superpowers plugin ecosystem. Install via the Claude Code plugin manager:

claude plugin install superpowers

Or install individually by placing SKILL.md and the references/ folder in your Claude Code skills directory:

~/.claude/skills/waitlist-page/
  SKILL.md
  references/
    copy-frameworks.md
    deployment.md
    design-system.md
    email-backends.md
    email-nurture.md

---

Use

Start a conversation and describe what you want to build. The skill triggers automatically on phrases like:

• "Build a waitlist page for my product"
• "I want to collect emails before launch"
• "Create a coming soon page"
• "Pre-launch signup page"

Or invoke it directly:

/waitlist-page

Claude will ask 5–7 discovery questions before writing a single line of code, then walk you through the full eight-phase process.

---

Tech stack

• Tailwind CSS via CDN — no install needed
• Lucide Icons via CDN — no install needed
• Google Fonts via CDN — font pairing chosen during the design phase
• Plain HTML + JavaScript — opens in any browser, deploys anywhere
• Mailchimp or GoHighLevel — for email capture (optional, wired up in Phase 5)

---

Reference files

The references/ folder contains supporting guides the skill reads during each phase:

File	Purpose
design-system.md	Design dials, creative toolkit, forbidden patterns, component standards
copy-frameworks.md	Headline formulas, CTA patterns, urgency language, social proof formats
email-backends.md	Integration guides for Mailchimp, ConvertKit, Resend, and custom webhooks
email-nurture.md	Mailchimp and GHL setup, 5-email sequence templates, writing rules
deployment.md	Vercel deployment, domain purchasing at Porkbun or Namecheap, DNS steps