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

digital-eguide

見開き2ページのデジタルガイド(表紙+レッスンページ+プルクオート+ステップリスト)。

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

1仕組みと動作原理

この skill は実行可能プログラムではなく、「1ディレクトリ=1テンプレート」の構成をとっています。SKILL.md の frontmatter はセレクター表示用であり、本文(body)はモデルに送信されるプロンプトそのものです。テンプレートの追加はディレクトリの追加のみで完結し、TypeScript の変更は不要です。

next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
同一ファイルのヘッダーコメントにディレクトリ規約が明記されています:SKILL.md(frontmatter + prompt body)/ example.md(任意の入力サンプル)/ example.html(任意のプレビュー)。本 skill ディレクトリはまさにこの構造に従っています。

実際に発行されるプロンプトは、プラットフォーム共通デザイン指示(SHARED_DESIGN_DIRECTIVES)+本 skill の SKILL.md 本文+ユーザーコンテンツで構成され、assemblePrompt によって1本のプロンプトに結合されます。

next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
したがって、本 skill の本文は「レイアウト/スタイル/コンポーネントライブラリ」の部分のみを担当します。出力規律(単一ファイルHTML、ユーザーの実データ使用必須、コンテンツ主導の数量決定)は共通指示に由来するため、テンプレート作成者が重複して宣言する必要はありません。

完成稿はファイルシステムを経由しません。共通指示により Write/Edit/Bash などのファイル操作ツールの使用が明示的に禁止されており、モデルはHTML全体を応答本文として直接ストリーミング出力します(stdout はフロントエンドによって捕捉され保存されます)。

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
これが「skill 自体はディスク書き込みゼロ」である仕組みの根拠です。ファイルを書き込むのはホスト側のフロントエンドであり、skill ではありません。また、本ディレクトリ内にはスクリプトが一切存在しません。

成果物は単なるWebページではなく「開かれた本」です。左右に並んだ横並びの見開き2ページ構成で、左ページが表紙、右ページが本文となり、外観(リードマグネット風)に特化しています。

