デザイン&モーション · nexu-io/html-anything

mobile-onboarding

3つのスマートフォン画面の並行表示: splash / value-prop / sign-in

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE 首两行为 "Apache License" 与 "Version 2.0, January 2004";pool.json 记 license=Apache-2.0)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本skillは実行可能プログラムではなく、純粋なテキストプロンプトテンプレートです。ホストが正規表現でSKILL.mdのYAML frontmatterをパースし、本文bodyをプロンプトのメインとして読み込みます。

next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
リポジトリ自身のディレクトリ規約の説明:「SKILL.md — frontmatter (id, scenario, tags, …) + prompt body」、および「Adding a template = adding a folder. No TS code change required」—テンプレートはディレクトリ規約によって登録されます。リポジトリ全体のTS/TSX内には"mobile-onboarding"のハードコードされた参照はなく、本テンプレートに対するコードレベルの特別処理は存在しません。

テンプレート本文は単独で実行されず、最終プロンプトの「テンプレートセクション」に組み込まれます:共有デザイン指示 + 本テンプレート本文 + ユーザーコンテンツ。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
shared.ts内のassemblePromptの自己記述:「Wrap a per-template instruction body with the shared design directives and the user content tail.」;リクエストはまずconst skill = loadSkill(templateId);を通じて本ディレクトリのbodyを取得し、その後に組み立てられます。

グローバルな「コンテンツ駆動による数量決定」ルールがテンプレート内のあらゆる数値を上書きします。テンプレートはレイアウト/スタイル/配色/コンポーネントを定義するのみで、出力の長さを定義しません。

next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
このルールは「最優先事項、テンプレート内のいかなる数値も上書きする」と明記されており、deck系テンプレートにおける「6〜10枚」などの数値は「短いサンプルの参考下限値とみなす」と指定されています。そのため、本テンプレートが提供するのは利用可能なレイアウトと制約であり、ページ数の上限ではありません。

成果物の形式はグローバルなハード制約を受けます:単一ファイルのHTML、コードフェンスのない純粋なHTML、先頭文字は必ず<であること、およびファイル書き込みの禁止(フロントエンドがstdoutをキャプチャ)。

next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
同じセクションには「Write / Edit / MultiEdit / Bash / Create / ファイルシステムツールの使用を禁止」とも明記されています。ファイルの永続化はホストのフロントエンドが担当し、テンプレート側で書き込み処理は発生しません。

frontmatterのメタデータがセレクターの表示(中国語名/英語名/絵文字/説明/カテゴリ/シナリオ/アスペクト比/タグ/サンプルメタデータ)を制御します。

next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
本テンプレートのメタデータ:category=mobile、scenario=design、aspect_hint=3 × iPhone、featured=13。セレクターはcategory/scenarioでグループ化し、featuredでソートされます。すべてfrontmatterによって決定され、コード側の特例処理はありません。

同梱のサンプルアセットは2つの読み取り専用APIを介してフロントエンドに公開されます:example.htmlはそのままiframeに返され、example.mdは「プレビュー」ボタンの入力コンテンツとして使用されます。

next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
example.htmlのレスポンスヘッダーはContent-Type: text/html; charset=utf-8です。もう一方のルートはcontent: skill.exampleMd ?? ""でサンプルテキストをクライアントに渡します。本ディレクトリにはexample.html(8899バイト)のみが存在し、example.mdはありません。

実行チェーン(ホストの動作であり、本テンプレートのコードではありません):ホストがローカルにログイン済みのagent CLIをspawnし、組み立てられたプロンプトをstdin経由で渡し、stdoutからHTMLをストリーミング回収します。

next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
子プロセスはcwd=process.cwd()(cwd: opts.cwd ?? process.cwd(),)で実行され、stdioはすべてpipeされます。プロンプトはシェルの文字列結合ではなく、stdin/--messageを介して渡されます(not interpolated into a shell command)。

テンプレートは「3画面」を一連の役割(Splash / Value-prop / Sign-in)として固定化し、画面ごとに必須要素を指定することでモデルによる自由な構成のばらつきを抑えています。

next/src/lib/templates/skills/mobile-onboarding/SKILL.md
- Phone 1: Splash (logo + tagline)
これは9つのテンプレートの中でも珍しい「M画面 = M個の役割」を持つ強構造テンプレートです。共有指示の「コンテンツ駆動数量」はslide/frame/card/sectionを対象としており、ここでの3画面はストーリーテリング上の役割であるため、数量上限の競合には当たりません。

frontmatterでfeatured: 13を使用してセレクターのソートに参加します:UI上でのテンプレートの露出順はコードではなくメタデータによって決定されます。

next/src/lib/templates/skills/mobile-onboarding/SKILL.md
featured: 13
セレクターのコメントには、featuredの値が小さいほど上位に表示され、featuredがないものは末尾に配置されると明記されています。本テンプレートにはfeaturedが付与されており、おすすめ枠内にあるものの順位は後方です。

2コア機能

013画面並列のストーリー構成(splash → value-prop → sign-in)でオンボーディングフローを一度に明快に伝達
021画面目Splashの固定構成:logo + tagline
032画面目の必須構成:バリュープロポジション + プログレスインジケーター(illustration + 1行テキスト + dot)
043画面目の集約:ログイン導線とメインCTA(email / Apple / Google)

