デザイン&モーション · nexu-io/html-anything

deck-ljg-present

アウトラインを原文のまま 1:1 で色面・巨大タイポグラフィのマニフェスト風スライドへ変換し、文章を変えずに視覚的スタイリングのみを実施。black / red / yellow の3段階テーマに対応。

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

1仕組みと動作原理

テンプレート全体の中核となる前提は「アウトラインこそが真理であり、スキルはレンダラーである」という点です。文言や順序の変更を固く禁じ、唯一許可される操作は長すぎる段落の物理的な改ページのみです。これにより「AI による要約・リライト」で最も頻発する情報欠落を根本から排除します。

next/src/lib/templates/skills/deck-ljg-present/SKILL.md
- 标题不改字, 段落不改字, 列表不改字, 顺序不重排
本テンプレートは「原文変更の禁止」によって出力の忠実性を担保しているため、引き換えにモデルによる文章推敲はほぼ行えません。

Markdown 要素からスライド形式への変換は 1 対 1 のマッピング表に基づきます。H1 → emphasis カバーページ、H2 → 単独 theme ページ、段落は文字数に応じた区分、リストは項目数による分割、`---` → 単色ブレイクページ、`**強調**` → hl ハイライトとなります。

next/src/lib/templates/skills/deck-ljg-present/SKILL.md
| `# 一级标题` | 独占 **emphasis** 封面页(accent 底色, 通常单字/单短词) |
「どのように改ページするか」という主観的な判断を表引きの定型処理に落とし込むことが、出力の安定性の源泉となっています。

テーマカラーはドキュメントのトーンから推定され、1 つのスライドにつき 1 色のみ適用可能です。デフォルトの black(内省・論証)、マニフェスト向けの red、皮肉・批評向けの yellow があり、各テーマには標準背景色、emphasis ページ背景色、hl カラーが紐づけられています。

next/src/lib/templates/skills/deck-ljg-present/SKILL.md
| 沉思 / 论证 / 笔记(默认) | **black** | 黑底白字 | 红底白字 | 红 `#E63956` |
背景色は任意に選ぶのではなく、テーマカラーの変更に伴って emphasis ページとハイライト色も連動して切り替わる定義表により、ちぐはぐな配色を防ぎます。

フォントサイズは手動指定ではなくランタイムで計算されます。SKILL.md で CJK を 1.8 係数とする重み付けテーブルを定義し、骨格 JS の lengthTier() が「最長行の文字数 +(行数 - 1)× 4」から clamp 階層を判定します。サンプルでは 8 ページに対して single/short/medium/long がそれぞれ算出されます。

next/src/lib/templates/skills/deck-ljg-present/SKILL.md
| single | ≤2 | `clamp(320px, 80vmin, 1100px)` |
中英混在の文字数はカウントミスが発生しやすいため(CJK の重み)、係数 1.8 を固定値としてコード側で処理し、モデルの目測に頼りません。

SKILL.md にはインライン CSS と JS を含む完全かつ実行可能な HTML 骨格が埋め込まれており、骨格コードは変更せず SLIDES / title / subtitle / data-theme のみを埋めるよう明示されています。サンプルファイルはその完成形です。

next/src/lib/templates/skills/deck-ljg-present/SKILL.md
完整 HTML 骨架(agent 应**复用 CSS 与 JS 不要改**, 只填 SLIDES / title / subtitle / data-theme):
プロンプト内に「完成版コード」を記述している唯一のテンプレートであり、モデルが骨格をそのまま複製するため、スタイル崩れが生じません。

骨格自体に完備されたインタラクションを内蔵しています。キーボード(→/←/space/Enter/j/k/PageUp/PageDown/Home/End/F で全画面)、スワイプ操作(±40px の閾値)、左右画面クリックでのページ送り、さらに SLIDES に注入される全テキストを escapeHtml() でエスケープします。

