Hubbestaiskill.com

Home / All Skills / Design & Motion / deck-magazine-web

Design & Motion · nexu-io/html-anything

deck-magazine-web

Digital magazine × E-ink aesthetic, WebGL fluid background + serif display

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

Horizontal slide switching is implemented as "a single flex track + translateX(-idx*100vw)": all slides are placed side by side, and paging only alters the transform with a 700ms transition. This is smoother than toggling display page by page and provides greater leeway for touch-dragging.

next/src/lib/templates/skills/deck-magazine-web/example.html

deck.style.transform = 'translateX(' + (-idx * 100) + 'vw)';

A track-based layout is the standard approach for horizontal decks; this template hardcodes it as applySlide().

The navigation model is explicitly declared as borrowed from the guizang-ppt template in the same repository (identical flex track + translateX, identical key/wheel/touch handlers), indicating that this template is a reskin built atop an existing implementation.

next/src/lib/templates/skills/deck-magazine-web/example.html

* Navigation model is borrowed from skills/guizang-ppt — same flex

This is the only file in this batch that annotates in comments which template the navigation was borrowed from, constituting a traceable in-repo reuse chain.

The typographic language originates from the kami design system: comments specify the adoption of kami tokens (warm parchment background, ink blue accent, single-weight serif, no italics), magnifying macro tokens by ~1.6× and tightening letter spacing by ~0.6× relative to the print baseline.

next/src/lib/templates/skills/deck-magazine-web/example.html

* tokens are scaled × ~1.6 vs. print baseline; letter-spacing scaled

Anchoring the "magazine feel" to an external design token system (DESIGN.md §3) rather than tuning parameters by intuition.

Explicit contract with the host: comments note that .slide.active is read by Open Design's host bridge (findActiveByClass in src/runtime/srcdoc.ts) to drive page numbering. No CSS rules reference it, and it is marked as load-bearing and not to be deleted.

next/src/lib/templates/skills/deck-magazine-web/example.html

