1仕組みと動作原理

本スキルは実行可能プログラムではなく、html-anythingの「テンプレート」です。SKILL.md + example.html[/example.md]で構成されるディレクトリであり、実行時にloader.tsによってディスクから読み込まれます。テンプレートの追加はディレクトリの追加のみで完結し、TypeScript側の修正は不要です。

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIRはアプリケーション実行時cwdのsrc/lib/templates/skillsに固定されています。listSkills()が第1階層のサブディレクトリを走査し、isValidBundledIdでフィルタリングした上で各ディレクトリのSKILL.mdを読み込んでfrontmatterをパースするため、「セレクター用メタデータ」と「生成用プロンプト本文」は同一ファイルから供給されます。

frontmatterはセレクターやAPI向けのメタデータ（zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags）であり、fmToMeta()によってSkillMetaへとマッピングされます。frontmatter以降の本文がモデルに渡される仕様書となります。

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

idはディレクトリ名から取得されます。exampleメタデータ（example_id/name/format/tagline/desc/source_url）はディレクトリ内にexample.md/htmlが存在する場合にのみSkillExampleMetaとして生成され、bodyは一覧APIから意図的に除外されています（コメント: 「Body is excluded so we can return the entire registry in one cheap fetch」）。

生成時、本テンプレート本文はプロンプトのbodyとして扱われます。/api/convertがassemblePrompt()を用いて「グローバルデザイン指示＋本テンプレート本文＋ユーザーコンテンツ」を1つのプロンプトに結合し、ホスト環境のローカルagent CLIに引き渡してstdoutからHTML出力をストリーミング取得します。

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

同一ルートには最小差分編集用のeditFromHtml/editFromContentブランチも存在します。このパイプラインにおいてテンプレート本文は単なる文字列であり、評価・実行されることはありません。

テンプレート本文の前にはグローバル共通指示（SHARED_DESIGN_DIRECTIVES）が付与され、技術面およびコンテンツ面の規律を全テンプレートに統一適用します。サンプルHTMLで一般的に見られる外部CDNやフォントリンクはここに起因します（ホストシェルによる注入であり、テンプレート自体の要件ではありません）。

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

テンプレート本文はスタイル、レイアウト、コンポーネントのみを担当し、これらの共通要件を重複して規定しません。安全性格付けはテンプレート自身のディレクトリのみを対象とするため、このエンドポイントはホストシェルの挙動としてsecurity.reasonに記載しています。

生成物はstdoutのテキストとして返却されます。グローバル指示によりエージェントによるファイルシステム操作は明示的に禁止されており、ディスク保存はフロントエンド側が担当します。そのため、テンプレートディレクトリ内にはスクリプトもディスク書き込み能力も存在しません。

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

原文の指示には「HTMLをいかなる.htmlファイルにも書き込まないでください……フロントエンドがstdoutテキストを直接キャプチャし、ファイルの保存はフロントエンドが担当します」と記載されており、最終的な生成物はフロントエンドによってタスク履歴への保存やエクスポートが行われます。

example.htmlは同梱されている事前レンダリング済みのサンプルです。/api/templates/<id>/previewからiframeに対してtext/htmlとしてそのまま返却され（セレクター内インラインプレビュー用）、/api/templates/<id>/exampleからはexample.mdとexample.htmlがセットで返却されます。

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

サンプルはプレビューおよびドキュメント用途に限定されており、生成プロンプトには含まれません（生成にはSKILL.md本文のみを使用）。したがって、サンプルの外部リンクがテンプレート本来の権限境界に影響を与えることはありません。

本文の【レイアウト】指示により、ランディングページは「中央配置の1カラム」4段構成に定義されています（ブランドロゴ＋タグライン＋大文字ヒーロー、メール入力欄と送信ボタンが統合されたピル型UI、3つの特徴・メリット、フッターのファウンダーズノート＋SNSリンク）。

next/src/lib/templates/skills/waitlist-page/SKILL.md

- 邮箱捕获 input + submit 按钮 (合并成一个 pill)

同一セクションには「- 中央配置レイアウト: ブランドロゴ + 1行タグライン + 大文字ヒーロー (何をするかを明確に伝える)」および「- 下部に3つの特徴・メリット (アイコン + 1行テキスト)」と記載されており、レイアウトの順序自体がコンバージョンへの導線となっています。

装飾レイヤーはインラインSVG/CSSで実装されています（グラデーションメッシュ、ノイズテクスチャ、星の軌跡）。さらに、送信成功時のマイクロインタラクション（✓ ＋テキスト変化）が要求されています。

next/src/lib/templates/skills/waitlist-page/SKILL.md

- 装饰: SVG 渐变 mesh / 噪点纹理 / 一颗星轨

これは「ミニマルでありながら寂しさを感じさせない」実装アプローチです。装飾はすべてインラインで描画され、外部画像に依存しません（「CSS / SVGインライン描画を優先する」というグローバル指示と合致）。

サンプルのメール登録機能は純粋なフロントエンドデモです。submitイベントでpreventDefaultを実行し、バリデーション通過後にフォームを非表示にして成功メッセージに.visibleを付与するのみで、バックエンドへの送信は一切行われません。

next/src/lib/templates/skills/waitlist-page/example.html

this.style.display = 'none';

完全な実装内容はaddEventListener('submit', …) → e.preventDefault() → checkValidity()/reportValidity() → フォーム非表示＋ success-msgにクラス付与となっており、ページ内にfetch/XHR/actionは存在しません。つまり、このHTMLを受け取っても実際にメールアドレスが収集されるわけではありません。