next/src/lib/templates/skills/deck-ljg-present/example.html
return c.hl ? '<span class="hl">' + t + '</span>' : t;
インタラクションとエスケープ処理があらかじめ骨格に実装されており、モデルの役割は SLIDES 配列の生成に限定されるため、安全性と UX がモデル任せになりません。

サンプルは「同一アウトラインの忠実なレンダリング」です。example.md には 8 つのパラグラフからなる AI スピーチアウトライン(`---` 区切りを 1 つ含む)が記載され、example.html の SLIDES も正確に 8 項目となっています。冒頭の単語「AI」の emphasis ページは `# AI` に対応し、区切り線は空の emphasis 休憩ページ、末尾は問いかけで締めくくられます。

next/src/lib/templates/skills/deck-ljg-present/example.html
{ emphasis: true, lines: [] },
入力と出力が対になって存在するため、「1:1 のスライド化」という仕様を直接検証できます。

外部リソースの利用を明示的に禁止しています。骨格には CDN や外部フォントリンクが一切含まれず、システムフォント(Helvetica Neue / Arial Black / PingFang SC)を利用するため、生成物はオフライン環境でダブルクリックして直接開くことができます。

next/src/lib/templates/skills/deck-ljg-present/SKILL.md
**不要外链 CDN, 不要外部资源**。
ホスト側の共通指示である「CDN 経由での Tailwind や Google Fonts の読み込み」とは逆のアプローチであり、本テンプレートがデフォルト指示を明示的に上書きしています。

2コア機能

01要約・リライト・並び替えを行わない、アウトライン / Markdown からの 1:1 スライド生成
024つの鉄則:文言変更の禁止、並び替えの禁止、物理的な改ページのみ許可
03区切り線 `---` → 単色のブレイクページ化
04文字数による段落の階層分け:≤30文字は1ページ / 30〜80文字は1文ごとに1ページ / >80文字は約30文字で分割し「⋯」を付与
05項目数によるリストの分割(≤4項目は1ページ / 5〜8項目は2ページに分割 / >8項目は1ページあたり4項目)
063段階のテーマ(black / red / yellow)、emphasis ページの反転背景色および hl カラーのペアリング
07最長行に基づくランタイム自動フォントサイズ判定(CJK は 1.8 係数で計算)
08キーボード / タッチ / クリックの3種のページ送りと全画面表示(F)
09左揃えを保ったインデント段差(indent 0/1/2)による階層構造の表現
10全コンテンツをエスケープ処理(escapeHtml)後に描画し、インジェクション脆弱性を排除

3外部依存関係

KindDependency / Endpoint
package无外部依赖:字体走系统栈(Helvetica Neue / Arial Black / PingFang SC),骨架不引任何 CDN
network宿主共享指令声明的 Tailwind CDN(宿主侧默认,本模板显式禁止使用)
network第三方 skill 来源标注(frontmatter example_source_url,仅作出处记录,非运行时调用)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示および規則テキストのみで構成され、スクリプト実行や外部への影響はありません。
監査ノート: 評価対象=スキル自身のディレクトリ(next/src/lib/templates/skills/deck-ljg-present/)。ディレクトリ内には SKILL.md、example.html、example.md のみが存在し、.sh/.py/.mjs/.ts 等の実行可能ファイル、package.json、インストールスクリプトは含まれていません。クレデンシャル、環境変数、Cookie を読み取るコードはなく、ディスク書き込みの指示も存在しません(HTML はモデルの応答本文として出力され、ディスクへの保存はホストのフロントエンド側が担当します)。サンプル内の <script> タグのカウント=2(SKILL.md×1、example.html×1)。SKILL.md は純粋なレイアウト・内容規約であり、ランタイムでアクセスすべき生成バックエンドや API は指定されていません。第4バッチの判定基準(生成物の参照は評価対象外、純粋な指示テンプレートは green 判定)に基づき、本テンプレートは純粋指示型に分類されます。ディレクトリ内に実際に現れるエンドポイントは以下のみです(すべて成果物のサンプルまたはそのメタデータに属し、ブラウザ側から取得されるもので、スキルコードから呼び出されるものではありません):github.com(SKILL.md 内)。ホスト側の挙動は評価対象外とし、verdict.risks に別途記録します:convert ルートがローカルの agent CLI を spawn して stdin 経由でプロンプトを渡す処理(next/src/lib/agents/invoke.ts)、CDN 経由で Tailwind / Google Fonts を読み込む共通指示(next/src/lib/templates/shared.ts)、プレビュー用 iframe の sandbox="allow-scripts allow-same-origin" の使用(next/src/components/template-picker.tsx)。

