Design & Motion · nexu-io/html-anything
deck-simple
General-purpose horizontal-swipe HTML deck, no magazine-like tone
L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit
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
This skill acts as a "template package" for html-anything: frontmatter is used by the selector to retrieve metadata, and the SKILL.md body (after frontmatter) is loaded verbatim by loader as model instructions.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
The template body has 13 lines / 651 bytes (one of the thinnest in this batch); frontmatter is parsed into fm/body via parseFrontmatter, and no scripts within the directory are involved.
The actual prompt sent to the model = shared design instructions + this template body + [Input Format] + [User Content]; the shared instructions also include an override rule stating that the page count/layout numbers in the template are not upper limits.
next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
The override rule immediately following in the same document states verbatim: the template only defines "available layouts / style / palette / fonts / component libraries", and does **not define** the count of slides / frames / cards / sections.
Output discipline is strictly enforced by shared instructions: the agent is forbidden from using any filesystem tools; HTML must be streamed as text via stdout and persisted to disk by the frontend.
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何
This template itself does not declare disk persistence methods, relying entirely on this shared constraint.
Horizontal swiping is implemented using CSS scroll-snap: body of example.html uses scroll-snap-type: x mandatory without depending on any third-party libraries.
next/src/lib/templates/skills/deck-simple/example.html
scroll-snap-type: x mandatory;
The same file contains style rules like .slide { flex: 0 0 100vw; … scroll-snap-align: start; }, delivering the swipe feel purely through CSS.
Self-determined slide count: cover + N content slides + closing; starting at 6-10 for short content, more for long content, with each slide having only one core message + one image/chart.
next/src/lib/templates/skills/deck-simple/SKILL.md
- 每页一个核心信息 + 1 张图 / 1 个图表
The "- top progress bar" in the same section provides an overall sense of progress, replacing flashy navigation controls.
Keyboard navigation and hash synchronization are specified in the body: ← / → switching + hash sync, making it easy to share specific slides.
next/src/lib/templates/skills/deck-simple/SKILL.md
- 键盘 ← / → 切换 + hash 同步
Consistent with similar requirements in deck-open-slide-canvas, indicating this is a shared convention across the repo's deck family.
Slide containers follow the repo-wide deck convention: all 6 sections in example.html include slide in their class (using data-od-id rather than data-slide-id).
next/src/lib/deck.ts
const dataId = extractAttr(openTag, "data-slide-id");
When deck.ts cannot find data-slide-id, it falls back to a 1-based index, allowing this sample to still be parsed and exported slide by slide.
2Core Capabilities
01General horizontal-swipe structure: cover + N content slides + closing, with N determined by content length
02One core message + 1 image/chart per slide (enforcing an upper limit on information density)
03Top progress bar providing a sense of progress
04Keyboard ← / → switching + hash sync (shareable to specific slides)
05Sample output uses pure CSS scroll-snap for horizontal swiping, with zero remote resources
06Explicit negative constraints: avoid magazine style (preventing editorial design from stealing the focus)
07CLI keyword routing: simple / deck / 简单 / 简洁 / 简约 → deck-simple
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | 宿主本机 agent CLI（应用侧 spawn；非本 skill 指令） |
| package | 无第三方包/字体依赖（产物样例自包含） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
- 网络端点: External network access declaration: Zero external endpoints in directory: example.html contains no http(s) URLs, no remote <script>, no @import; only inline <script> (navigation
Audit Notes: . Evaluation target = skill directory (SKILL.md + example.html): contains no executable script files, no credential reads, no disk-write instructions, and zero external endpoints within the directory (example.html has no URLs/no remote scripts/no @import, fonts use system stack); SKILL.md body contains zero URLs and zero CDN requirements. The only item to note under risks is that example.html contains inline <script> (navigation and progress bar logic)—this is static code in the preview artifact, not skill instructions, and does not alter the rating. Following batch 4 criteria, all html-anything templates in this repo are uniformly rated 🟢 Green: the evaluation target is the skill's own directory; the host shell (loader.ts/assemblePrompt/local agent CLI/preview iframe) and font/CDN references in example.html belong to artifact-phase runtime behaviors (fetched by browser, not transmitted during skill execution), which are only documented in reason/risks and do not affect the rating.
5Second-Pass Verification
- [ok] 文件清单（2 个文件，无脚本文件） — SKILL.md(651B) + example.html(7489B)；无 .sh/.py/.js/.ts。
- [ok] 正文零端点复核 — SKILL.md 内 http/CDN/fetch/script 零命中。
- [ok] 目录内端点自证（零命中） — example.html 全文件无 http(s)://、无 @import、无远程 <script>；仅有内联 <script> 与系统字体栈。
- [ok] 无凭证读取 — key/secret/token/.env 零命中。
- [ok] 无写盘指令 — SKILL.md 无 write/save 类指令；shared.ts 明令禁文件工具。
- [ok] 产物的横向翻页为纯 CSS — example.html「scroll-snap-type: x mandatory;」与 .slide 的 scroll-snap-align 定义，无需第三方库。
- [ok] official_desc 逐字命中 — 与第 6 行 description 引号内文本一致。
- [ok] CLI 路由行存在 — cli/src/skills-matcher.ts 第 62 行 simple 行逐字命中。
6Verdict & Scenarios
Best for: Suitable for generic scenarios requiring "a clean deck first": pitch, overview, study notes, internal presentations—content-agnostic, zero external dependencies, ready for offline opening and export. Also serves as a baseline comparison for other deck templates.
Not for: Not suitable for occasions requiring strong visual branding (no preset palette/fonts); not suitable for magazine-style long-form reading (inherently anti-magazine); not suitable for presentations requiring speaker notes (lacks aside.notes mechanism).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-simple.tar.gz
sha256:
Option B · Copy Guide for Agenteb7207bfa03a44b8…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.