1仕組みと動作原理

テンプレート自体に実行可能コードは含まれません：loaderはsrc/lib/templates/skills/<id>/SKILL.mdからfrontmatterと本文を読み込み、本文（body）をexampleコンテンツと共にLoadedSkillとして返します。

next/src/lib/templates/loader.ts

const raw = safeRead(path.join(dir, "SKILL.md"));

ここでの処理内容：SKILL.mdが唯一の動作ソースです。frontmatterはセレクターのレンダリング（zh_name/emoji/aspect_hint/tags/example_*など）に使用され、本文全体がプロンプトとなります。loaderはセマンティックな検証を行わず、テンプレートの記述をそのまま渡します。

配信前にホストがプロンプトを所定の形式で組み立てます：テンプレート本文は共有デザイン指示（SHARED_DESIGN_DIRECTIVES）と【入力形式】/【ユーザーコンテンツ】の間に挟まれます。

next/src/lib/templates/shared.ts

Wrap a per-template instruction body with the shared design directives and

ここでの処理内容：テンプレートは「この成果物がどのような外観を持つか」（レイアウト/リズム/コンポーネント）のみを定義し、共有指示がテンプレート横断的なハード制約（単一ファイルHTML、ファイル操作ツールの禁止、CDN経由のTailwindおよびGoogle Fonts、コンテンツの信頼性、中英文字間のスペース（Pangu spacing））を担います。

共有指示はハード制約をエージェントへの明示的な禁止事項として記述し、コンテンツ駆動型の数量を強制します（テンプレート内の数値は参考下限値にすぎません）。

next/src/lib/templates/shared.ts

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

同ファイルの続きにも規定があります：出力されるslide / frame / card / sectionの数量は、【ユーザーコンテンツ】の実際の長さと情報構造によって完全に決定されます。これにより、長文になってもテンプレートが破綻しない理由が説明されます（各段落に最低1枚のカード/セクションが割り当てられ、テンプレートはレイアウトパレットのみを提供）。

実際に実行されるのは、ユーザーのローカル環境にインストールおよびログイン済みのコーディングエージェントCLIです：ホストが子プロセスをspawnし、プロンプトを渡して、HTMLをstdoutからストリーミングでキャプチャします。

next/src/lib/agents/invoke.ts

import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";

ここでの処理内容：テンプレートskillはプロンプトのみを提供し、能力（コード生成やツール実行を含む）はホストCLIの既存の権限に依存します。skillディレクトリ自体にはスクリプトのエントリポイントが存在しないため、判定はディレクトリ内のアセットのみを評価します（ホストの動作は評価対象外）。

/api/convertがテンプレートの実行パスです：skill.bodyとユーザーコンテンツをプロンプトに組み立てた後、invokeAgentに渡します。

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

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

編集モードでは別途buildEditPromptが使用されます（差分編集を最小化し、ファイルツールを無効化し、完全なHTMLの直接ストリーミング出力を要求）。そのため、この種のテンプレート成果物の形態は安定しています（単一ファイルHTML、インラインCSS/SVG、フォントや個別テンプレートが明示的に要求するグラフライブラリ以外の外部リンクなし）。

テンプレートは「雑誌風の長文」を項目別のレイアウトチェックリスト（hero → 1カラム本文 → serif小見出し → 引用/コードブロック → 中央揃えornament → 文末カード）に分解し、エージェントは独自にレイアウトを考案することなくリストに沿ってコンテンツを埋めることができます。

next/src/lib/templates/skills/article-magazine/SKILL.md

- 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。

ここでの処理内容：「高級感」という曖昧な要求を実行可能な項目に落とし込みます。見出しのフォントサイズはTailwind classで明示され、メタデータは3項目に固定、サブタイトルは任意と指定されているため、テンプレートは極めて安定した出力を得られます。

可読性が数値化されています：本文は700pxの1カラム中央揃えに制限され、serifの見出しとsans-serifの本文でコントラストを形成します。

next/src/lib/templates/skills/article-magazine/SKILL.md

- 正文: 单栏, 最大宽度约 700px, 居中。

同じセクションで具体的なTailwindクラス名と明暗両対応の本文色（text-lg leading-relaxed text-neutral-700 dark:text-neutral-300）が指定されており、文字密度/行間/最大幅の3つの変数を固定することで、長文が全幅に広がってしまうのを防ぎます。

本文以外の雑誌らしい質感は、3つの専用パーツが担います：左側にアクセントボーダーを配した斜体引用ブロック、中央揃えのornament区切り線、文末のアクションカード。

next/src/lib/templates/skills/article-magazine/SKILL.md

- 引用块使用左侧粗 accent 色边线 + 斜体。

これら3点は単なる装飾リストではなく構造上の要件です：example.html内ではそれぞれblockquoteスタイル、ornamentセクション、フッターカードとして実装されており、項目ごとに検証可能です。

サンプルの成果物は1:1の実装リファレンスです：単一ファイルHTML、インラインスタイルシート、Tailwind CDN + Google Fontsで構成され、本文のhero/blockquote/ornamentはSKILL.mdの項目と対応しています。

next/src/lib/templates/skills/article-magazine/example.html

<div class="ornament"><span class="serif italic">· · ·</span></div>

ここでの処理内容：「セクション間は<hr>で区切るが、中央揃えの小さなornamentにする」という指示を可視化しています。エージェントはこのDOM構造をそのまま再利用できます。（参照されているTailwind/フォントは成果物生成時の取得に該当。security.reason参照）。