next/src/lib/templates/skills/digital-eguide/SKILL.md
- 两页 side-by-side 横向, 像翻开的书
これも【レイアウト】項目によって固定されています:Page 1 表紙(ディスプレイタイトル+著者+'What's inside' データ+目次ティーザー)、Page 2 本文(レッスン本文+プルクオート+ステップリスト)。この2ページが納品物の全容であり、コンテンツ量に応じてページ数が増えることはありません。

本を開いたような質感は2本のCSSによって作られています。コンテナの flex 横並び+36px の余白、各ページ幅 540px・最小高さ 740px、さらにそれぞれ ±0.6deg の逆方向の微小回転が適用されています。

next/src/lib/templates/skills/digital-eguide/example.html
.page.left { transform: rotate(-0.6deg); }
同ファイル内の .page.right では rotate(0.6deg) が適用され、背景色が --paper-2 に切り替わることで、濃淡による紙の重なり感を表現しています。.page には 0 30px 60px のソフトシャドウも付与されており、これが「机の上に平置きされた」視覚効果を生み出しています。

サンプル内のページにはセマンティックアンカーが付与されています。左ページは article.page.left.cover(data-od-id="cover")、右ページは article.page.right.spread(data-od-id="spread")となっており、後からのブロック特定を容易にしています。

next/src/lib/templates/skills/digital-eguide/example.html
<article class="page right spread" data-od-id="spread">
data-od-id はこの評価対象テンプレート群における「ブロック命名」の規約(od = open design)であり、全81ディレクトリ中一部のサンプルでのみ使用されています。リポジトリのコード層にはこれを消費するロジックは存在せず(grep ヒットなし)、成果物の可読性を高めるためのマーキングに過ぎません。

本文ページのタイポグラフィは「ドロップキャップ+番号付きステップ+引用符で始まる大きな引用文」の3点セットを採用しています。.columns p:first-letter でドロップキャップを作成し、.steps .row では 28px の番号カラムと破線区切りを使用しています。

next/src/lib/templates/skills/digital-eguide/example.html
.steps .row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
SKILL.md の「lesson body + pull-quote + step list」に対応しています。引用ブロックには個別の data-od-id="pullquote" が付与され、56px の引用符グリフ(.pullquote .open)で始まります。

表紙はデータ行+目次ティーザーを用いて「教材プロダクト感」を演出しています。3つの統計数値(16 / 38 / 1)+6行の目次項目(名称+リーダー点線+ページ番号)で構成されます。

next/src/lib/templates/skills/digital-eguide/example.html
<h2 class="inside">What's <em>inside.</em></h2>
統計数値には .stat .num の 36px セリフ数字を使用し、目次項目には .toc .item のリーダー点線を使用しています。いずれも純粋なCSSであり、画像やスクリプトは使用していません。

サーバー側の /api/convert は、templateId に基づいてディスクから skill を読み込み、プロンプトを組み立て、ローカル agent CLI を spawn して SSE ストリームで出力を転送するという3つの処理のみを行います。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同ファイル内でまず `const skill = loadSkill(templateId);` が実行され(テンプレートが存在しない場合は400エラー)、その後 invokeAgent に渡されます。skill ディレクトリ自体がプロセスを生成したりネットワーク通信を行ったりすることはありません。

2コア機能

01見開き2ページのデジタルガイド:左表紙(タイトル/著者/データ/目次)+右本文(本文/引用/ステップ)
02本を開いたような質感:横並び2ページ+逆方向の微小回転+用紙の濃淡差+ソフトシャドウ
03エディトリアル品質の本文タイポグラフィ:ドロップキャップの導入、番号付きステップ行、破線区切り
04キークオートと署名を配置する大きなプルクオートブロック
05リーダー点線付きの目次項目(名称+ページ番号)
06落ち着いたベージュの紙トーン(--paper: #faf3ea / --paper-2: #f4ecdf + レンガ色アクセント)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への副作用は一切ありません
監査ノート: 判定対象=skill 自身のディレクトリ(SKILL.md + example.html/example.md、本ディレクトリ内にはスクリプト、認証情報の読み取り、ディスク書き込み指示、ネットワーク呼び出しコードは一切存在しません)。第4バッチの最終基準に基づき、html-anything テンプレートは一律で green と判定されます。SKILL.md 本文はランタイムサービスバックエンド/API を指定しておらず、ユーザー素材を外部生成バックエンドに送信することもありません(orange 要件なし)。また、リバースエンジニアリング、なりすまし、バックエンドのバイパスも存在しません(red 要件なし)。ディレクトリ内に実際に存在するエンドポイントは、成果物サンプル内の外部リンク(example.html の Google Fonts preconnect およびスタイルシートリンク(fonts.googleapis.com / fonts.gstatic.com))のみであり、これらは「成果物サンプル」に該当し、基準上判定対象外ですが、自己証明のために記載しています。なお、ホスト側に関して、プレビュー用 iframe に sandbox="allow-scripts allow-same-origin" が設定されている点、ローカル agent CLI が spawn される点(next/src/lib/agents/invoke.ts)、共通指示により成果物に CDN 参照が求められる点はプラットフォーム側の挙動であり、説明としてのみ記載しています。

5二重目の独立検証

  • [ok] 「两页跨页」且不随内容扩页 — 样例恰 2 个 article.page;SKILL.md【意图】明写「一封面一内页跨页排列」。
  • [ok] 「像翻开的书」的视觉手法 — flex 横排 + .page.left/.page.right 反向 0.6deg 旋转 + 两页纸面色差 + 30px/60px 柔影。
  • [ok] 「pull-quote + 步骤列表」 — .pullquote(含 56px 引号字形与署名行)与 .steps .row(4 条编号步骤)均在样例内。
  • [ok] 字体依赖 Google Fonts — 样例 <link> 引入 Cormorant Garamond / DM Serif Text / IBM Plex Mono 三族;离线打开时回落到 Iowan Old Style/Georgia,布局不崩。
  • [ok] data-od-id 的作用 — 样例有 5 处 data-od-id(cover/toc/spread/pullquote…),但 repo 内 TS/JS 对 data-od-id 零引用(grep 无命中)→ 仅成稿语义标记,不是运行时钩子。
  • [ok] 无外部图片 — 全文无 <img> 与外链图;封面的几何点/线均为 CSS 绘制。

6結論

  • 明確な用途を持つ特徴的なフォーマット:見開き2ページの展開が「開いた電子書籍のプレビュー」と直結し、一般的なスライド資料よりもダウンロード可能なリードマグネットに適しています。
  • 印刷物のディテールを純粋なCSS(ドロップキャップ/点線目次/紙の微小回転/ソフトシャドウ)で再現しており、画像素材やスクリプトは一切不要です。
  • 3系統のフォントの使い分け(ディスプレイ用/本文用/等幅ラベル用)により、わずか2ページでありながら完成されたエディトリアルな質感を持ちます。
  • 狭い画面幅へのフォールバック対応:92vw / max-width:540px で縦積みに切り替わり、モバイル端末でも横方向に見切れることがありません。
  • 最適な用途: 短い記事やチェックリストを、ダウンロード可能な「デジタルガイド/スタイルハンドブック」のプレビュー(リードマグネット)としてパッケージ化する用途に最適です。クリエイターのニュースレター特典、コース概要のプレビュー、ブランドルックブックの冒頭ページ、または2ページのみの完成度の高いレイアウトが求められる場面に適しています。
    不向きな用途: 複数章にわたる長編チュートリアル(2ページに厳密に制限されています)、データ集約型またはグラフを必要とするレポート、横向きプロジェクター投影を前提としたスライドプレゼンテーション(縦長ページ構成のため)、日英混在の長文テキスト(本文セリフ体フォントが主にラテン文字向けのため)には適していません。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload digital-eguide.tar.gz
    sha256: 810081d8875f1560…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.