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 を検索しても "mockup-device-3d" のハードコードされた参照はなく、本テンプレートに対するコード上の個別処理は一切ありません。
テンプレート本文は単独で実行されず、最終プロンプトの「テンプレート部」に組み込まれます：共有デザイン指示 + 本テンプレート本文 + ユーザーコンテンツ。
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=poster、scenario=product、aspect_hint=1920×1080 (16:9)、featured=47。セレクターは 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.md（434 バイト）と example.html（8958 バイト）が存在します。
実行チェーン（ホストの動作であり、本テンプレートのコードではありません）：ホストがローカルでログイン済みの 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）。
これは 9 つのテンプレートの中で最も仕様密度が高いものです：キャンバス、デバイスの配置、マテリアル色、反射、フレア、アニメーションのすべてに実行可能なパラメータが指定されており、モデルが自由に判断する余地はほとんどありません。
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
- **画布**: 1920×1080, 暖灰渐变背景
テンプレート内に「Inspired by hyperframes vfx-iphone-device」と記載があり、frontmatter の example_source_url で出典が明記されています（出典表記であり、ランタイムリクエストではありません）。
画面コンテンツの2つのソースはテンプレート内で分岐処理されます：テキストは「mock app 画面の自動レンダリング」、HTML は「そのまま埋め込み」となり、ネストによる不具合を避けるため iframe/srcdoc ではなく div+Tailwind を明示的に使用します。
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
用户提供的是 HTML → 原样嵌入屏幕 div 内
原文の同一段落に「単一ファイル HTML。iframe では srcdoc ネストを使用せず（不具合が発生しやすいため）、`<div class="screen">` + Tailwind でコンテンツをレンダリングする」とあります——これは同時に本テンプレートにおける唯一の「外部コンテンツ埋め込み」面であり、埋め込まれるのはユーザー自身の HTML です。
アニメーションは明示的に無効化可能として設計されています：@keyframes turntable は rotateY -12 ↔ 12 の 8 秒間の往復運動を行い、prefers-reduced-motion による無効化をサポートします。
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
@keyframes turntable
アクセシビリティへの配慮がテンプレート本文に直接記述されており、9 つの中で唯一 motion 設定への配慮を持つテンプレートです。
2コア機能
01CSS 3D transform を用いて GLTF 風のデバイス展示スタンドを擬似構築（1920×1080 キャンバス + 反射フロア）
02iPhone の配置およびマテリアルを transform / ボーダー色 / 角丸 / 画面サイズに至るまでハードコード
03画面コンテンツのデュアルソース対応：ユーザーがテキストを提供→ mock app 画面をレンダリング、HTML を提供→画面の div 内にそのまま埋め込み
04外部 mockup 画像へのリンクを禁止、デバイスはすべて CSS / SVG で即時描画
05アンチプレースホルダー規律：画面内には必ずユーザーの実データを反映
06オプションの 8 秒ターンテーブルアニメーションと prefers-reduced-motion による動きの低減サポート
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
| network | 随包示例 example.html 的外链（产物示例） |
| network | 示例出处标注（frontmatter，非运行时请求） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
- 网络端点: 外部ネットワークアクセスの申告：ディレクトリ内にネットワークリクエストコードは存在しません。同梱の example.html が <head> 内で https://cdn.tailwindcss.com を参照しています（サンプル生成物の外部リンク、
監査ノート： 。判定基準：本 skill ディレクトリ（SKILL.md + example.html/example.md）のみを判定対象とし、ホストシェルおよび生成物の外部リンクは判定に含まれません。ディレクトリ内にはスクリプト、認証情報、ファイル書き込み命令は一切なく、SKILL.md が要求する実行時外部リンクも存在しません。ディレクトリ内に実際に現れるエンドポイントは 3 箇所ありますが、いずれも生成物または出典表記であり、skill の実行命令ではありません：① example.html の <head> における cdn.tailwindcss.com の参照（同梱の静的プレビュー用）；② frontmatter の example_source_url=https://hyperframes.heygen.com/catalog（フロントエンド表示用の出典表記）；③ SKILL.md 本文でインスピレーション元として hyperframes vfx-iphone-device を挙げている点。なお、「mockup 画像 URL へは決してリンクしない」という記述は禁止規定であり、外部リクエスト要求ではありません。 判定ランクを変更しない補足事項（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 / 数据 / 模板） — 目录实为 3 个文件：SKILL.md 与 example.html、example.md；无 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（iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板另有 example.html 的 cdn.tailwindcss.com 外链，已在该 example.html 原文中定位。
- [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/mockup-device-3d 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "屏幕内嵌用户 HTML"是否等于外部内容注入 — SKILL.md 说的"原样嵌入屏幕 div 内"是把用户提供的 HTML 渲染进产物里的 <div class="screen">（同页同上下文），不是把远端页面抓进 skill；目录内无抓取代码。风险仍在产物侧（嵌入脚本与会话同域执行），已写入 verdict.risks。
- [ok] example_source_url 会不会被运行时请求 — loader.ts 仅把它当字符串放进 meta.example.source（fm.example_source_url ? {...} 分支），preview / example 两个路由只做 loadSkill + 返回 JSON 或 HTML；全仓未见对该 URL 的 fetch。
6結論
最適な用途： 製品リリース、App デモ、デザインモックの提示に最適：3D アセットの用意が難しい状況で、「UI を実際のデバイス画面内に収める」単一画像または 1 ページの展示スタンドが必要な場合。
不向きな用途： 本格的な 3D 回転やカメラワークを伴う映像レベルの要件には不向き（本テンプレートは擬似 GLTF の静的 CSS 展示スタンドです）。公式のデバイス画像や外部 mockup 素材の使用が求められるシーンには不向き（外部 mockup 画像へのリンクはテンプレートで明確に禁止されています）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload mockup-device-3d.tar.gz
sha256:
Option B · Copy Guide for Agent26cd54243c71eab9…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.