コンテンツ制作 · nexu-io/html-anything

blog-post

マストヘッド、ヒーロー、図表、プルクオート、著者クレジットを備えた、雑誌スタイルの長文記事

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE:Apache License Version 2.0, January 2004;GitHub API spdx_id=Apache-2.0)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

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、ファイルツールの使用禁止、Tailwind および Google Fonts の CDN 利用、コンテンツの信憑性、中日欧文間のスペース)を担保します。

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

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
同ファイルの後半には別の規則もあります。出力されるスライド/フレーム/カード/セクションの数量は、【ユーザーコンテンツ】の実際の長さと情報構造によって完全に決定されます。これにより、コンテンツが長くなってもこの種のテンプレートが破綻しない理由が説明されます。コンテンツ1セクションにつき少なくとも1枚のカード/セクションが割り当てられ、テンプレートはレイアウトプールを提供するに留まります。

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

next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
ここで行われていること:テンプレートスキルはプロンプトを提供するのみで、能力(コード記述やツール実行を含む)はホスト CLI の既存権限に依存します。スキルディレクトリ自体にはスクリプトエントリが存在しないため、判定はディレクトリ内のアセットのみに基づいて行われます(ホストの挙動は評価対象外)。

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

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
編集モードでは別途 buildEditPrompt が実行されます(最小限の差分編集、ファイルツールの禁止、完全な HTML の直接ストリーミング出力を要求)。そのため、この種のテンプレートの生成物は安定した形態を保ちます。単一ファイル HTML、インライン CSS/SVG で構成され、外部リンクはフォントおよび個別のテンプレートが明示的に要求するグラフライブラリのみに限定されます。

テンプレートはタイポグラフィ優先の比率制約(文字 70% / 図版 20% / 装飾 10%)で始まり、600文字以上を要求することで、短い画像付きカード形式の入力を直接排除します。

next/src/lib/templates/skills/blog-post/SKILL.md
【意图】≥ 600 字的真正的长文章, 排版以 typography 为主, 70% 文字 20% 图 10% chrome。
ここで行われていること:形容詞ではなく比率によって「雑誌感」を定義しています。本文を主役に据え、図表や装飾の割合を抑えることで、モデルが長文記事をカードで埋め尽くすのを防ぎます。

骨格は5つのセクションに固定されています:Masthead → Hero → 65ch 1カラム本文 → Author bio カード → Related posts 3連カード。

next/src/lib/templates/skills/blog-post/SKILL.md
- Masthead (publication name + date)
同じ段落で本文コンテナの幅 65ch と「figures、pull quotes、インライン引用を含む」ことが規定されており、本文内部に3種類のインライン要素が要求されます。hero のメタデータ(著者クレジット + 読了時間)と組み合わさることで、出版物としての体裁が整えられます。

3つの組版ディテールが個別に規定されています:pull quote(大型セリフ体イタリック + 左側アクセントライン)、figures 付属のイタリック caption、角丸ダークテーマの言語タグ付きコードブロック。

next/src/lib/templates/skills/blog-post/SKILL.md
- Pull quote 用大号 serif 斜体 + 左侧色条
figures の caption はイタリックかつ小さめのフォントにする必要があります。コードブロックは article-magazine と同じ仕様であり、同一のデザイン言語を再利用することでテンプレート間の視覚的一貫性を保っています。

サンプル生成物は完全なインライン CSS + システムフォントスタックで実装されており(Tailwind なし、フォント CDN なし、全体で URL なし)、このテンプレートの外部リンクゼロ路線の実現を証明しています。

next/src/lib/templates/skills/blog-post/example.html
font-family: -apple-system, system-ui, sans-serif
ここで行われていること:サンプルは組版のディテール(Masthead の極細ライン、lede、byline アバタープレースホルダー、hero-figure、数値スタットブロック、blockquote)で雑誌感を表現しており、外部リソースに一切依存せずに開くことができます。

サンプルの本文は hero/lede/byline/hero-figure/pull quote/figures などの骨格要素を実装していますが、SKILL.md が要求する Author bio カードおよび Related posts 3連カードは実装されていません。

next/src/lib/templates/skills/blog-post/example.html
<figure class="numbers">
この figure は本文中の3連数値表示ブロック(38ms → 4ms など)であり、figures の要件に該当します。ただし、サンプルの末尾は募集エンドノートカードで直接終了しており、bio や related posts セクションが存在しません。これは不一致(discrepancy)として記録され、テンプレートの正式な能力定義は SKILL.md に準拠します。