5二重目の独立検証

  • [ok] 「1:1 铸页」是否在示例中真实成立 — example.md 的结构(# AI / ## 两个二级标题 / 两个列表 / --- / ## 收束问句)与 example.html 的 8 项 SLIDES 逐项对应:首项 emphasis 单字 AI、列表项按 indent:1 渲染、--- 变成空 lines 的 emphasis 休止页、末页 emphasis 收束。
  • [ok] 字号档位是否由代码而非人工决定 — lengthTier() 以「最长行字符数 +(行数-1)×4」判断档位,lineCharLen() 对 CJK 字符计权 1.8,与 SKILL.md 的档位表一致。
  • [ok] 「不要外链 CDN」是否被示例遵守 — example.html 与 SKILL.md 各自的 http(s):// 计数均为 0;SKILL.md 内有 2 处 github.com 链接(frontmatter example_source_url 与正文致谢的上游 ljg-skills 出处),属第三方来源标注而非运行时资源。内嵌骨架本身不含任何 CDN / 字体外链,字体走系统栈,产物可离线双击打开。
  • [ok] 注入面:SLIDES 文本是否被转义 — escapeHtml() 对 & < > " ' 做实体转义,再拼进 innerHTML;SLIDES 内容来自用户大纲,属必要防护。
  • [discrepancy] example.html 的 <script> 是否属模板自带可执行代码 — 是(本批 deck 示例里唯一有 1 个 <script> 的目录)。该脚本是 SKILL.md 内嵌骨架的一部分(翻页交互 + 字号分档),只会操作 DOM 与读取键盘/触摸事件,无网络请求、无存储、无凭证访问;展示层按「模板自带脚本」理解即可,不影响判档(仍为 green:无外发、无写盘)。
  • [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699;skill.path = next/src/lib/templates/skills/deck-ljg-present,含 SKILL.md。
  • [discrepancy] README 收录一致性 — README 的 deck 表列出 20 个 deck-* 模板,但没有 deck-ljg-present(该 pin 下 deck-* 实为 21 个)。文档滞后,不影响模板行为。

6結論

  • 極めて高い忠実性を誇り、意図しない内容改変がほぼ発生しない
  • 文章表現ではなくコード実装によってスタイルを担保
  • 外部依存なし(ゼロリンク)、オフライン動作可能
  • 入力と出力のペアによる検証可能性
  • ビルトインのエスケープ処理によるコンテンツセキュリティの確保
  • 最適な用途: マニフェスト型のスピーチ、発表会のスローガンページ、主張カード、個人のスタイルを前面に出した表現など、すでに練り上げられたアウトラインがあり、それを巨大フォントと色面のビジュアルに「定着」させたい場合に適しています。また、AI によるリライトを厳格に禁止したいコンテンツ要件にも最適です。
    不向きな用途: モデルによる要約、推敲、簡略化を求める用途には不向きです(改変および削除が禁止されているため)。図表、画像、アイコン、アニメーションが必要なコンテンツには適しません(禁止事項として明記)。長文段落を多用する資料には向きません(80文字を超えると強制分割され省略記号が付与されます)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-ljg-present.tar.gz
    sha256: d549ea071c2237ec…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.