waitlist-page

name	waitlist-page
description	Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.
triggers	["waitlist page","coming soon page","pre-launch landing page","email capture page","launch page"]
od	{"mode":"prototype","platform":"desktop","scenario":"marketing","featured":1,"preview":{"type":"html","entry":"example.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"inputs":[{"name":"product_name","type":"string","required":true},{"name":"tagline","type":"string","required":true},{"name":"bg_expression","type":"string","description":"CSS color expression for background (e.g., '#FDE8DF' or 'rgba(...)').","required":true},{"name":"fg_expression","type":"string","description":"CSS color expression for text and primary shapes (e.g., '#1A1410' or 'rgba(...)').","required":true},{"name":"accent_expression","type":"string","description":"CSS color expression for brand badge and highlights.","required":true},{"name":"deco_expression","type":"string","description":"CSS color expression for decoration primary.","required":true},{"name":"stripe_expression","type":"string","description":"CSS color expression for accent stripe.","required":true},{"name":"border_expression","type":"string","description":"CSS color expression for input borders (e.g., 'rgba(100,50,30,0.38)' or 'color-mix(in srgb, var(--fg) 38%, transparent)'). Must be valid CSS.","required":true},{"name":"success_expression","type":"string","description":"CSS color expression for success message. Defaults to #2D6A4F if not in DESIGN.md.","required":true},{"name":"btn_label_expression","type":"string","description":"CSS color expression for button label text (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure WCAG AA contrast.","required":true},{"name":"ticker_bg_expression","type":"string","description":"CSS color expression for ticker background (e.g., 'rgba(0,0,0,0.9)'). Must be valid CSS.","required":true},{"name":"ticker_fg_expression","type":"string","description":"CSS color expression for ticker text (e.g., 'rgba(255,255,255,0.9)'). Ensure contrast.","required":true},{"name":"deco_stroke_expression","type":"string","description":"CSS color expression for SVG strokes (e.g., 'rgba(0,0,0,0.12)'). Typically a muted foreground or neutral.","required":true},{"name":"logo_shadow_expression","type":"string","description":"CSS color expression for logo container shadow (e.g., 'rgba(0,0,0,0.08)'). Typically a subtle foreground shade.","required":true},{"name":"logo_fg_expression","type":"string","description":"CSS color expression for logo text/initials (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure contrast against accent.","required":true},{"name":"logo_mark","type":"string","description":"Text initials are HTML-escaped by default. Inline SVG is allowed only after strict allowlist-based sanitization (removing scripts, event handlers, foreignObject, and external references); unsafe input falls back to escaped text.","required":false},{"name":"display_font_url","type":"string","description":"Display font name with spaces encoded as '+' (e.g., 'Syne', 'DM+Sans'). Used in Google Fonts URL.","required":true},{"name":"display_font_css","type":"string","description":"Display font name as it appears in CSS (e.g., 'Syne', 'DM Sans'). Already quoted if needed; no extra quotes in template.","required":true},{"name":"body_font_url","type":"string","description":"Body font name with spaces encoded as '+' (e.g., 'DM+Sans', 'IBM+Plex+Serif'). Used in Google Fonts URL.","required":true},{"name":"body_font_css","type":"string","description":"Body font name as it appears in CSS (e.g., 'DM Sans', 'IBM Plex Serif'). Already quoted if needed; no extra quotes in template.","required":true}],"outputs":{"primary":"index.html"},"capabilities_required":["file_write"],"example_prompt":"Make a waitlist page for a design tool — clean, minimal, with a custom logo and one call-to-action."}

Waitlist Page Skill

Pre-launch pages are your first handshake with future users. This skill builds a focused, honest entrance: your brand identity, what you're making, one clear path to join the early list. No artificial scarcity, no fake countdown, no inflation tactics—just a clean, mobile-first vessel for genuine interest.

Workflow

Preflight: Load hardened template and brand foundation

0. Load the brand identity — Read DESIGN.md for the color system, font pairing, and spatial rules. This is your foundation. A waitlist page lives or dies by consistency with the brand it represents. If DESIGN.md is missing, ask the user to provide one before you proceed.
1. Read and copy the reusable template — Read assets/template.html. This template is the hardened seed for all outputs. Copy it to index.html as your base. Do not write HTML from scratch or deviate from this structure. The template has all required layout, form structure, decorations, focus styles, and accessibility scaffolding baked in.

Steps: Token replacement with validation and escaping

2. Map tokens from inputs — For each placeholder in the template (e.g., {{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}}), follow the replacement rules below:
   • Text tokens ({{PRODUCT_NAME}}, {{TAGLINE}}): HTML-escape <, >, &, ", ' before insertion into HTML text nodes or attribute values.
   • HTML tokens ({{LOGO_MARK}}): If using text initials, HTML-escape them by default. If using inline SVG, you must strictly sanitize it using an allowlist: strip <script> tags, event handlers (on*), <foreignObject>, external refs (href, xlink:href, url()), and any disallowed attributes/elements before insertion. If the SVG cannot be safely sanitized, fallback to escaped text initials. Never emit raw, unsanitized arbitrary HTML. Ensure any SVG scales cleanly within its container.
   • Color expression tokens ({{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, , , , , , , , , , ): Must strictly adhere to an explicit color grammar (, /, /, , or using only local variables). Hard reject any input containing , , , , comments (), , , or external refs to prevent CSS injection. Do not wrap in or add extra quotes. Examples: , , . Insert as-is into CSS variables. Derive from DESIGN.md if present; otherwise use the allowed fallback only.