Hubbestaiskill.com

Home / All Skills / Design & Motion / deck-dir-key-nav

Design & Motion · nexu-io/html-anything

deck-dir-key-nav

8-slide solid color backgrounds, 160px display + 4px accent + Mono arrow list

L1 Basic · Source registration onlyV1 Commit-PinnedDual-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

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The color rule is not "choose one primary color" but "one color per slide, cycling through an 8-color palette, allowing reuse"—thus the pacing of the entire deck is carried by background transitions rather than typographical hierarchy.

next/src/lib/templates/skills/deck-dir-key-nav/SKILL.md

- 页数由【用户内容】决定 (短内容 8 页起步, 长内容应更多); 每页单色背景, 从下列调色板里循环选取 (靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭), 同色可复用

Encoding "page change" as "background change" is the most effortless pacing mechanism in this template.

The 8 color palettes are implemented as 8 .t-* classes (t-indigo/t-cream/t-crimson/t-emerald/t-slate/t-violet/t-white/t-charcoal), with each class individually defining its .dk-accent foreground color to ensure accent readability across both dark and light backgrounds.

next/src/lib/templates/skills/deck-dir-key-nav/example.html

.tpl-dir-key-nav-minimal .t-cream .dk-accent{color:#B5392A}

Light backgrounds (cream/white) pair with dark accents (#B5392A / #6366f1), while dark backgrounds pair with light accents—contrast does not rely on ad-hoc model judgment.

"160px display heading + 4px accent line" is realized as .dk-h0{font-size:160px;letter-spacing:-5px} and .dk-line{width:90px;height:4px;background:currentColor}—there is only a single line, serving as the sole decorative element across the entire template.

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}

Font size and line width are locked down in SKILL.md, and the example adheres strictly to them.

"Mono list prefixed with arrow →" = ul.dk-list using monospace font + li::before{content:'→'} hanging indent: list bullets are generated by pseudo-elements without polluting 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}

Monospace + arrow ensures a minimalist page still retains the "this is a list" semantics.

Navigation features two persistent elements: bottom-left .dk-keyhint (kbd capsules showing "← → space", and on the last slide "press ← to rewind · F for fullscreen") and bottom-right .dk-page page numbers, both using var(--dk-mono) small text with 45% opacity.

next/src/lib/templates/skills/deck-dir-key-nav/example.html

<div class="dk-keyhint">nav · <kbd>←</kbd> <kbd>→</kbd> · <kbd>space</kbd></div>

Keyboard hints and page numbers are part of the page layout rather than overlays: remaining minimalist yet discoverable.

At the end of example.html, an extra "static preview fallback" CSS snippet is included: because there is no runtime.js in the directory, all slides are set to visible, relative, and height:100vh—turning the preview into a continuous long scroll rather than a page-flipping deck.

next/src/lib/templates/skills/deck-dir-key-nav/example.html

/* Static-preview fallback (runtime.js is absent — keep every slide visible) */

This explains why multiple example.html files in this batch contain zero JS: preview relies on static fallback, while interaction is deferred to the runtime injected during publishing.

Runtime remains entirely host-side: the template directory contains zero executables; prompt is assembled via assemblePrompt and executed by a local agent CLI, and deck pagination is handled by the host splitting <section class="slide">.

next/src/lib/templates/shared.ts

export function assemblePrompt(opts: {

The skill itself is purely prompt + static preview.

2Core Capabilities

01Minimalist keynote positioning: "Have something to say, but nothing to look at"

028-color solid background cycling + paired accent foreground color for each

03160px giant typography statement slides

044px short, thick accent line (the sole decorative element)

05Monospace font + → hanging indent list

06Bottom-left kbd navigation hints + bottom-right page numbers

07240px giant numeric slides (monospace glyphs)

08Last slide rewind / fullscreen hint (kbd F)

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（Inter / Noto Sans SC / JetBrains Mono）
network	宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Register source and version

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text; no script execution or external impact.

Audit Notes: Evaluation target = the skill directory itself (next/src/lib/templates/skills/deck-dir-key-nav/): Contains only SKILL.md and example.html, with no executable files (.sh/.py/.mjs/.ts, etc.), no package.json, and no installation scripts. Contains no code reading credentials / environment variables / cookies, and no disk write instructions (HTML is output in the model's text response, with saving handled by the host frontend). The <script> count in example is 0. SKILL.md is purely layout/content specifications and mentions no backend generation services or endpoints to access at runtime. According to Batch 4 criteria (output references are not graded; pure instruction templates are rated green), this template is pure instruction. The only endpoint appearing in the directory is fonts.googleapis.com (found in example.html, belonging to artifact examples/metadata fetched browser-side, not initiated by skill code). Host-side behavior is not graded here and is documented separately in verdict.risks: convert route spawns local agent CLI and passes prompt via stdin (next/src/lib/agents/invoke.ts), shared instructions require CDN import of Tailwind / Google Fonts (next/src/lib/templates/shared.ts), and the preview iframe uses sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

[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），与目录内容相符。

6Verdict & Scenarios

Content-first with minimal decoration; style almost never drifts

Built-in palette contrast assurance

Keyboard discoverability is baked into the design

Slide count is uncapped by the template

Best for: Ideal for "one idea per sentence" short talks, internal pitches, personal opinions / showcase shares, and purely text-based presentations lacking visual assets; also well-suited for screencast decks requiring keyboard / touch navigation.

Not for: Not suitable for reports requiring images, charts, complex data, or rich brand visuals (the template provides almost zero graphic capability, the sole graphic element being a 4px line); not suitable for long-form content (a 160px font size means only one sentence per slide).

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

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.