テンプレートはサンプル入力（Markdown）とペアで提供されます：frontmatterのexample_format: markdownで入力形式を宣言し、サンプル本文は元の投稿ソースが付与された実際の長文記事となっています。

next/src/lib/templates/skills/article-magazine/example.md

# 我读完 @trq212 那条推之后, 把所有 markdown 都换成了 HTML

ここでの処理内容：セレクターはexample_formatに基づいて「Markdownを貼り付けるだけでOK」とユーザーに案内します。example_source_urlはx.comの元投稿を指し、サイトにリンクバック可能な出典表記を提供します。

2コア機能

01雑誌風長文のシングルページレイアウト（hero + 著者メタデータ + 1カラム700px本文）

02serif見出し / sans本文のフォントファミリーの役割分担

03引用ブロック：左側の太いアクセントカラー境界線 + 斜体（サンプルではセリフ斜体 + ニュートラルカラー）

04雑誌スタイルのコードブロック（角丸、暗色背景に明色テキスト、言語ラベル）

05中央揃えのornamentとしてデザインされたセクション区切り（プレーンなhrではない）

06文末のアクションカード（サンプルでは「アイキャッチ画像のクレジット + 元投稿リンク」カードとして実装）

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

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

Agent 向け

自動ロード可能

管理者向け

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

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

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

監査ノート： 評価判定はskill自身のディレクトリのみに基づきます（SKILL.md + example.html + example.mdの3ファイルのみで構成され、scripts/なし、内蔵CLIなし、認証情報読み出しなし、ディスク書き込みなし）：スクリプトのエントリポイント、同梱CLI、認証情報の読み取り、ディスク書き込み指示はいずれも存在しません。SKILL.md本文はランタイムでいかなる外部エンドポイントの読み込みも要求していません（フォントサイズ、最大幅、フォントファミリー、Tailwindクラス名のみを記述）。実行時に外部通信は一切発生しません。ディレクトリ内に実際に現れるエンドポイントは、example.html:7-10のcdn.tailwindcss.com、fonts.googleapis.com、fonts.gstatic.com、およびfrontmatterと本文内のx.comの出典リンクのみです。これらは第4バッチの最終基準に従い**成果物フェーズでの参照**に該当します（生成されたHTMLがブラウザで開かれた際にCDN/フォントを取得するもので、skillの実行時には取得・送信・素材転送を行いません）。そのため安全性格付けには影響せず、エンドポイントの開示としてここに列挙するにとどめます。なお、ホストシェル（loader → assemblePrompt → ローカルagent CLI spawn、プレビューiframe sandbox）はホスト側の動作に該当し、verdict.risksに記録されます。

5二重目の独立検証

[ok] 「执行期是否有外发」判定 — SKILL.md 正文 URL 计数为 0；唯一 http(s) 出现在 frontmatter 的 example_source_url（示例出处标注）与 example.html 的 CDN/字体链接，属产物期引用（浏览器端拉取），按批4 终版口径不判级。
[discrepancy] 文末行动卡片 — SKILL.md 要求文末加一个简单的「如果觉得有用，欢迎转发」行动卡片；example.html 结尾实现为「题图致敬: 推文中那个 "everything is HTML" 的瞬间。」+ 原推链接卡。属示例自由发挥（同类结构、不同文案），不影响模板可用性，但详情页不应把该示例卡当作模板固定文案。
[ok] featured 推荐位 — frontmatter featured: 11，选择器会将其纳入 Featured/推荐分组；example_* 六个字段齐全，loader 会生成 example 元数据对象。
[ok] license / stars / commit 元数据 — GitHub API（api.github.com/repos/nexu-io/html-anything）：spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z；工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 553ed98c283f 同源）。
[ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md；目录内文件清单已用 glob 全量核对（含隐藏文件），无 scripts/、无 references/、无二进制资产（competitive-teardown 的 assets/ 为纯 HTML，另行记录）。

6結論

レイアウトの処方が項目と数値まで具体化されており、「雑誌感」がhero / 1カラム700px / serif小見出し / 引用ブロック / ornament / カードという6つの検証可能なパーツに分解されています。

サンプルがそのまま検収基準となります：example.htmlはSKILL.mdの各特殊パーツ（blockquote/ornament/インラインcode/末尾カード）を再現しており、1項目ずつ照合できます。

長文シナリオに合わせた可読性のハード制約（700pxの1カラム + 明暗両対応の本文色 + 行高）を課しており、汎用テンプレートのように余白設計をモデルの自由に任せきりにしません。

入力形式がサンプルと紐づけられており（example_format: markdown）、セレクターが正しい入力ヒントを提示できるほか、サイトの詳細ページでMarkdown→HTMLの対比を表示できます。

最適な用途： WeChat公式アカウント、ブログ、Substackなどの長文記事の一発レイアウト作成に最適：ユーザーがMarkdownの長文を渡すだけで、数秒でそのまま公開やスクリーンショット撮影が可能な洗練されたシングルページHTMLが得られます。また、長文テンプレートのベースラインとしても適しています（hero + 1カラム + 引用/コードブロックの組み合わせが最も堅牢）。

不向きな用途： 複数ページやマルチカラムの雑誌レイアウトが必要なシナリオには不向きです（1カラム700pxは固定制約）；インタラクティブなコンポーネントやグラフが必要なコンテンツには不向きです（テンプレートはスクリプトを読み込みません）；短いカードやポスターのみを求める入力には不向きです（card-*やposter系のテンプレートを選択すべきです）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload article-magazine.tar.gz

sha256: 115f78654ca46dcd…

Option B · Copy Guide for Agent

install.json

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

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.