Merge origin/main into fix-image-timeout

apps/daemon/src/native-folder-dialog.ts

@@ -0,0 +1,39 @@
+export interface NativeFolderDialogCommand {
+  command: string;
+  args: string[];
+}
+
+const WINDOWS_FOLDER_DIALOG_SCRIPT = [
+  'Add-Type -AssemblyName System.Windows.Forms;',
+  '$owner = New-Object System.Windows.Forms.Form;',
+  "$owner.Text = 'Open Design';",
+  '$owner.TopMost = $true;',
+  '$owner.ShowInTaskbar = $true;',
+  "$owner.StartPosition = 'CenterScreen';",
+  '$owner.Width = 1;',
+  '$owner.Height = 1;',
+  '$dialog = New-Object System.Windows.Forms.FolderBrowserDialog;',
+  "$dialog.Description = 'Select a code folder to link';",
+  '$dialog.ShowNewFolderButton = $false;',
+  'try {',
+  '  if ($dialog.ShowDialog($owner) -eq [System.Windows.Forms.DialogResult]::OK) { $dialog.SelectedPath }',
+  '} finally {',
+  '  $owner.Dispose();',
+  '}',
+].join(' ');
+
+export function buildWindowsFolderDialogCommand(): NativeFolderDialogCommand {
+  return {
+    command: 'powershell.exe',
+    args: ['-NoProfile', '-Sta', '-Command', WINDOWS_FOLDER_DIALOG_SCRIPT],
+  };
+}
+
+export function parseFolderDialogStdout(error: unknown, stdout: string): string | null {
+  if (error) {
+    return null;
+  }
+
+  const selectedPath = stdout.trim();
+  return selectedPath.length > 0 ? selectedPath : null;
+}

apps/daemon/src/server.ts

