{"id":"ba32a328-796e-48b7-830a-99b8635796b4","shortId":"TTQDxy","kind":"skill","title":"waitlist-page","tagline":"Minimal pre-launch landing with email capture, brand logo, and optional decorative layer.\nReads DESIGN.md for colors, typography, and layout rules.\nBest for: product launches, beta signups, early access programs, indie projects.","description":"# Waitlist Page Skill\n\nPre-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.\n\n## Workflow\n\n### Preflight: Load hardened template and brand foundation\n\n0. **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.\n1. **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.\n\n### Steps: Token replacement with validation and escaping\n\n2. **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:\n   - **Text tokens** (`{{PRODUCT_NAME}}`, `{{TAGLINE}}`): HTML-escape `<`, `>`, `&`, `\"`, `'` before insertion into HTML text nodes or attribute values.\n   - **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.\n   - **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.\n   - **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.\n   - **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.\n3. **Verify token mapping rules** — All color tokens are now in CSS variables:\n   - `--bg` = `{{BG_EXPRESSION}}` (e.g., `#FDE8DF`)\n   - `--fg` = `{{FG_EXPRESSION}}` (e.g., `#1A1410`)\n   - `--accent` = `{{ACCENT_EXPRESSION}}` (brand badge)\n   - `--deco` = `{{DECO_EXPRESSION}}` (decoration primary)\n   - `--deco-stripe` = `{{STRIPE_EXPRESSION}}` (accent stripe)\n   - `--input-border` = `{{BORDER_EXPRESSION}}` (full CSS expression with opacity)\n   - `--success` = `{{SUCCESS_EXPRESSION}}` or `#2D6A4F` fallback\n   - `--btn-label` = `{{BTN_LABEL_EXPRESSION}}` (button text color for contrast)\n   - `--ticker-bg` = `{{TICKER_BG_EXPRESSION}}` (animated ticker background)\n   - `--ticker-fg` = `{{TICKER_FG_EXPRESSION}}` (animated ticker text)\n   - `--deco-stroke` = `{{DECO_STROKE_EXPRESSION}}` (SVG strokes, typically muted with 12–15% opacity)\n   - `--logo-shadow` = `{{LOGO_SHADOW_EXPRESSION}}` (logo container shadow, subtle foreground shade)\n   - `--logo-fg` = `{{LOGO_FG_EXPRESSION}}` (contrasting text color for logo initials)\n4. **Responsive layout** — The template includes mobile-first scaling:\n   - 375px: form stacks to single column, logo shrinks to 40px, decoration compresses, no horizontal scroll.\n   - 768px: comfortable two-column breathing room.\n   - 1440px+: centered layout with generous whitespace.\n   - Verify all text remains readable and the email input + button are fully visible (no clipping) at 375×667 and 390×844.\n\n### Validation: Run hardened quality gates before emitting\n\n5. **Run the quality checklist** — Read `references/checklist.md`. Validate every **P0 gate** before emitting:\n   - Exactly one CTA (email form)\n   - No countdown timer, no fake social proof, no emoji\n   - No horizontal scroll at 375px\n   - Email input has `type=\"email\"` and `required`; first name has no `required`\n   - Form does NOT use `novalidate`; JS uses `checkValidity()` guard\n   - Success message has `role=\"status\"` or `aria-live=\"polite\"`\n   - All colors from DESIGN.md or allowed fallback; **no invented hex values**\n   - All user text is HTML-escaped; color tokens adhere to strict grammar; fonts are URL-encoded\n   - **Pass P0 or do not emit.** If any P0 gate fails, ask the user or fix the token mappings and try again.\n6. **Verify P1 gates** for quality submission (recommended):\n   - Hover and active states on submit button\n   - Form validation with clear feedback\n   - Ticker animation respects `prefers-reduced-motion: reduce`\n   - All interactive elements have visible focus styles (input:focus includes `outline`)\n   - Tab/Enter keyboard support\n   - WCAG AA contrast for body text (≥4.5:1) and button label (≥4.5:1)\n   - Logo alt/aria-label present; ticker has `aria-hidden=\"true\"`\n   - `<html lang=\"\">` is set\n\n### Output\n\n7. **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.\n\n## Quality gates\n\nThis skill enforces a hardened, template-based workflow to ensure compliance. **You must follow this execution path; deviating from the template disqualifies the output.**\n\n**Mandatory template-based execution:**\n- Read `assets/template.html` as your base; do not write HTML from scratch.\n- Copy it to `index.html` and replace only the `{{PLACEHOLDER}}` tokens with validated/escaped values.\n- Run every P0 gate in `references/checklist.md` before emitting; if any fail, fix and re-validate.\n\n**P0 gates (must pass):**\n- Single CTA: Email form is the only interactive element. No nav, no secondary buttons, no social links.\n- Logo placement: Fixed top-left, matches DESIGN.md accent color, scales down on mobile (50px → 40px).\n- Color consistency: Every color from DESIGN.md palette. Only allowed hardcoded exception: `#2D6A4F` for `--success`.\n- No anti-patterns: No countdown timer, no fake social proof, no emoji icons, no lorem ipsum.\n- Content integrity: Headline and copy tie directly to `product_name` and `tagline` inputs—no filler copy.\n- 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.\n- Typographic discipline: Display + body fonts only (2-font rule). Consistent sizing across sections.\n- Form structure: Two fields (first name optional, email required), `checkValidity()` guard, success message with `role=\"status\"`.\n- 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).\n\n**P1 gates (should pass for quality submission):**\n- Hero section visually distinct and above-the-fold.\n- Email submit button has hover and active states.\n- Form validation provides clear feedback.\n- Page scrollable (not clipped) at all mobile viewports; CTA visible without scroll.\n- Ticker animation paused/removed under `prefers-reduced-motion: reduce`.\n- All interactive elements have visible focus styles (outline, not just outline:none).\n- Keyboard: Tab reaches each form field; Enter submits.\n- WCAG AA contrast: Body text ≥4.5:1, button label ≥4.5:1.\n- Logo alt/aria-label present; ticker has `aria-hidden=\"true\"`.\n- `<html lang=\"\">` set to correct language code.\n\n**Decoration restraint:**\n- Lower zone enhances without distraction. Opacity, subtle strokes, muted animation.\n- No gradient that spans more than 20% of viewport height.\n- Coil, stripe, grid, or ticker all use colors from DESIGN.md only.\n\n## Output\n\n**Only emit after all P0 gates in `references/checklist.md` pass.**\n\nEmit the artifact between tags:\n\n```\n<artifact identifier=\"waitlist-id\" type=\"text/html\" title=\"Coming Soon — {{PRODUCT_NAME}}\">\n<!doctype html>\n<html lang=\"en\">\n...\n</html>\n</artifact>\n```\n\nOne line of description above the artifact; nothing below.\n\n**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.","tags":["waitlist","page","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-waitlist-page","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/waitlist-page","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (9,532 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:27.534Z","embedding":null,"createdAt":"2026-05-07T12:53:05.696Z","updatedAt":"2026-05-11T06:52:27.534Z","lastSeenAt":"2026-05-11T06:52:27.534Z","tsv":"'0':100 '1':146 '2':205 'access':33,194 'allowlist':272 'artifici':74 'ask':137 'assets/template.html':154 'attribut':245 'bake':196 'base':170 'best':26 'beta':30 'bg':219 'border':221 'brand':12,59,98,103,130 'build':53 'captur':11 'clean':84 'clear':66 'color':21,109 'consist':127 'copi':149,164 'countdown':78 'decor':16,190 'default':260 'design.md':19,106,134 'deviat':178 'die':125 'e.g':216 'earli':32,71 'email':10 'entranc':57 'escap':204,237,257 'express':220,222 'fake':77 'first':46,87 'focus':55,191 'follow':225 'font':111 'form':188 'foundat':99,119 'futur':49 'genuin':90 'handshak':47 'harden':95,159 'honest':56 'html':174,236,241,247,256 'html-escap':235,255 'ident':60,104 'index.html':167 'indi':35 'inflat':80 'initi':254 'inlin':263 'input':209 'insert':239 'interest':91 'join':69 'land':8 'launch':7,29,42 'layer':17 'layout':24,187 'list':72 'live':123 'load':94,101 'logo':13,223,249 'make':64 'map':206 'mark':224,250 'minim':4 'miss':136 'mobil':86 'mobile-first':85 'must':266 'name':218,233 'node':243 'one':65,142 'option':15 'output':163 'page':3,38,43,122 'pair':112 'path':67 'placehold':212 'pre':6,41 'pre-launch':5,40 'preflight':93 'proceed':145 'product':28,217,232 'program':34 'project':36 'provid':141 're':63 'read':18,105,147,153 'replac':200,227 'repres':132 'requir':186 'reusabl':151 'rule':25,115,228 'sanit':268 'scaffold':195 'scarciti':75 'scratch':176 'seed':160 'signup':31 'skill':39,52 'skill-waitlist-page' 'source-nexu-io' 'spatial':114 'step':198 'strict':267 'strip':273 'structur':181,189 'style':192 'svg':264 'system':110 'tactic':81 'taglin':234 'templat':96,152,156,183,215 'text':230,242,253 'token':199,207,231,248 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'typographi':22 'use':252,262,270 'user':50,139 'valid':202 'valu':246 'vessel':88 'waitlist':2,37,121 'waitlist-pag':1 'workflow':92 'write':173","prices":[{"id":"f6ef1669-ed96-4d2d-aa12-3033b7c7b1d9","listingId":"ba32a328-796e-48b7-830a-99b8635796b4","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-07T12:53:05.696Z"}],"sources":[{"listingId":"ba32a328-796e-48b7-830a-99b8635796b4","source":"github","sourceId":"nexu-io/open-design/waitlist-page","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/waitlist-page","isPrimary":false,"firstSeenAt":"2026-05-07T12:53:05.696Z","lastSeenAt":"2026-05-11T06:52:27.534Z"}],"details":{"listingId":"ba32a328-796e-48b7-830a-99b8635796b4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"waitlist-page","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"78b28914608263f41452492e692fd7b0f7e603e4","skill_md_path":"skills/waitlist-page/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/waitlist-page"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"waitlist-page","description":"Minimal pre-launch landing with email capture, brand logo, and optional decorative layer.\nReads DESIGN.md for colors, typography, and layout rules.\nBest for: product launches, beta signups, early access programs, indie projects."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/waitlist-page"},"updatedAt":"2026-05-11T06:52:27.534Z"}}