waitlist-page
Minimalist product pre-launch landing page featuring email capture, logo, and decorative visual layers.
1How It Works & Mechanism
This skill is not an executable program, but rather an html-anything "template": a directory (SKILL.md + example.html[/example.md]) scanned and loaded from disk at runtime by loader.ts—adding a template merely means adding a directory, requiring no changes to TypeScript.
Adding a template = adding a folder. No TS code change required; the API
The frontmatter provides metadata for the selector/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags) and is mapped to SkillMeta by fmToMeta(); the body text following the frontmatter constitutes the actual specification supplied to the model.
zhName: fm.zh_name ?? fm.name ?? id,
During generation, the template body serves as the prompt body: /api/convert invokes assemblePrompt() to concatenate "global design directives + this template body + user content" into a single prompt, passes it to the host's local agent CLI, and streams the HTML output captured from stdout.
prompt = assemblePrompt({ body: skill.body, content, format });
Prepended above the template body is a block of shared pre-directives (SHARED_DESIGN_DIRECTIVES) that uniformly imposes technical and content rules across all templates—external CDN/font links commonly found in example HTML originate here (injected by the host shell, not required by the template itself).
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
Output is returned as stdout text: global directives explicitly forbid the agent from using the file system, leaving disk writing to the front end—consequently, the template directory contains no scripts and has no disk-writing capability.
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
example.html is a pre-rendered example shipped with the bundle: /api/templates/<id>/preview returns it verbatim as text/html to an iframe (for inline selector preview), while /api/templates/<id>/example returns both example.md and example.html together.
return new Response(skill.exampleHtml, {
The body uses [Layout] to structure the landing page into a four-stage "centered single-column" flow: brand logo + tagline + large-type hero, email input and submit merged into a single pill, three small selling points, and a footer with a founder's note + social links.
- 邮箱捕获 input + submit 按钮 (合并成一个 pill)
Decorative layers are implemented inline using SVG/CSS: gradient mesh, noise texture, and a star trail, accompanied by a micro-interaction upon successful submission (✓ + copy change).
- 装饰: SVG 渐变 mesh / 噪点纹理 / 一颗星轨
The email capture in the example is a pure front-end demonstration: the submit event calls preventDefault, hides the form upon validation, and adds .visible to the success message without ever submitting to any back end.
this.style.display = 'none';
The success state is an actual DOM structure (a paragraph with role="status" + .visible class), rather than text hallucinated or dynamically improvised by the model.
<p class="success-msg" id="success-msg" role="status">You're on the list! We'll be in touch.</p>
The CLI side features a direct keyword matching channel: skills-matcher.ts directly maps keywords in user content to this template id, granting confidence = match_count × 2 + 3 upon a hit; reaching threshold 3 triggers local rules and skips asking the model to select a template.
[["等候", "waitlist", "预发布", "coming soon", "即将上线", "预约"], "waitlist-page"],
Threshold constants used by the CLI fallback matcher: content length must exceed 60 characters to enable AI summary matching, while the strong-signal threshold is 3.
const MIN_CONTENT_LENGTH_FOR_AI = 60;
The host shell renders examples and outputs using an iframe configured with sandbox="allow-scripts allow-same-origin" (allowing scripts and same-origin)—this is a product shell trade-off noted under risks and does not affect this skill's grading.
sandbox="allow-scripts allow-same-origin"
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（Syne / DM Sans） |
| network | Google Fonts 静态资源域（preconnect） |
4Recommended Governance & Evidence
- SKILL.md: Consists purely of prompt directives and rule text, with no script execution or external side effects
5Second-Pass Verification
- [ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
- [ok] 外部端点仅字体（示例侧） — SKILL.md 正文无 URL；example.html 仅 fonts.googleapis.com 的 css2 link 与 fonts.gstatic.com preconnect（另有产品壳注入的 Tailwind）。
- [ok] 「邮箱捕获」是否真的外发数据 — 示例脚本只 preventDefault + 切成功态，无 fetch/XHR/action 属性；判定为纯前端演示，已在 verdict.risks 写明「不采集数据」。
- [ok] 成功微动效是否落地 — 存在 .success-msg 与 .success-msg.visible 两态样式 + role="status" 段落 + 脚本切换，与正文「成功提交后给一个微动效 (✓ + 文案变化)」对应。
- [ok] 装饰图层是否为内联 SVG — 示例含 logo-svg / coil-row / grid-svg 三个内联 <svg>（含 xmlns="http://www.w3.org/2000/svg"），无外链图片。
- [ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["等候", "waitlist", "预发布", "coming soon", "即将上线", "预约"], "waitlist-page"] 行。
- [ok] 判级 green 自证 — 目录零脚本文件（示例内联 JS 属产物示例）、零凭证、零写盘；SKILL.md 未点名运行时接口 → green。
- [ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文。
6Verdict & Scenarios
f44cc710d83cf149…