1仕組みと動作原理
配色のルールは「主色を1つ選ぶ」のではなく、「8色のカラーパレットを順繰りに使い、1ページに1色を割り当て、同色の再利用も可能」というものです。これにより、全編のリズムはタイポグラフィの階層ではなく、背景色の切り替えによって生み出されます。
- 页数由【用户内容】决定 (短内容 8 页起步, 长内容应更多); 每页单色背景, 从下列调色板里循环选取 (靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭), 同色可复用
8つのカラーパレットは8つの .t-* クラス(t-indigo/t-cream/t-crimson/t-emerald/t-slate/t-violet/t-white/t-charcoal)として実装され、各クラスごとに個別の .dk-accent 前景色を定義して、ダーク系・ライト系のどちらの背景でもアクセントカラーの視認性を確保しています。
.tpl-dir-key-nav-minimal .t-cream .dk-accent{color:#B5392A}
「160px display 見出し + 4px accent ライン」は、.dk-h0{font-size:160px;letter-spacing:-5px} および .dk-line{width:90px;height:4px;background:currentColor} として実装されています。ラインは1本のみで、テンプレート全体で唯一の装飾要素です。
.tpl-dir-key-nav-minimal .dk-h0{font-size:160px;font-weight:900;line-height:.9;letter-spacing:-5px;margin:0 0 20px}
「矢印 → プレフィックス付きの等幅リスト」= ul.dk-list に等幅フォントを使用し、li::before{content:'→'} でぶら下げインデントを適用:リスト記号は擬似要素で生成され、コンテンツDOMを汚しません。
.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%で表示されます。
<div class="dk-keyhint">nav · <kbd>←</kbd> <kbd>→</kbd> · <kbd>space</kbd></div>
example.html の末尾には「静的プレビュー用フォールバック」CSSが追加されています。ディレクトリ内に runtime.js が存在しないため、全スライドを visible、relative、height:100vh に設定し、プレビューをページ送りではなく縦長スクロール表示にしています。
/* Static-preview fallback (runtime.js is absent — keep every slide visible) */
ランタイムはホスト側に留まります。テンプレートディレクトリ内に実行可能ファイルは一切ありません。プロンプトは assemblePrompt で組み立てられてローカルの agent CLI で実行され、スライドのページネーションはホスト側が <section class="slide"> を分割することで処理されます。
export function assemblePrompt(opts: {
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts(Inter / Noto Sans SC / JetBrains Mono) |
| network | 宿主共享指令声明的 Tailwind CDN(宿主侧要求,非本模板要求) |
4推奨統制措置と判定根拠
- SKILL.md: 純粋なプロンプト指示文およびルールテキストのみで構成され、スクリプト実行や外部への影響はありません。
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結論
c67ac120d2a37bce…