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

deck-dir-key-nav

8ページの単色背景、160px display + 4px accent + 等幅フォントの矢印リスト

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仕組みと動作原理

配色のルールは「主色を1つ選ぶ」のではなく、「8色のカラーパレットを順繰りに使い、1ページに1色を割り当て、同色の再利用も可能」というものです。これにより、全編のリズムはタイポグラフィの階層ではなく、背景色の切り替えによって生み出されます。

next/src/lib/templates/skills/deck-dir-key-nav/SKILL.md
- 页数由【用户内容】决定 (短内容 8 页起步, 长内容应更多); 每页单色背景, 从下列调色板里循环选取 (靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭), 同色可复用
「ページ送り」を「背景色の変更」としてコード化することが、本テンプレートで最も負担の少ないリズム設計メカニズムです。

8つのカラーパレットは8つの .t-* クラス(t-indigo/t-cream/t-crimson/t-emerald/t-slate/t-violet/t-white/t-charcoal)として実装され、各クラスごとに個別の .dk-accent 前景色を定義して、ダーク系・ライト系のどちらの背景でもアクセントカラーの視認性を確保しています。

next/src/lib/templates/skills/deck-dir-key-nav/example.html
.tpl-dir-key-nav-minimal .t-cream .dk-accent{color:#B5392A}
明るい背景(cream/white)には濃いアクセント(#B5392A / #6366f1)を、暗い背景には明るいアクセントを組み合わせることで、コントラスト判定をモデルの場当たり的な判断に依存させません。

「160px display 見出し + 4px accent ライン」は、.dk-h0{font-size:160px;letter-spacing:-5px} および .dk-line{width:90px;height:4px;background:currentColor} として実装されています。ラインは1本のみで、テンプレート全体で唯一の装飾要素です。

next/src/lib/templates/skills/deck-dir-key-nav/example.html
.tpl-dir-key-nav-minimal .dk-h0{font-size:160px;font-weight:900;line-height:.9;letter-spacing:-5px;margin:0 0 20px}
フォントサイズとライン幅は SKILL.md 内で厳格に固定されており、サンプルも文字通りそれに準拠しています。

「矢印 → プレフィックス付きの等幅リスト」= ul.dk-list に等幅フォントを使用し、li::before{content:'→'} でぶら下げインデントを適用:リスト記号は擬似要素で生成され、コンテンツDOMを汚しません。

next/src/lib/templates/skills/deck-dir-key-nav/example.html
.tpl-dir-key-nav-minimal .dk-list li::before{content:'→';position:absolute;left:0;opacity:.5}
等幅フォント + 矢印により、ミニマルな画面でも「これはリストである」というセマンティクスを明確に保持します。

ナビゲーションには2つの常駐要素があります:左下の .dk-keyhint(kbdカプセル表示「← → space」、最終ページは「press ← to rewind · F for fullscreen」)と右下の .dk-page ページ番号で、いずれも var(--dk-mono) の小文字・不透明度45%で表示されます。

next/src/lib/templates/skills/deck-dir-key-nav/example.html
<div class="dk-keyhint">nav · <kbd>←</kbd> <kbd>→</kbd> · <kbd>space</kbd></div>
キーボードヒントとページ番号はオーバーレイではなくページ自体の要素として配置され、ミニマルでありながら操作性を損ないません。

example.html の末尾には「静的プレビュー用フォールバック」CSSが追加されています。ディレクトリ内に runtime.js が存在しないため、全スライドを visible、relative、height:100vh に設定し、プレビューをページ送りではなく縦長スクロール表示にしています。

next/src/lib/templates/skills/deck-dir-key-nav/example.html
/* Static-preview fallback (runtime.js is absent — keep every slide visible) */
これにより、本バッチの複数の example.html がJSを一切含まない理由が説明されます:プレビューは静的フォールバックに頼り、インタラクションは公開時に注入されるランタイムに委ねられています。

ランタイムはホスト側に留まります。テンプレートディレクトリ内に実行可能ファイルは一切ありません。プロンプトは assemblePrompt で組み立てられてローカルの agent CLI で実行され、スライドのページネーションはホスト側が <section class="slide"> を分割することで処理されます。

next/src/lib/templates/shared.ts
export function assemblePrompt(opts: {
スキル本体は純粋にプロンプトと静的プレビューのみで構成されています。

2コア機能

01ミニマルな Keynote の位置付け:「言いたいことはあるが見せる素材はない」
028色単色背景のサイクル + 各色に対応するアクセント前景色
03160px の巨大タイポグラフィによる主張スライド
044px の短く太いアクセントライン(唯一の装飾要素)
05等幅フォント + → ぶら下げインデントのリスト
06左下の kbd ナビゲーションヒント + 右下のページ番号
07240px の巨大数字スライド(等幅グリフ)
08最終ページの rewind / fullscreen ヒント(kbd F)

3外部依存関係

KindDependency / Endpoint
networkGoogle Fonts(Inter / Noto Sans SC / JetBrains Mono)
network宿主共享指令声明的 Tailwind CDN(宿主侧要求,非本模板要求)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示文およびルールテキストのみで構成され、スクリプト実行や外部への影響はありません。
監査ノート: 判定対象=スキル自身のディレクトリ(next/src/lib/templates/skills/deck-dir-key-nav/):ディレクトリ内には SKILL.md、example.html のみが含まれ、.sh/.py/.mjs/.ts などの実行ファイル、package.json、インストールスクリプトは存在しません。認証情報、環境変数、Cookie を読み取るコードはなく、ディスク書き込み指示もありません(HTMLはモデルの回答テキストとして出力され、ディスク保存はホスト側のフロントエンドが担当)。example 内の <script> 数は0です。SKILL.md は純粋なレイアウト・コンテンツ仕様であり、実行時にアクセスする生成バックエンドやエンドポイントの指定はありません。第4バッチの判定基準(生成物の参照は評価対象外、純粋な指示テンプレートは green 判定)に基づき、本テンプレートは純粋指示型に分類されます。ディレクトリ内に実際に現れるエンドポイントは以下のみです(すべて生成物サンプルまたはそのメタデータに属し、ブラウザ側で取得されるもので、スキルコードが発起したものではありません):fonts.googleapis.com(example.html 内)。ホスト側の挙動は評価対象外とし、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二重目の独立検証

  • [discrepancy] 「单色背景」是否真为纯色 — 多数(indigo / crimson / emerald / slate / violet / charcoal)实为同色系 linear-gradient(135deg,…) 渐变,仅 t-cream(#F5F0E8)与 t-white 为纯色。属措辞宽泛:仍是「每页一个色系」,不影响观感与机制。
  • [ok] 160px / 4px 是否兑现 — .dk-h0 font-size:160px;.dk-line width:90px; height:4px——与 SKILL.md 数值逐字一致。
  • [ok] kbd 提示是否只出现在首末页 — 首题页(nav · ← → · space)与末页(press ← to rewind · F for fullscreen)各一处,正文页无。
  • [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html;<script> 计数 0;无 fetch/XHR/env/写盘代码。
  • [ok] 静态预览兜底注释是否与事实相符 — 注释声明 runtime.js is absent,目录内确实不存在 runtime.js;HTML 也无任何 <script src>。
  • [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699;skill.path = next/src/lib/templates/skills/deck-dir-key-nav,含 SKILL.md。
  • [ok] README 收录一致性 — README deck 表列出 deck-dir-key-nav(Directional key-nav deep browse),与目录内容相符。

6結論

  • コンテンツ重視・最小限の装飾で、スタイルがブレにくい
  • カラーパレット自体にコントラスト保証が組み込まれている
  • キーボードによる発見のしやすさが最初からデザインされている
  • テンプレート側でページ数の上限を制限しない
  • 最適な用途: 「1文に1つの主張」を込めた短いスピーチ、社内プレゼン、個人の意見・作品紹介、画像素材がない純粋なテキスト発表に最適です。また、キーボードやタッチ操作でスライド送りを行うスクリーン投影プレゼンにも適しています。
    不向きな用途: 画像、チャート、複雑なデータ、またはリッチなブランドビジュアルが必要なレポートには不向きです(グラフィック機能はほぼ皆無で、唯一のグラフィックは4pxのラインのみ)。長文コンテンツにも不向きです(1ページ160pxのフォントサイズは、1スライドにつき1文しか置けないことを意味します)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-dir-key-nav.tar.gz
    sha256: c67ac120d2a37bce…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.