3外部依存関係

KindDependency / Endpoint
networkTailwind Play CDN(共享指令对产物的要求)
networkjsdelivr CDN(可选:图表/动画脚本)
networkGoogle Fonts(共享指令指定)
cli本机 coding-agent CLI(宿主检测 PATH 并 spawn)

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

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠(ファイルパスと抜粋)
  • 网络端点: 外部ネットワークアクセスの宣言: 成果物側(共有デザイン指示による指定):生成されたHTMLはブラウザ内でcdn.tailwindcss.com(Tailwind Play)およびGoogle Fontsを参照します。
監査ノート: 。評価基準:本skillディレクトリ(SKILL.md + example.html)のみを評価対象とし、ホストシェルおよび成果物の外部リンクは評価に含めません。ディレクトリ内にはスクリプト、ネットワークエンドポイント、認証情報の読み取り、ディスク書き込み命令のすべてが存在しません(ディレクトリ全体のトークンスキャンで検出ゼロ)。SKILL.mdにはフォントファミリー名やプラットフォーム名(ログイン手段の文言としてのApple / Google)のみが現れ、実行時に取得を要求するCDN/フォント/APIは指定されていません。評価ランクを変更しない補足事項2点:① ホストシェル(loader.ts → assemblePrompt → agents/invoke.tsによるローカルCLIのspawn;claudeのパラメータに--permission-mode bypassPermissionsが含まれ、envForにより{...process.env}で環境変数が完全透過される処理)はホスト側の挙動であり、verdict.risksに記載済み;② ホストから注入される共有デザイン指示により、成果物の<head>内でTailwind Play / Google Fontsが参照されます(成果物のランタイムにおける外部リンク)。

5二重目の独立検証

  • [ok] skill 目录资产面(脚本 / references / 数据 / 模板) — 目录实为 2 个文件:SKILL.md 与 example.html;无 scripts/、无 references 目录、无任何可执行文件(.sh/.py/.js/.mjs/.ts 零命中)。
  • [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描(api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.):零命中;SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描,仅命中 font-semibold / font-black 这类字重类名,无端点。
  • [ok] 官方描述 vs 实际能力(有无夸大) — frontmatter description(三个手机框并排: splash / value-prop / sign-in)与正文一致:描述承诺的版式要素都能在正文找到对应条目,未见正文未支持的越界承诺。
  • [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目(Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI)逐条回到 shared.ts 与 argv.ts 原文取证;本模板无目录级端点条目。
  • [ok] 宿主执行链(供 security.reason / verdict.risks 使用,不参与判级) — prompt 经 stdin 送入被 spawn 的本机 CLI(invoke.ts),HTML 从 stdout 分流捕获;claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env;预览 iframe sandbox="allow-scripts allow-same-origin"(template-picker.tsx:544 / preview-pane.tsx:297)。
  • [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699(与任务表 pin 一致);skill.path=next/src/lib/templates/skills/mobile-onboarding 下确有 SKILL.md,全仓无第二份同名模板。
  • [ok] "Apple / Google" 是否意味着 OAuth 接口调用 — SKILL.md 原文是登录屏的 UI 渠道按钮枚举("- Phone 3: Sign-in (email / Apple / Google + 主 CTA)"),属界面布局指令;目录内无 OAuth SDK、无端点、无凭证字段,不构成运行时外发。
  • [ok] 随包 example.html 的外链与脚本面 — mobile-onboarding/example.html(8899 字节)无 http(s) 外链、无 <script>:三台手机框与动效均由内联 CSS 绘制。

6結論

  • ゼロコード・ゼロ依存:テンプレート自体がプロンプトであり、ディレクトリ規約によって登録されるため、TSコードの変更なしでテンプレートの追加・置換が可能
  • オンボーディングの3段階の役割(Splash / Value-prop / Sign-in)を固定化し、画面ごとの必須要素をリスト化しているため、レビュー時に不足している画面が一目で把握可能
  • グローバルなデザイン規律との連携:コンテンツ駆動の数量決定 + 実データ + 単一ファイルHTML + 中国語タイポグラフィ規律(Noto Sans SC / 盤古の白)はホスト側から一括注入されるため、テンプレートは自身のレイアウトに専念可能
  • サンプルの自己完結性:同梱のexample.htmlはセレクター内で直接プレビュー可能。ただしexample.mdが欠けているためサンプル入力テキストを自前で用意する必要があり、試行ハードルを抑制
  • 最適な用途: アプリのオンボーディングフローを1画面で簡潔に説明したいコミュニケーションシーンに最適:資金調達/レビュー資料でのオンボーディング紹介、アプリストアのスクリーンショットセット、デザインレビュー時の導線ファネルのすり合わせなど。
    不向きな用途: 単一画面の要件には不向き(mobile-appを使用);「各画面がクリック可能なインタラクティブプロトタイプ」が必要な要件には不向き(本テンプレートの出力は静的な3画面表示であり、インタラクティブな状態は仕様外)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload mobile-onboarding.tar.gz
    sha256: d1cedb9fd0c6efdd…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.