成功状態は実在するDOM構造（role="status"属性付きの段落＋ .visibleクラス）であり、モデルがアドリブで追加したテキストではありません。

next/src/lib/templates/skills/waitlist-page/example.html

<p class="success-msg" id="success-msg" role="status">You're on the list! We'll be in touch.</p>

role="status"によりスクリーンリーダーが状態変化を読み上げ可能となっており、本文が求める「マイクロインタラクション ✓ ＋テキスト変化」と組み合わさることで、アクセシビリティに配慮した成功フィードバックを構成しています。

CLI側にはキーワード直接マッチングルートが存在します。skills-matcher.tsがユーザーコンテンツ内のキーワードを本テンプレートIDに直接マッピングし、ヒット時にconfidence＝ヒット数×2+3を付与します。しきい値3に達した場合はローカルルールが適用され、モデルによるテンプレート選択はスキップされます。

cli/src/skills-matcher.ts

[["等候", "waitlist", "预发布", "coming soon", "即将上线", "预约"], "waitlist-page"],

「waitlist」「coming soon」「予約」などの語句が本テンプレートに直接紐付けられます。本テンプレートはmarketingシナリオにおける強力なシグナルを持つテンプレートの1つです（featured: 1）。

CLIフォールバックマッチングで使用されるしきい値定数：コンテンツ長が60文字を超えている場合のみAI要約マッチングが有効化され、強シグナルのしきい値は3です。

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

さらにSCENARIO_SIGNALSによるシナリオ別キーワード重み付けや、tags/zhName/descriptionを用いたfallbackMatchのスコアリングがあり、両層が不発の場合にのみエージェントを呼び出して要約マッチングを行います。

ホストシェルはsandbox="allow-scripts allow-same-origin"（スクリプト許可、同一生成元許可）が設定されたiframeでサンプル/生成物をレンダリングします。これはプロダクトシェルの仕様設計によるものであり、リスクとして注記されていますが本スキルの判定には影響しません。

next/src/components/template-picker.tsx

sandbox="allow-scripts allow-same-origin"

preview-pane.tsxやdeck-viewer.tsxでも同様の設定が採用されています。サンプルHTMLのインラインJSはブラウザプレビュー時にのみ実行され、スキル自体はいかなるスクリプトも実行しません。

2コア機能

01中央配置1カラムのミニマルランディングページ（ロゴ＋タグライン＋大文字ヒーロー）

02メール入力欄と送信ボタンが統合されたピル型コンテナ

033つの特徴・メリット（アイコン＋1行テキスト）

04フッターのファウンダーズノート＋SNSリンク

05インラインSVG装飾レイヤー（グラデーションメッシュ／ノイズ／星の軌跡）

06送信成功時のマイクロインタラクション（✓＋テキスト切り替え、role="status"）

07装飾用「COMING SOON」マーキースクロールバー

3外部依存関係

Kind	Dependency / Endpoint
network	Google Fonts（Syne / DM Sans）
network	Google Fonts 静态资源域（preconnect）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: 純粋なプロンプト指示およびルールテキストのみで構成されており、スクリプト実行や外部影響は一切ありません

監査ノート： 判定対象＝本スキルディレクトリ（next/src/lib/templates/skills/waitlist-page/）。ファイル単位での検証結果：スクリプトなし、認証情報読み取りなし、ディスク書き込みなし。ディレクトリ内に存在するエンドポイントはGoogle Fonts（Syne / DM Sans）およびGoogle Fonts静的アセットドメイン（preconnect）に限定されており、これらもすべて「生成物サンプル」であるexample.html内にのみ存在します。SKILL.md本文はレイアウト、スタイル、フォントファミリー名を規定しているだけであり、実行時の外部APIを指定していないため、純粋なプロンプト指示テンプレート（green）と判定されます。ホスト側の補足（格付け対象外）：html-anythingプロダクトシェルはassemblePrompt()経由で本文をプロンプトに結合してローカルagent CLIを起動し、cdn.tailwindcss.comやGoogle Fonts要件を注入します（next/src/lib/templates/shared.ts）。またプレビュー用iframeにはsandbox="allow-scripts allow-same-origin"が指定されています（next/src/components/template-picker.tsx）。

5二重目の独立検証

[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 原文。

6結論

単一で明確なコンバージョン導線：中央配置1カラム＋単一CTA（メール用ピル型UI）により、事前公開ページの「1つの目的に特化する」要件に合致

アクセシビリティに配慮した成功フィードバック：色のみに依存せず、role="status"＋テキスト切り替えによる明示的な通知を採用

外部通信不要の装飾：3箇所のインライン<svg>＋CSSグラデーションにより、画像リソースに依存せず完成度の高いデザインを実現

確実なベースラインとなるサンプル：フォームバリデーション、成功状態、マーキー、レスポンシブブレークポイントが完備されており、モデルはブランドテキストを差し替えるだけで対応可能

最適な用途： 新製品の事前公開・先行クローズドベータのミニマルランディングページ、イベント予約ページ、事前登録（waitlist）ページのビジュアルおよび構造ベースラインに最適です。また、ランディングページのA/Bテストにおけるミニマルな対照群としても適しています。

不向きな用途： 実運用可能なメール収集システム（バックエンド処理なし）としての直接利用には不適。情報量の多い製品公式サイト（単一CTA構成のため機能一覧などを収容できない）には不適。複数フォームや多項目の情報入力を求めるマーケティング用途には不適。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload waitlist-page.tar.gz

sha256: f44cc710d83cf149…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.