@@ -31,6 +31,7 @@ import {
 import { migrateLegacyDataDirSync } from './legacy-data-migrator.js';
 import { findSkillById, listSkills } from './skills.js';
 import { validateLinkedDirs } from './linked-dirs.js';
+import { buildWindowsFolderDialogCommand, parseFolderDialogStdout } from './native-folder-dialog.js';
 import { listCodexPets, readCodexPetSpritesheet } from './codex-pets.js';
 import { syncCommunityPets } from './community-pets-sync.js';
 import { listDesignSystems, readDesignSystem } from './design-systems.js';
@@ -1096,11 +1097,9 @@ function openNativeFolderDialog() {
         },
       );
     } else if (platform === 'win32') {
-      const ps = "Add-Type -AssemblyName System.Windows.Forms; $d = New-Object System.Windows.Forms.FolderBrowserDialog; $d.Description = 'Select a code folder to link'; if ($d.ShowDialog() -eq 'OK') { $d.SelectedPath }";
-      execFile('powershell.exe', ['-NoProfile', '-Command', ps], { timeout: 120_000 }, (err, stdout) => {
-        if (err) return resolve(null);
-        const p = stdout.trim();
-        resolve(p || null);
+      const command = buildWindowsFolderDialogCommand();
+      execFile(command.command, command.args, { timeout: 120_000 }, (err, stdout) => {
+        resolve(parseFolderDialogStdout(err, stdout));
       });
     } else {
       resolve(null);

apps/daemon/tests/native-folder-dialog.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildWindowsFolderDialogCommand,
+  parseFolderDialogStdout,
+} from '../src/native-folder-dialog.js';
+
+describe('native folder dialog helpers', () => {
+  it('builds the Windows folder picker command with STA mode', () => {
+    const command = buildWindowsFolderDialogCommand();
+
+    expect(command.command).toBe('powershell.exe');
+    expect(command.args).toContain('-NoProfile');
+    expect(command.args).toContain('-Sta');
+    expect(command.args).toContain('-Command');
+  });
+
+  it('creates a topmost owner form for the Windows dialog', () => {
+    const script = buildWindowsFolderDialogCommand().args[3] ?? '';
+
+    expect(script).toContain('$owner = New-Object System.Windows.Forms.Form;');
+    expect(script).toContain('$owner.TopMost = $true;');
+    expect(script).toContain('$owner.ShowInTaskbar = $true;');
+    expect(script).toContain("$owner.StartPosition = 'CenterScreen';");
+  });
+
+  it('passes the owner form into the Windows folder picker', () => {
+    const script = buildWindowsFolderDialogCommand().args[3] ?? '';
+
+    expect(script).toContain('$dialog = New-Object System.Windows.Forms.FolderBrowserDialog;');
+    expect(script).toContain('$dialog.ShowNewFolderButton = $false;');
+    expect(script).toContain('$dialog.ShowDialog($owner)');
+    expect(script).toContain('$owner.Dispose();');
+  });
+
+  it('parses a selected folder path from stdout', () => {
+    expect(parseFolderDialogStdout(null, 'C:\\Users\\Ada\\Project\r\n')).toBe('C:\\Users\\Ada\\Project');
+  });
+
+  it('returns null when the dialog is cancelled', () => {
+    expect(parseFolderDialogStdout(null, '\r\n')).toBeNull();
+  });
+
+  it('returns null when the native dialog command fails', () => {
+    expect(parseFolderDialogStdout(new Error('cancelled'), 'C:\\Users\\Ada\\Project\r\n')).toBeNull();
+  });
+});

apps/web/src/i18n/content.fr.ts

@@ -324,6 +324,7 @@ export const FR_SKILL_IDS_WITH_EN_FALLBACK = [
   'web-prototype-taste-brutalist',
   'web-prototype-taste-editorial',
   'web-prototype-taste-soft',
+  'waitlist-page',
 ] as const;
 
 export const FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [

apps/web/src/i18n/content.ru.ts

@@ -324,6 +324,7 @@ export const RU_SKILL_IDS_WITH_EN_FALLBACK = [
   'web-prototype-taste-brutalist',
   'web-prototype-taste-editorial',
   'web-prototype-taste-soft',
+  'waitlist-page',
 ] as const;
 
 export const RU_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [

apps/web/src/i18n/content.ts

@@ -373,6 +373,7 @@ const DE_SKILL_IDS_WITH_EN_FALLBACK = [
   'web-prototype-taste-brutalist',
   'web-prototype-taste-editorial',
   'web-prototype-taste-soft',
+  'waitlist-page',
 ] as const;
 
 const DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [

apps/web/src/i18n/locales/id.ts

@@ -68,17 +68,18 @@ export const id: Dict = {
   'settings.testTitle': 'Kirim prompt kecil untuk memverifikasi koneksi',
   'settings.testRunning': 'Menguji koneksi...',
   'settings.testCancel': 'Batal',
-  'settings.testSuccessApi': 'Terhubung. Membalas dalam {ms} md — \'{sample}\'',
+  'settings.testSuccessApi': 'Tersambung. Membalas dalam {ms} md — \'{sample}\'',
   'settings.testSuccessCli': '{agentName} membalas dalam {ms} md — \'{sample}\'',
-  'settings.testAuthFailed': 'Autentikasi gagal. Periksa API key.',
-  'settings.testForbidden': 'Akses ditolak. Verifikasi akun, region, atau organisasi.',
+  'settings.testAuthFailed': 'Autentikasi gagal. Periksa API key kamu.',
+  'settings.testForbidden': 'Akses ditolak. Verifikasi akun, wilayah, atau organisasi kamu.',
   'settings.testNotFoundModel': 'Model \'{model}\' tidak ditemukan di endpoint ini.',
-  'settings.testInvalidModelId': 'ID model \'{model}\' tidak valid. ID kustom harus diawali huruf atau angka dan tanpa spasi.',
+  'settings.testInvalidModelId':
+    'ID model \'{model}\' tidak valid. ID kustom harus diawali huruf atau angka dan tidak boleh berisi spasi.',
   'settings.testInvalidBaseUrl': 'Base URL tidak valid atau tidak dapat dijangkau.',
-  'settings.testRateLimited': 'Provider membatasi laju tes. Konfigurasi terlihat valid.',
+  'settings.testRateLimited': 'Provider membatasi laju tes. Konfigurasi tampak valid.',
   'settings.testUpstream': 'Provider mengembalikan {status}. Coba lagi sebentar lagi.',
-  'settings.testTimeout': 'Tes timeout setelah {ms} md.',
-  'settings.testAgentMissing': '{agentName} belum terpasang atau tidak ada di PATH.',
+  'settings.testTimeout': 'Tes melewati batas waktu setelah {ms} md.',
+  'settings.testAgentMissing': '{agentName} tidak terpasang atau tidak ada di PATH.',
   'settings.testAgentSpawn': 'Tidak dapat memulai {agentName}: {detail}.',
   'settings.testUnknown': 'Tes gagal: {detail}',
   'settings.noAgentsDetected':
@@ -836,8 +837,8 @@ export const id: Dict = {
   'sketch.undo': 'Undo',
   'sketch.clear': 'Bersihkan',
   'sketch.close': 'Tutup',
-  'sketch.textModalTitle': 'Tambahkan teks',
   'sketch.textPrompt': 'Teks',
+  'sketch.textModalTitle': 'Tambah teks',
 
   'pet.title': 'Teman kerja',
   'pet.subtitle': 'Pilih teman kecil untuk melayang di workspace.',

apps/web/src/index.css

@@ -969,15 +969,6 @@ code {
   white-space: nowrap;
 }
 
-.composer-import-item-enabled {
-  cursor: pointer;
-  color: var(--text);
-}
-.composer-import-item-enabled:hover {
-  background: var(--bg-subtle);
-  color: var(--text);
-}
-
 .user-attachments {
   display: flex;
   gap: 6px;
@@ -4550,6 +4541,9 @@ button.connector-action.is-loading {
   flex: 1 1 auto;
   min-width: 0;
   height: 100%;
+  /* thinner scrollbar to avoid overlap */
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
 }
 
 .ws-tab {
@@ -8259,6 +8253,14 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   background: var(--bg-subtle);
   color: var(--text);
 }
+.composer-import-item-enabled {
+  cursor: pointer;
+  color: var(--text);
+}
+.composer-import-item-enabled:hover {
+  background: var(--bg-subtle);
+  color: var(--text);
+}
 .composer-import-item-label { flex: 1; }
 .composer-import-item-soon {
   font-size: 10px;

skills/waitlist-page/SKILL.md

@@ -0,0 +1,229 @@
+---
+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}}`, `{{DECO_EXPRESSION}}`, `{{STRIPE_EXPRESSION}}`, `{{SUCCESS_EXPRESSION}}`, `{{BORDER_EXPRESSION}}`, `{{BTN_LABEL_EXPRESSION}}`, `{{TICKER_BG_EXPRESSION}}`, `{{TICKER_FG_EXPRESSION}}`, `{{DECO_STROKE_EXPRESSION}}`, `{{LOGO_SHADOW_EXPRESSION}}`, `{{LOGO_FG_EXPRESSION}}`): Must strictly adhere to an explicit color grammar (`#hex`, `rgb`/`rgba`, `hsl`/`hsla`, `oklch`, or `color-mix()` using only local variables). Hard reject any input containing `;`, `{}`, `<`, `>`, comments (`/*`), `@`, `url(`, or external refs to prevent CSS injection. Do not wrap in `#` or add extra quotes. Examples: `rgba(196, 169, 154, 0.38)`, `color-mix(in srgb, var(--fg) 38%, transparent)`, `#FDE8DF`. Insert as-is into `:root` CSS variables. Derive `--success` from DESIGN.md if present; otherwise use the allowed fallback `#2D6A4F` only.
+   - **Font name tokens** (`{{DISPLAY_FONT_CSS}}`, `{{BODY_FONT_CSS}}`): These are CSS font-family values, already quoted if they contain spaces (e.g., `'DM Sans'`, `Syne`). Insert as-is into `--font-display` and `--font-body` declarations; do NOT add extra quotes.
+   - **Font URL tokens** (`{{DISPLAY_FONT_URL}}`, `{{BODY_FONT_URL}}`): Spaces must be encoded as `+` for the Google Fonts URL (e.g., `DM+Sans`, `IBM+Plex+Serif`). Validate the URL is well-formed before insertion.
+3. **Verify token mapping rules** — All color tokens are now in CSS variables:
+   - `--bg` = `{{BG_EXPRESSION}}` (e.g., `#FDE8DF`)
+   - `--fg` = `{{FG_EXPRESSION}}` (e.g., `#1A1410`)
+   - `--accent` = `{{ACCENT_EXPRESSION}}` (brand badge)
+   - `--deco` = `{{DECO_EXPRESSION}}` (decoration primary)
+   - `--deco-stripe` = `{{STRIPE_EXPRESSION}}` (accent stripe)
+   - `--input-border` = `{{BORDER_EXPRESSION}}` (full CSS expression with opacity)
+   - `--success` = `{{SUCCESS_EXPRESSION}}` or `#2D6A4F` fallback
+   - `--btn-label` = `{{BTN_LABEL_EXPRESSION}}` (button text color for contrast)
+   - `--ticker-bg` = `{{TICKER_BG_EXPRESSION}}` (animated ticker background)
+   - `--ticker-fg` = `{{TICKER_FG_EXPRESSION}}` (animated ticker text)
+   - `--deco-stroke` = `{{DECO_STROKE_EXPRESSION}}` (SVG strokes, typically muted with 12–15% opacity)
+   - `--logo-shadow` = `{{LOGO_SHADOW_EXPRESSION}}` (logo container shadow, subtle foreground shade)
+   - `--logo-fg` = `{{LOGO_FG_EXPRESSION}}` (contrasting text color for logo initials)
+4. **Responsive layout** — The template includes mobile-first scaling:
+   - 375px: form stacks to single column, logo shrinks to 40px, decoration compresses, no horizontal scroll.
+   - 768px: comfortable two-column breathing room.
+   - 1440px+: centered layout with generous whitespace.
+   - Verify all text remains readable and the email input + button are fully visible (no clipping) at 375×667 and 390×844.
+
+### Validation: Run hardened quality gates before emitting
+
+5. **Run the quality checklist** — Read `references/checklist.md`. Validate every **P0 gate** before emitting:
+   - Exactly one CTA (email form)
+   - No countdown timer, no fake social proof, no emoji
+   - No horizontal scroll at 375px
+   - Email input has `type="email"` and `required`; first name has no `required`
+   - Form does NOT use `novalidate`; JS uses `checkValidity()` guard
+   - Success message has `role="status"` or `aria-live="polite"`
+   - All colors from DESIGN.md or allowed fallback; **no invented hex values**
+   - All user text is HTML-escaped; color tokens adhere to strict grammar; fonts are URL-encoded
+   - **Pass P0 or do not emit.** If any P0 gate fails, ask the user or fix the token mappings and try again.
+6. **Verify P1 gates** for quality submission (recommended):
+   - Hover and active states on submit button
+   - Form validation with clear feedback
+   - Ticker animation respects `prefers-reduced-motion: reduce`
+   - All interactive elements have visible focus styles (input:focus includes `outline`)
+   - Tab/Enter keyboard support
+   - WCAG AA contrast for body text (≥4.5:1) and button label (≥4.5:1)
+   - Logo alt/aria-label present; ticker has `aria-hidden="true"`
+   - `<html lang="">` is set
+
+### Output
+
+7. **Emit clean HTML** — Single file, CSS inlined, SVG for graphics. Mark interactive elements with `data-od-id` (headline, form, logo, ticker, grid, etc.) so agents can customize without parsing.
+
+## Quality gates
+
+This skill enforces a hardened, template-based workflow to ensure compliance. **You must follow this execution path; deviating from the template disqualifies the output.**
+
+**Mandatory template-based execution:**
+- Read `assets/template.html` as your base; do not write HTML from scratch.
+- Copy it to `index.html` and replace only the `{{PLACEHOLDER}}` tokens with validated/escaped values.
+- Run every P0 gate in `references/checklist.md` before emitting; if any fail, fix and re-validate.
+
+**P0 gates (must pass):**
+- Single CTA: Email form is the only interactive element. No nav, no secondary buttons, no social links.
+- Logo placement: Fixed top-left, matches DESIGN.md accent color, scales down on mobile (50px → 40px).
+- Color consistency: Every color from DESIGN.md palette. Only allowed hardcoded exception: `#2D6A4F` for `--success`.
+- No anti-patterns: No countdown timer, no fake social proof, no emoji icons, no lorem ipsum.
+- Content integrity: Headline and copy tie directly to `product_name` and `tagline` inputs—no filler copy.
+- Mobile fit: No horizontal scroll at 375px. Email input and submit button are fully visible (no clipping) at 375×667 and 390×844. Vertical overflow is scrollable, not hidden.
+- Typographic discipline: Display + body fonts only (2-font rule). Consistent sizing across sections.
+- Form structure: Two fields (first name optional, email required), `checkValidity()` guard, success message with `role="status"`.
+- Token escaping: All user-supplied text HTML-escaped; color tokens adhere to strict grammar and contain no unsafe characters (`;`, `{}`, `<`, `>`, `/*`, `@`, `url(`); font names are URL-encoded; `{{LOGO_MARK}}` is escaped text initials or strictly sanitized inline SVG (no scripts, no event handlers, no foreignObject, no external hrefs).
+
+**P1 gates (should pass for quality submission):**
+- Hero section visually distinct and above-the-fold.
+- Email submit button has hover and active states.
+- Form validation provides clear feedback.
+- Page scrollable (not clipped) at all mobile viewports; CTA visible without scroll.
+- Ticker animation paused/removed under `prefers-reduced-motion: reduce`.
+- All interactive elements have visible focus styles (outline, not just outline:none).
+- Keyboard: Tab reaches each form field; Enter submits.
+- WCAG AA contrast: Body text ≥4.5:1, button label ≥4.5:1.
+- Logo alt/aria-label present; ticker has `aria-hidden="true"`.
+- `<html lang="">` set to correct language code.
+
+**Decoration restraint:**
+- Lower zone enhances without distraction. Opacity, subtle strokes, muted animation.
+- No gradient that spans more than 20% of viewport height.
+- Coil, stripe, grid, or ticker all use colors from DESIGN.md only.
+
+## Output
+
+**Only emit after all P0 gates in `references/checklist.md` pass.**
+
+Emit the artifact between tags:
+
+```
+<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
+<!doctype html>
+<html lang="en">
+...
+</html>
+</artifact>
+```
+
+One line of description above the artifact; nothing below.
+
+**Post-emission:** If the user asks for changes, update the index.html in-place and re-run the P0 checklist gates before emitting the next version. Do not skip validation on iterations.

skills/waitlist-page/assets/template.html

@@ -0,0 +1,457 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{PRODUCT_NAME}} — Coming Soon</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family={{DISPLAY_FONT_URL}}:wght@700;800&family={{BODY_FONT_URL}}:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg: {{BG_EXPRESSION}};
+      --fg: {{FG_EXPRESSION}};
+      --accent: {{ACCENT_EXPRESSION}};
+      --deco: {{DECO_EXPRESSION}};
+      --deco-stripe: {{STRIPE_EXPRESSION}};
+      --input-border: {{BORDER_EXPRESSION}};
+      --success: {{SUCCESS_EXPRESSION}};
+      --btn-label: {{BTN_LABEL_EXPRESSION}};
+      --ticker-bg: {{TICKER_BG_EXPRESSION}};
+      --ticker-fg: {{TICKER_FG_EXPRESSION}};
+      --deco-stroke: {{DECO_STROKE_EXPRESSION}};
+      --logo-shadow: {{LOGO_SHADOW_EXPRESSION}};
+      --logo-fg: {{LOGO_FG_EXPRESSION}};
+      --font-body: {{BODY_FONT_CSS}}, sans-serif;
+      --font-display: {{DISPLAY_FONT_CSS}}, serif;
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    html, body {
+      height: 100%;
+      overflow-x: hidden;
+    }
+
+    body {
+      font-family: var(--font-body);
+      background-color: var(--bg);
+      color: var(--fg);
+      display: flex;
+      flex-direction: column;
+      min-height: 100svh;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    /* Logo — reusable component */
+    .logo {
+      position: absolute;
+      top: 20px;
+      left: 24px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      z-index: 10;
+    }
+
+    .logo-container {
+      width: 48px;
+      height: 48px;
+      flex-shrink: 0;
+      border-radius: 50%;
+      background: var(--accent);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      color: var(--logo-fg);
+      font-family: var(--font-display);
+      font-size: 20px;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+    }
+
+    .logo-container svg {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .logo-text {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .logo-name {
+      font-family: var(--font-display);
+      font-weight: 700;
+      font-size: 16px;
+      color: var(--fg);
+    }
+
+    .logo-dot {
+      font-size: 8px;
+      color: var(--accent);
+      opacity: 0.6;
+    }
+
+    /* Upper section — hero */
+    .upper {
+      flex: 0 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 60px 24px 40px;
+      position: relative;
+      z-index: 2;
+    }
+
+    .headline {
+      font-family: var(--font-display);
+      font-weight: 800;
+      font-size: clamp(48px, 7vw, 80px);
+      letter-spacing: -0.02em;
+      line-height: 1.1;
+      color: var(--fg);
+      max-width: 900px;
+      margin: 0 auto 18px;
+    }
+
+    .subtext {
+      font-size: clamp(14px, 1.3vw, 16px);
+      font-weight: 400;
+      line-height: 1.5;
+      color: var(--fg);
+      opacity: 0.75;
+      max-width: 480px;
+      margin-bottom: 40px;
+    }
+
+    /* Form */
+    .form-row {
+      display: flex;
+      gap: 8px;
+      width: 100%;
+      max-width: 560px;
+      justify-content: center;
+    }
+
+    .form-row input {
+      flex: 1;
+      min-width: 0;
+      padding: 14px 16px;
+      font-family: var(--font-body);
+      font-size: 14px;
+      color: var(--fg);
+      background: transparent;
+      border: 1.5px solid var(--input-border);
+      border-radius: 3px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+
+    .form-row input::placeholder {
+      color: var(--input-border);
+      opacity: 0.7;
+    }
+
+    .form-row input:focus {
+      border-color: var(--fg);
+      outline: 2px solid var(--fg);
+      outline-offset: 2px;
+    }
+
+    .form-row button {
+      flex-shrink: 0;
+      padding: 14px 24px;
+      font-family: var(--font-body);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--btn-label);
+      background: var(--fg);
+      border: none;
+      border-radius: 2px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: opacity 0.15s;
+    }
+
+    .form-row button:hover {
+      opacity: 0.85;
+    }
+
+    .success-msg {
+      display: none;
+      margin-top: 16px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--success);
+    }
+
+    .success-msg.visible {
+      display: block;
+    }
+
+    /* Decoration section */
+    .deco-section {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      min-height: 25vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Coil pattern */
+    .coil-row {
+      display: block;
+      width: 100%;
+      height: 60px;
+      flex-shrink: 0;
+      background: var(--bg);
+    }
+
+    /* Accent stripe */
+    .stripe {
+      width: 100%;
+      height: 12px;
+      background: var(--deco-stripe);
+      flex-shrink: 0;
+    }
+
+    /* Floor with grid */
+    .grid-floor {
+      flex: 1;
+      position: relative;
+      background-color: var(--deco);
+      min-height: 80px;
+    }
+
+    .grid-svg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    /* Ticker ribbon */
+    .ticker-wrap {
+      width: 100%;
+      overflow: hidden;
+      background: var(--ticker-bg);
+      padding: 10px 0;
+      flex-shrink: 0;
+    }
+
+    .ticker-track {
+      display: flex;
+      gap: 24px;
+      white-space: nowrap;
+      animation: ticker-scroll 20s linear infinite;
+    }
+
+    .ticker-unit {
+      font-family: var(--font-body);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ticker-fg);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-right: -12px;
+    }
+
+    .ticker-star {
+      color: var(--deco-stripe);
+      margin-right: 4px;
+    }
+
+    @keyframes ticker-scroll {
+      from { transform: translateX(0); }
+      to   { transform: translateX(-50%); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .ticker-track {
+        animation: none;
+      }
+    }
+
+    /* Responsive */
+    @media (max-width: 600px) {
+      .logo {
+        left: 16px;
+        top: 16px;
+      }
+
+      .logo-container {
+        width: 40px;
+        height: 40px;
+      }
+
+      .logo-name {
+        font-size: 13px;
+      }
+
+      .upper {
+        padding: 50px 20px 30px;
+      }
+
+      .headline {
+        margin: 0 auto 12px;
+      }
+
+      .subtext {
+        margin-bottom: 30px;
+      }
+
+      .form-row {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .form-row input,
+      .form-row button {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Logo placeholder — replace or customize -->
+  <div class="logo">
+    <div class="logo-container" data-od-id="logo-mark">
+      {{LOGO_MARK}}
+    </div>
+    <div class="logo-text">
+      <span class="logo-name" data-od-id="logo-name">{{PRODUCT_NAME}}</span>
+      <span class="logo-dot">·</span>
+    </div>
+  </div>
+
+  <!-- Hero section -->
+  <section class="upper">
+    <h1 class="headline" data-od-id="headline">{{PRODUCT_NAME}}<br>is launching</h1>
+    <p class="subtext" data-od-id="tagline">{{TAGLINE}}</p>
+
+    <form class="form-row" id="waitlist-form" data-od-id="form">
+      <input type="text" name="firstname" placeholder="First name">
+      <input type="email" name="email" placeholder="Work email" required>
+      <button type="submit">Join Waitlist</button>
+    </form>
+    <p class="success-msg" id="success-msg" role="status">You're on the list. We'll be in touch.</p>
+  </section>
+
+  <!-- Decorative section -->
+  <div class="deco-section">
+
+    <!-- Coil pattern (optional) -->
+    <svg class="coil-row" viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" data-od-id="coil">
+      <g fill="none" style="stroke: var(--deco-stroke);" stroke-width="1.5">
+        <path d="M 9,60 A 41,30 0 0 1 91,60"/>
+        <path d="M 94,60 A 41,30 0 0 1 176,60"/>
+        <path d="M 179,60 A 41,30 0 0 1 261,60"/>
+        <path d="M 264,60 A 41,30 0 0 1 346,60"/>
+        <path d="M 349,60 A 41,30 0 0 1 431,60"/>
+        <path d="M 434,60 A 41,30 0 0 1 516,60"/>
+        <path d="M 519,60 A 41,30 0 0 1 601,60"/>
+        <path d="M 604,60 A 41,30 0 0 1 686,60"/>
+        <path d="M 689,60 A 41,30 0 0 1 771,60"/>
+        <path d="M 774,60 A 41,30 0 0 1 856,60"/>
+        <path d="M 859,60 A 41,30 0 0 1 941,60"/>
+        <path d="M 944,60 A 41,30 0 0 1 1026,60"/>
+        <path d="M 1029,60 A 41,30 0 0 1 1111,60"/>
+        <path d="M 1114,60 A 41,30 0 0 1 1196,60"/>
+        <path d="M 1199,60 A 41,30 0 0 1 1281,60"/>
+        <path d="M 1284,60 A 41,30 0 0 1 1366,60"/>
+        <path d="M 1369,60 A 41,30 0 0 1 1451,60"/>
+      </g>
+    </svg>
+
+    <!-- Accent stripe -->
+    <div class="stripe" data-od-id="stripe"></div>
+
+    <!-- Floor with perspective grid -->
+    <div class="grid-floor">
+      <svg class="grid-svg" viewBox="0 0 1280 400" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" data-od-id="grid">
+        <g style="stroke: var(--deco-stroke);" stroke-width="1" fill="none">
+          <!-- Radiating lines from center top -->
+          <line x1="640" y1="0" x2="0"    y2="400"/>
+          <line x1="640" y1="0" x2="128"  y2="400"/>
+          <line x1="640" y1="0" x2="256"  y2="400"/>
+          <line x1="640" y1="0" x2="384"  y2="400"/>
+          <line x1="640" y1="0" x2="512"  y2="400"/>
+          <line x1="640" y1="0" x2="640"  y2="400"/>
+          <line x1="640" y1="0" x2="768"  y2="400"/>
+          <line x1="640" y1="0" x2="896"  y2="400"/>
+          <line x1="640" y1="0" x2="1024" y2="400"/>
+          <line x1="640" y1="0" x2="1152" y2="400"/>
+          <line x1="640" y1="0" x2="1280" y2="400"/>
+          <!-- Horizontal grid lines -->
+          <line x1="0" y1="80"  x2="1280" y2="80"/>
+          <line x1="0" y1="160" x2="1280" y2="160"/>
+          <line x1="0" y1="240" x2="1280" y2="240"/>
+          <line x1="0" y1="320" x2="1280" y2="320"/>
+        </g>
+      </svg>
+    </div>
+  </div>
+
+  <!-- Ticker ribbon -->
+  <div class="ticker-wrap" aria-hidden="true" data-od-id="ticker">
+    <div class="ticker-track">
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <!-- Duplicate for seamless loop -->
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
+    </div>
+  </div>
+
+  <script>
+    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
+      e.preventDefault();
+      if (!this.checkValidity()) {
+        this.reportValidity();
+        return;
+      }
+      this.style.display = 'none';
+      document.getElementById('success-msg').classList.add('visible');
+    });
+  </script>
+
+</body>
+</html>

skills/waitlist-page/example.html

@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Meridian — Coming Soon</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg: #FDE8DF;
+      --fg: #1A1410;
+      --color-ink: #1A1410;
+      --accent: #1A1410;
+      --deco: #E8835A;
+      --deco-logo: #E8522A;
+      --deco-stripe: #F5A623;
+      --input-border: rgba(196, 169, 154, 0.38);
+      --success: #2D6A4F;
+      --btn-label: #FDE8DF;
+      --ticker-bg: rgba(0, 0, 0, 0.9);
+      --ticker-fg: rgba(255, 255, 255, 0.9);
+      --deco-stroke: rgba(0, 0, 0, 0.12);
+      --logo-shadow: rgba(0, 0, 0, 0.08);
+      --font-body: 'DM Sans', sans-serif;
+      --font-display: 'Syne', sans-serif;
+    }
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    html, body {
+      height: 100%;
+      overflow-x: hidden;
+    }
+    .logo {
+      position: absolute;
+      top: 20px;
+      left: 24px;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      z-index: 10;
+    }
+    .logo-container {
+      width: 48px;
+      height: 48px;
+      flex-shrink: 0;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--deco-logo) 0%, var(--deco) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      box-shadow: 0 2px 8px var(--logo-shadow);
+    }
+    .logo-svg {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      padding: 2px;
+    }
+    .logo-text {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-shrink: 0;
+    }
+    .logo-name {
+      font-family: var(--font-display);
+      font-weight: 700;
+      font-size: 18px;
+      letter-spacing: -0.02em;
+      color: var(--color-ink);
+    }
+    .logo-dot {
+      font-size: 10px;
+      color: var(--deco-logo);
+      opacity: 0.6;
+    }
+    body {
+      font-family: var(--font-body);
+      background-color: var(--bg);
+      color: var(--fg);
+      display: flex;
+      flex-direction: column;
+      min-height: 100svh;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    .upper {
+      flex: 0 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 60px 24px 40px;
+      position: relative;
+      z-index: 2;
+    }
+    .headline {
+      font-family: var(--font-display);
+      font-weight: 800;
+      font-size: clamp(56px, 8vw, 96px);
+      letter-spacing: -0.03em;
+      line-height: 1.0;
+      color: var(--fg);
+      text-align: center;
+      max-width: 900px;
+      margin: 0 auto 22px;
+    }
+    .subtext {
+      font-size: clamp(15px, 1.5vw, 18px);
+      font-weight: 400;
+      line-height: 1.6;
+      color: var(--fg);
+      max-width: 420px;
+      margin-bottom: 44px;
+    }
+    .form-row {
+      display: flex;
+      gap: 8px;
+      width: 100%;
+      max-width: 560px;
+      justify-content: center;
+    }
+    .form-row input {
+      flex: 1;
+      min-width: 0;
+      padding: 14px 18px;
+      font-family: var(--font-body);
+      font-size: 15px;
+      color: var(--color-ink);
+      background: transparent;
+      border: 1.5px solid var(--input-border);
+      border-radius: 4px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    .form-row input::placeholder {
+      color: var(--input-border);
+    }
+    .form-row input:focus {
+      border-color: var(--fg);
+      outline: 2px solid var(--fg);
+      outline-offset: 2px;
+    }
+    .form-row button {
+      flex-shrink: 0;
+      padding: 14px 22px;
+      font-family: var(--font-body);
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--btn-label);
+      background: var(--accent);
+      border: none;
+      border-radius: 2px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: opacity 0.15s, transform 0.1s;
+    }
+    .form-row button:hover {
+      opacity: 0.85;
+    }
+    .form-row button:active {
+      transform: scale(0.98);
+    }
+    .success-msg {
+      display: none;
+      margin-top: 18px;
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--success);
+    }
+    .success-msg.visible {
+      display: block;
+    }
+    .deco-section {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      min-height: 25vh;
+      display: flex;
+      flex-direction: column;
+    }
+    .coil-row {
+      display: block;
+      width: 100%;
+      height: 60px;
+      flex-shrink: 0;
+      background: var(--bg);
+    }
+    .stripe {
+      width: 100%;
+      height: 14px;
+      background: var(--deco-stripe);
+      flex-shrink: 0;
+    }
+    .grid-floor {
+      flex: 1;
+      position: relative;
+      background-color: var(--deco);
+      min-height: 80px;
+    }
+    .grid-svg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .ticker-wrap {
+      width: 100%;
+      overflow: hidden;
+      background: var(--ticker-bg);
+      padding: 10px 0;
+      flex-shrink: 0;
+    }
+    .ticker-track {
+      display: flex;
+      gap: 24px;
+      white-space: nowrap;
+      animation: ticker-scroll 20s linear infinite;
+    }
+    .ticker-unit {
+      font-family: var(--font-body);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      color: var(--ticker-fg);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-right: -12px;
+    }
+    .ticker-star {
+      color: var(--deco-stripe);
+      margin-right: 4px;
+    }
+    @keyframes ticker-scroll {
+      from { transform: translateX(0); }
+      to   { transform: translateX(-50%); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .ticker-track {
+        animation: none;
+      }
+    }
+    @media (max-width: 600px) {
+      .logo {
+        left: 16px;
+        top: 16px;
+        gap: 10px;
+      }
+      .logo-container {
+        width: 40px;
+        height: 40px;
+      }
+      .logo-name {
+        font-size: 14px;
+      }
+      .upper {
+        padding: 30px 16px;
+        flex: 0 0 50vh;
+      }
+      .form-row {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .form-row input,
+      .form-row button {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <div class="logo">
+    <div class="logo-container">
+      <svg class="logo-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="50" cy="50" r="48" fill="var(--deco-logo)"/>
+        <text x="50" y="60" font-family="'DM Sans', sans-serif" font-size="42" font-weight="700" text-anchor="middle" fill="var(--btn-label)" letter-spacing="-1">Md</text>
+      </svg>
+    </div>
+    <div class="logo-text">
+      <span class="logo-name">Meridian</span>
+      <span class="logo-dot">·</span>
+    </div>
+  </div>
+
+  <section class="upper">
+    <h1 class="headline">Meridian is<br>almost here</h1>
+    <p class="subtext">The workspace that connects your ideas before you've finished thinking them.</p>
+
+    <form class="form-row" id="waitlist-form">
+      <input type="text" name="firstname" placeholder="First name" autocomplete="given-name">
+      <input type="email" name="email" placeholder="Work email" autocomplete="email" required>
+      <button type="submit">Join the Waitlist</button>
+    </form>
+    <p class="success-msg" id="success-msg" role="status">You're on the list! We'll be in touch.</p>
+  </section>
+
+  <div class="deco-section">
+
+    <svg class="coil-row" viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" style="stroke: var(--deco-stroke);" stroke-width="1.5">
+        <path d="M 9,60 A 41,30 0 0 1 91,60"/>
+        <path d="M 94,60 A 41,30 0 0 1 176,60"/>
+        <path d="M 179,60 A 41,30 0 0 1 261,60"/>
+        <path d="M 264,60 A 41,30 0 0 1 346,60"/>
+        <path d="M 349,60 A 41,30 0 0 1 431,60"/>
+        <path d="M 434,60 A 41,30 0 0 1 516,60"/>
+        <path d="M 519,60 A 41,30 0 0 1 601,60"/>
+        <path d="M 604,60 A 41,30 0 0 1 686,60"/>
+        <path d="M 689,60 A 41,30 0 0 1 771,60"/>
+        <path d="M 774,60 A 41,30 0 0 1 856,60"/>
+        <path d="M 859,60 A 41,30 0 0 1 941,60"/>
+        <path d="M 944,60 A 41,30 0 0 1 1026,60"/>
+        <path d="M 1029,60 A 41,30 0 0 1 1111,60"/>
+        <path d="M 1114,60 A 41,30 0 0 1 1196,60"/>
+        <path d="M 1199,60 A 41,30 0 0 1 1281,60"/>
+        <path d="M 1284,60 A 41,30 0 0 1 1366,60"/>
+        <path d="M 1369,60 A 41,30 0 0 1 1451,60"/>
+      </g>
+    </svg>
+
+    <div class="stripe"></div>
+
+    <div class="grid-floor">
+      <svg class="grid-svg" viewBox="0 0 1280 400" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <g style="stroke: var(--deco-stroke);" stroke-width="1" fill="none">
+          <line x1="640" y1="0" x2="0"    y2="400"/>
+          <line x1="640" y1="0" x2="128"  y2="400"/>
+          <line x1="640" y1="0" x2="256"  y2="400"/>
+          <line x1="640" y1="0" x2="384"  y2="400"/>
+          <line x1="640" y1="0" x2="512"  y2="400"/>
+          <line x1="640" y1="0" x2="640"  y2="400"/>
+          <line x1="640" y1="0" x2="768"  y2="400"/>
+          <line x1="640" y1="0" x2="896"  y2="400"/>
+          <line x1="640" y1="0" x2="1024" y2="400"/>
+          <line x1="640" y1="0" x2="1152" y2="400"/>
+          <line x1="640" y1="0" x2="1280" y2="400"/>
+          <line x1="0" y1="80"  x2="1280" y2="80"/>
+          <line x1="0" y1="160" x2="1280" y2="160"/>
+          <line x1="0" y1="240" x2="1280" y2="240"/>
+          <line x1="0" y1="320" x2="1280" y2="320"/>
+          <line x1="0" y1="390" x2="1280" y2="390"/>
+        </g>
+      </svg>
+    </div>
+  </div>
+
+  <div class="ticker-wrap" aria-hidden="true">
+    <div class="ticker-track">
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+    </div>
+  </div>
+
+  <script>
+    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
+      e.preventDefault();
+      if (!this.checkValidity()) {
+        this.reportValidity();
+        return;
+      }
+      this.style.display = 'none';
+      document.getElementById('success-msg').classList.add('visible');
+    });
+  </script>
+</body>
+</html>

skills/waitlist-page/references/checklist.md

@@ -0,0 +1,42 @@
+# Checklist — Waitlist Page
+
+## P0 — Must pass before emitting `<artifact>`
+
+- [ ] Page has exactly one primary CTA (the email field + submit button)
+- [ ] No hero gradient that spans more than 20% of the viewport height
+- [ ] Email input has a visible label or meaningful placeholder — not just "Email"
+- [ ] No invented social proof numbers (e.g., "10,000 people waiting")
+- [ ] **No countdown timer present** — countdown timers are an explicit anti-pattern for this skill (see SKILL.md §Quality gates)
+- [ ] No horizontal scroll at 375px viewport
+- [ ] No generic emoji icons used as decorative elements
+- [ ] Typography uses at most two font families (display + body)
+- [ ] First name field has no `required` attribute
+- [ ] Work email field has `type="email"` and `required`
+- [ ] Form does **not** use `novalidate`; JS guard calls `checkValidity()` before showing success state
+- [ ] Success message uses `role="status"` or `aria-live="polite"` so screen readers announce it
+- [ ] All color values derived from DESIGN.md; only allowed hardcoded exception is `#2D6A4F` for `--success`
+- [ ] All user-supplied text tokens are HTML-escaped; color tokens adhere to strict grammar (`#hex`, `rgb/hsl/oklch`, `color-mix()`) and contain no unsafe characters (`;`, `{}`, `<`, `>`, `/*`, `@`, `url(`); font name tokens are URL-encoded in the Google Fonts URL; `{{LOGO_MARK}}` is escaped text initials or strictly sanitized inline SVG (no scripts/events)
+
+## P1 — Should pass for quality submission
+
+- [ ] Hero section is visually distinct and above-the-fold
+- [ ] Email submit button has hover and active states
+- [ ] Form validation provides clear inline feedback on error (native `reportValidity()` is acceptable)
+- [ ] Page is scrollable (not clipped) at 375×667 and 390×844; CTA visible without scroll at those sizes
+- [ ] Ticker animation is paused or removed under `prefers-reduced-motion: reduce`
+- [ ] All interactive elements have visible focus styles (not just `outline: none`)
+- [ ] Keyboard: Tab reaches each form field and the submit button; Enter submits the form
+- [ ] Color contrast of body text on background meets WCAG AA (≥ 4.5:1)
+- [ ] Color contrast of button label on button background meets WCAG AA (≥ 4.5:1)
+- [ ] Color contrast of logo text/initials on logo container background meets WCAG AA (≥ 4.5:1)
+- [ ] Logo alt text or `aria-label` present if logo is an `<img>` or meaningful SVG
+- [ ] Ticker ribbon has `aria-hidden="true"` (decorative, not meaningful content)
+- [ ] `<html lang="">` attribute is set to the correct language code
+
+## P2 — Nice-to-have polish
+
+- [ ] Google Fonts loaded with `display=swap` to avoid FOIT
+- [ ] Form inputs have matching `autocomplete` attributes (`given-name`, `email`)
+- [ ] Subtle micro-animation on button hover (scale or opacity only — no layout shift)
+- [ ] Decoration zone does not cover or overlap the form at any viewport width
+- [ ] Page title is `{{PRODUCT_NAME}} — Coming Soon`, not a generic placeholder