--- 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 `