/* load-bearing: .slide.active is read by Open Design's host bridge

This is the only template in this batch that explicitly notes that "the host will read a certain class of mine," demonstrating co-design across the preview/publishing pipeline.

Interactions feature a throttle lock: go(n) returns immediately when lock is true; only wheel/key/touch interactions go through throttle, whereas programmatic synchronization (host messages, restoring initial page) bypasses the lock—preventing rapid inputs from queueing consecutive page transitions during a single 700ms transition.

next/src/lib/templates/skills/deck-magazine-web/example.html

function go(n) {

Separating "input throttling" from "state synchronization" addresses a common pitfall in these kinds of JS-bundled decks.

Slide types are annotated with data-slide-kind (cover / chapter / content / stats / quote / cta / end). The 9-slide example covers cover, chapter divider, body content, big stat callout, pull quote, CTA, and end slides—faithfully fulfilling the layout checklist in SKILL.md.

next/src/lib/templates/skills/deck-magazine-web/example.html

<section class='slide s-stats' data-slide-kind='stats'>

Annotating slide types with data-* facilitates statistics collection and navigation jumps by the host or downstream scripts.

Both the "big stat callout slide" and "pull quote slide" are showcased in the example: the stats slide features a giant number accompanied by an explanatory phrase, while the quote slide employs a Sunday-paper style quote layout.

next/src/lib/templates/skills/deck-magazine-web/example.html

<section class='slide s-quote' data-slide-kind='quote'>

All four layout categories from SKILL.md are realized and identifiable in the example, rather than being mere paper specs.

Runtime execution is handled by the host: the template directory contains no standalone script files; the prompt is assembled by the host and passed to the local agent CLI. The JS in the example belongs strictly to the generated artifact content.

next/src/lib/agents/invoke.ts

import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";

The skill directory remains purely "text templates + examples" without executable assets.

2Core Capabilities

01Horizontal swipe HTML deck positioning (magazine × e-ink tone)

02Cover slide (serif display + WebGL fluid background)

03Chapter divider slide

04Big stat callout slide (giant number + explanatory phrase)

05Image grid slide

06Pull quote slide (Sunday-paper style)

07Keyboard ← / → navigation + hash synchronization

08Progress bar + navigation dots + Escape overview (implemented in example)

09Full keyboard control set: Arrow keys / PageUp / PageDown / Space / Home / End

10Single-file self-contained (includes styles and interactive scripts)

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（Source Serif 4 / Source Sans 3 / JetBrains Mono）
network	Google Fonts 静态域（preconnect 预连接）
network	产物示例 CTA 页的 GitHub 外链（指引用户去项目仓库 Star / 提 issue）
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; contains no script execution or external side effects

Audit Notes: . Evaluation target = skill's own directory (next/src/lib/templates/skills/deck-magazine-web/): contains only SKILL.md and example.html, with no executable files such as .sh/.py/.mjs/.ts, no package.json, and no installation scripts; contains no code accessing credentials / environment variables / cookies, and no disk write instructions (HTML is output in the model response body; persistence to disk is handled by the host frontend). Count of <script> in example = 1 (example.html × 1). SKILL.md is purely layout / content specifications and does not call out any generation backends or APIs to access at runtime; per Batch 4 evaluation criteria (artifact external references are not graded; pure instruction templates are rated green), this template is classified as pure instruction. The only endpoints actually appearing in the directory are the following (all belonging to artifact examples or their metadata, fetched client-side by the browser, not initiated by skill code): fonts.googleapis.com (found in example.html); fonts.gstatic.com (found in example.html); github.com (found in example.html). Host-side behaviors are not graded here and are recorded separately under verdict.risks: the convert route spawns a local agent CLI passing prompts via stdin (next/src/lib/agents/invoke.ts), shared instructions mandate CDN imports 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] 「WebGL 流体背景」是否存在于示例 — 不存在。example.html 内 canvas / getContext / WebGL / shader 关键字计数为 0（文件里唯一 <script> 是翻页逻辑），封面是暖羊皮纸底 + 墨蓝章节页的静态排版。SKILL.md 的「WebGL 流体背景」在示例中未落地，属描述超出现有预览稿（宿主共享指令也禁止引用外部图片、优先 CSS/SVG 内联，实际生成时是否引入 WebGL 取决于模型与所加库）。
[discrepancy] 「键盘 ← / → 切换; hash 同步」是否兑现 — 键盘兑现（方向键 / PageUp / PageDown / 空格 / Home / End 全套 + Escape 总览）；但示例脚本内没有 location.hash 读写，「hash 同步」这条在示例中未实现（截图与核对范围内未发现 hashchange 监听）。
[ok] 导航是否真有节流 — go(n) 在 lock 为真时直接 return；滚动 / 键盘 / 触摸走 throttle，程序化同步绕过锁（注释说明原因）。
[ok] 与宿主的 .slide.active 契约是否存在 — 注释声明 host bridge（src/runtime/srcdoc.ts findActiveByClass）读取该 class 驱动页码，并标注 load-bearing；宿主 deck.ts 亦按 <section class="slide"> 约定解析。
[ok] 目录内是否有脚本文件 / 凭证读取 / 写盘 — 目录仅 SKILL.md + example.html 两个文件，无独立脚本文件；示例 JS 不读取 env / 凭证、不写盘、无 fetch/XHR 请求（唯一外链是 <link> 字体与 CTA 的 <a href>）。
[ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-magazine-web，含 SKILL.md。
[ok] README 收录一致性 — README deck 表列出 deck-magazine-web（Magazine-style web deck），与目录内容相符。

6Verdict & Scenarios

Highest level of completeness/polish

Well-sourced typographic design language

Co-designed with the host environment

Standardized slide-type annotations

Best for: Suitable for brand storytelling, industry commentary, big stat presentations, pull-quote sharing, and other occasions requiring a "magazine aesthetic + horizontal flipping"; also suitable as a reference implementation for single-file decks featuring full out-of-the-box interactivity with easily customizable content.

Not for: Not suitable for presentations requiring genuine WebGL / fluid animations (the example lacks a canvas, requiring external libraries to be manually introduced, and host shared instructions disallow external images); not suitable for deliverables requiring completely offline self-containment (the output references external font URLs); not suitable for scenarios requiring hash deep-link routing (hash sync is not implemented in the example).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload deck-magazine-web.tar.gz

sha256: 44c08bb9682d2bdc…

Option B · Copy Guide for Agent

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.