2コア機能

01長文記事の骨格:Masthead + Hero(大見出し + サブタイトル + 著者クレジット + 読了時間)
0265ch 1カラム本文コンテナ(figures、pull quotes、インライン引用の3種類のインライン要素を含む)
03Pull quote:大型セリフ体イタリック + 左側カラーアクセントバー
04Figures 付属 caption(イタリック、小さめのフォントサイズ)
05コードブロック:角丸 + ダークテーマ + 言語タグ(article-magazine と同一仕様)
06記事末尾のレイアウト枠:SKILL.md では Author bio カード + Related posts 3連カードを要求(サンプルでは未実装、verification 参照)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストのみであり、スクリプト実行や外部への影響はありません
監査ノート: 判定はスキル自身のディレクトリ(SKILL.md + example.html の2ファイルのみで構成され、scripts/ なし、組み込み CLI なし、認証情報の読み取りなし、ディスク書き込みなし)のみに基づいて行われます。スクリプトのエントリポイントはなく、組み込み CLI、認証情報の読み取り、ディスク書き込みの指示も存在しません。SKILL.md 本文は実行時に外部エンドポイントの読み込みを要求していません(レイアウトセクション、インライン要素タイプ、フォントスタイルの記述のみで、エンドポイントは含みません)。実行時に外部通信は一切発生しません。ディレクトリ内に実際に現れるエンドポイントは、example.html 内の URL ゼロ、<script> ゼロ(完全なシステムフォントスタックのインライン CSS)のみに留まります。ディレクトリ内にネットワークエンドポイントは存在せず、第4バッチ最終基準に基づき**生成物段階の参照**(生成された HTML がブラウザで開かれた際に CDN/フォントを取得するものであり、スキル実行時には収集・送信・アセット転送を行わない)に該当するため、リスク格付けの対象とはせず、ここにエンドポイントを列挙するのみとします。ホストシェル(loader → assemblePrompt → ローカル agent CLI spawn、プレビュー iframe sandbox)も同様にホスト側の挙動であり、verdict.risks に記録されています。

5二重目の独立検証

  • [discrepancy] 示例覆盖度 vs SKILL.md 骨架 — SKILL.md 要求五段骨架,example.html 实现了 Masthead / Hero / 正文 / 三处细节,但缺 Author bio 卡片与 Related posts(3 张卡)——示例结尾为 .endnote 招募卡。详情页不宜把该示例当作模板完整形态。
  • [ok] 「零外链」判定 — blog-post/ 目录内 http(s) 命中数为 0,<script> 命中数为 0;字体为 -apple-system/system-ui/monospace 等系统字族,执行期与产物期均无外发。
  • [ok] 无 example.md 的后果 — 目录只有 SKILL.md + example.html;loader 的 metaFromDir 以 existsSync 判定 hasMd=false,选择器仍会因 hasHtml=true 生成 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結論

  • 比率と文字数の下限値によって長文を定義しており、最も意図判定が容易な宣言の1つです(文字 70% / 図版 20% / 装飾 10%、600文字以上)。
  • 骨格とディテールの役割分担が明確:5つのセクション構造 + 3つの組版ディテール(pull quote / figure caption / コードブロック)により、モデルが独自にページレイアウトを設計する必要がありません。
  • サンプル生成物は外部リンクなし、スクリプトなし、完全なインライン CSS であり、オフラインでも閲覧可能で、タイポグラフィ駆動アプローチのクリーンな見本となっています。
  • 言語横断で利用可能:テンプレートは中国語ですが、サンプル生成物は英語の技術長文記事(Mira Hassan / Filebase)であり、レイアウトが言語に縛られないことを示しています。
  • 最適な用途: 本格的な長文成果物に最適:技術ポストモーテム、企業ブログ、詳細な批評、インタビュー記事など。特に美しい組版とオフラインでの閲覧性を両立させたいシナリオに適しています(サンプルは完全なインライン CSS + システムフォントスタック)。
    不向きな用途: 短いコンテンツや画像付きカードには不向き(600文字以上および 65ch 1カラムはハード制約);複数カラムの雑誌レイアウトやリッチなインタラクションを必要とするレポートには不向き;独自のブランドフォント/カラーが必須のシナリオには不向き(テンプレートではフォントファミリが指定されていないため、別途要件の提示が必要)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload blog-post.tar.gz
    sha256: 95b69396ce0f37a7…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.