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内に"poster-hero"のハードコードされた参照は見当たらず、本テンプレートに対するコード上の個別分岐処理はありません。
テンプレート本文は単独で実行されず、最終プロンプトの「テンプレートセグメント」に組み込まれます：共通デザイン指示 + 本テンプレート本文 + ユーザーコンテンツ。
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=marketing、aspect_hint=1080×1920 縦型（featuredなし、セレクターではおすすめバケットの後ろに配置）。セレクターは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です。もう1つのルートはcontent: skill.exampleMd ?? ""としてサンプルのテキストをクライアントに渡します。本ディレクトリにはexample.md（329バイト）とexample.html（5743バイト）が存在します。
実行チェーン（ホスト側の挙動であり、本テンプレートのコードではありません）：ホストはローカルでログイン済みの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つのテンプレートの中で最もキャンバスサイズが厳密に固定されているものです：幅と高さがTailwindの任意値クラス（w-[1080px] h-[1920px]）として直接記述されており、生成結果はそのままエクスポート可能なSNS向け縦型画像となります。
next/src/lib/templates/skills/poster-hero/SKILL.md
w-[1080px] h-[1920px] mx-auto
共通指示の「単一ファイルHTML、ダブルクリックで開けること」という要件と連携し、画像生成フローは「HTML生成 → ブラウザスクリーンショット/PNG書き出し」となります。
レイアウトは「上部/中央/下部/右下」のゾーンにあらかじめ厳密に分割され、各ゾーンの要素タイプが指定されている典型的な「スクリプト型レイアウト」テンプレートであり、モデルは主にコピー文と配色の充填を担当します。
next/src/lib/templates/skills/poster-hero/SKILL.md
- 上部 30% 留白 + 一个大 emoji 或抽象几何图形。
mobile-appのような構造型テンプレートとは異なり、本テンプレートはフォントサイズや太さ（text-8xl, font-black）まで直接指定されている「準スタイル型」です。
QRコード/ブランド枠には外部画像リンクではなくSVGプレースホルダーを使用し、生成物のオフライン利用可能性を担保しています。example.md（329バイト）には「製品ローンチ」シナリオのサンプルコピーが用意されています。
next/src/lib/templates/skills/poster-hero/SKILL.md
- 底部右下角放品牌 / 二维码 (用 SVG 占位)。
サンプルアセットの組み合わせはexample.md + example.htmlであり、サンプルギャラリー内で「入力文案 → 完成ポスター」の完全な対比を確認できます。
2コア機能
011080×1920の固定縦型キャンバス、モーメンツ/ポスターの標準サイズに直接準拠
02厳密に固定された視覚的ゾーニング：上部の余白エリアにメインビジュアルシンボルを配置
03中央のメインタイトルが視覚的中心を占有（text-8xl / font-black）
04右下隅のブランド＋QRコード枠（SVGプレースホルダー）
05装飾要素はすべてインラインSVGで描画（円/三角形/波線/ノイズ）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
| network | 随包示例 example.html 的外链（产物示例） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
- 网络端点: 外部ネットワークアクセスの宣言: ディレクトリ内にネットワークリクエストを行うコードは一切ありません。同梱のexample.htmlの<head>内でhttps://cdn.tailwindcss.comを参照しています（サンプル生成物の外部リンク、
監査ノート： 。評価基準：本skillディレクトリ（SKILL.md + example.html/example.md）のみを評価対象とし、ホストシェルや成果物の外部リンクは評価対象外です。ディレクトリ内にはスクリプトなし、クレデンシャル読み取りなし、ディスク書き込み指示なし、SKILL.mdが要求するランタイム外部リンクなし（SKILL.md内にhttp/CDN/fetch/APIの記述なし）。ディレクトリ内に実際に現れるエンドポイントは、成果物の外部リンク1箇所のみです：example.htmlの<head>でcdn.tailwindcss.comを参照（同梱の静的サンプルであり、プレビュー時にブラウザによりロード）。example.htmlのテキスト内に現れる「$ pnpm dlx html-anything」はサンプルポスター上のコマンド文字列に過ぎず、実行される指示ではありません（ディレクトリ内にスクリプトファイルは存在しません）。評価区分を変更しない補足事項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\.）：仅命中 example.html 里作为示例文案出现的 "$ pnpm dlx html-anything"（展示文本，非可执行指令）；SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描，仅命中 font-semibold / font-black 这类字重类名，无端点。
- [ok] 官方描述 vs 实际能力（有无夸大） — frontmatter description（竖版海报 / 朋友圈分享图, 强视觉冲击）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [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/poster-hero 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] example.html 的 Tailwind CDN 外链是否构成运行时外发 — 该 <script src="https://cdn.tailwindcss.com"> 位于随包示例产物的 <head>，只在选择器 hover / 预览 iframe 中由浏览器加载，用于渲染这份静态示例本身；skill 目录内无脚本、无网络调用代码，SKILL.md 未要求产物引 CDN。
- [ok] "用 SVG 占位"是否需运行时生成 — 原文 "- 底部右下角放品牌 / 二维码 (用 SVG 占位)" 指在产物里画一个 SVG 占位图形，由 agent 直接写入 HTML；目录内无二维码生成脚本、无外部接口。
6結論
最適な用途： マーケティングのローンチやイベント告知用の縦型ポスターおよびモーメンツ共有画像に最適：ワンフレーズの主張 + 3〜5個のセールスポイント + QRコード/ブランド枠で、「スクロールした瞬間に目に留まる」強いインパクトを狙う用途に適しています。
不向きな用途： 控えめな余白を必要とするハイエンドブランドのトーンには不向き（テンプレートが明示的に「大胆な色彩/強いインパクト」を要求するため）。緻密な組版を要する長文や複数ページの資料には不向き（doc/deck系を選択すべき）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload poster-hero.tar.gz
sha256:
Option B · Copy Guide for Agent8eac8d0976c45e65…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.