Design & Motion · nexu-io/html-anything
deck-open-slide-canvas
Locked 1920×1080 canvas, React-component-level free composition, without binding to fixed templates
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 pack" for html-anything: frontmatter provides metadata for the selector, and the SKILL.md body (content following the frontmatter) is read as-is by the loader to serve as the model prompt.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
This template body is 53 lines / 2,930 bytes (the longest among the 9 templates in this batch); the frontmatter is split into fm/body via parseFrontmatter, with no scripts running inside the directory.
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 slide counts/layout counts 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 file literally states: The template only defines "available layouts / style / palette / typography / component library", and **does not define** the number of slides / frames / cards / sections.
Output discipline is strictly enforced by shared instructions: the agent is forbidden from using any file system tools, and HTML must be streamed as plain text via stdout to be saved to disk by the front end.
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何
This template itself does not declare a disk-saving mechanism, relying entirely on this shared constraint.
The core mechanism is "locked canvas + free layout": each slide is forced to 1920×1080 and fitted to the viewport using transform: scale, trading off for complete layout freedom within the slide.
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
- 画布: 每页严格 `width: 1920px; height: 1080px;` 用 `transform: scale(...)` 适配视窗 (默认 `scale(0.7)` 居中)。
Contrasting with fixed layout pool deck styles: this only locks the canvas and palette, letting the layout be chosen dynamically based on content nature (cover / question / quote / 3-column / 5-column / stat-card…), backed by a strict "overflow strictly forbidden" safeguard.
Constrains freedom using a "single visual focal point": no fixed template is enforced, but only 1 visual focal point is allowed per slide, strictly forbidding two side-by-side blocks of text with equal visual weight.
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
- 但每页**必须遵守一条规则**: 视觉重心 (visual hierarchy) 只有 1 个 — 一句金句、一个数字、一张图, 不要"什么都强调"。
This is an explicit countermeasure against the most common failure mode of "free composition" (cluttered slides lacking hierarchy), serving as an acceptance criterion at the prompt level.
Color palette and typography are locked to explicit enums: 1 of 4 palettes is chosen and kept unchanged throughout, font sizes use a fixed 10-step type scale, and padding is restricted to 96/128/160.
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
【调色板 — 每个 deck 选 1 套, 全程不改】
The same section locks font sizes to: `2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220`.
Slide containers are specified using the repository-wide deck convention `<section class="slide" data-slide-id="N">`, allowing application-side deck.ts to slice the entire HTML into independent documents for per-slide screenshots.
next/src/lib/deck.ts
<section class="slide" data-slide-id="N">
Note: The bundled example.html does not follow this convention (see discrepancy in verification.second_pass)—the convention itself is a prerequisite for the application-side preview/export pipeline.
Traceable to real upstream: The template notes "Inspired by 1weiho/open-slide", includes an example_source_url in frontmatter for provenance, and is synchronized in the README third-party source table.
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
example_source_url: "https://github.com/1weiho/open-slide"
This is a "traceable port" rather than an anonymous rewrite; the URL is only displayed as a reference and generates no network requests.
2Core Capabilities
01Locked 1920×1080 canvas + transform: scale(0.7) centered fitting, requiring no-scroll per slide
02Choose 1 of 4 color palettes (Ash & Lime / Sea Indigo / Mate Mocha / Pearl Rose) and keep it unchanged throughout
03Typography constraints: 10-step type scale + 3 padding options (96/128/160)
04Content-driven free layout pool (cover / question / quote / image-text / 3-column / 5-column / list / stat-card / full-bleed image)
05Restricted font families: Inter Tight / Inter (or Source Serif Pro), Noto Sans SC / Noto Serif SC for Chinese, JetBrains Mono for data, with no mixing of sans + serif
06Keyboard ← / → navigation + hash sync + fixed corner badges (№N/M on bottom-right, deck title on bottom-left)
07Anti-generic asset discipline: No decorative emojis, no rainbow colors, no off-the-shelf lucide/feather icon libraries (requires handwritten inline SVGs)
08Single-file HTML output + explicit Tailwind CDN declaration + forbidden external images
09Prioritized site ranking: featured 35 / recommended 9, occupying the most generic CLI routing keywords (open slide / canvas / 画布 / 自由)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | 宿主本机 agent CLI（Claude Code / Codex / Cursor / Gemini 等，由 html-anything 侧 spawn；非本 skill 指令） |
| network | Tailwind CDN（本 skill 正文点名的产出物交付方式；产物渲染时由浏览器拉取） |
| network | Google Fonts（产物示例引用，非 skill 正文要求） |
| network | 出处置标（frontmatter 元数据，非运行时调用） |
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)
- 网络端点: Declared external network access: example.html contains a remote script tag <script src="https://cdn.tailwindcss.com"> and a Goog
Audit Notes: . The target of evaluation = skill directory (SKILL.md + example.md + example.html): contains zero executable scripts, zero credential access, and zero disk-writing instructions; SKILL.md body contains no URLs or API calls. The only endpoint requiring clarification is line 53, "Single-file HTML; Tailwind CDN; No external images."—this designates the Tailwind delivery method for the **generated artifact** (the endpoint https://cdn.tailwindcss.com appears literally in example.html within the same directory), classifying it as an artifact reference; another endpoint in the directory is the Google Fonts @import in example.html. Both occur only when the browser renders the artifact and are not transmitted externally during skill execution. All html-anything templates in this repository are uniformly rated 🟢 Green per Batch 4 guidelines: evaluation target = the skill's own directory; runtime shell mechanisms (loader.ts/assemblePrompt/local agent CLI/preview iframe) along with fonts and CDN references inside example.html are artifact-phase behaviors (fetched by the browser, not dispatched during skill execution) and are noted solely in reason/risks without affecting the tier rating.
5Second-Pass Verification
- [ok] 文件清单（3 个文件，无脚本） — SKILL.md(2930B) / example.md(192B) / example.html(2317B)；无 .sh/.py/.js/.mjs/.ts，目录内无可执行代码。
- [ok] 目录内端点与档位依据 — SKILL.md:53「单文件 HTML; Tailwind CDN; 不要外链图片。」= 正文唯一 CDN 字样（端点 URL 见 example.html）；example.html 另有 fonts.googleapis.com 字体 @import 与 frontmatter 的 github.com/1weiho/open-slide 出处置标——均属产物引用/元数据，不判级。
- [ok] 无凭证读取 — 目录内 key/secret/token/.env/keychain 全部零命中。
- [ok] 无写盘指令 — 目录内 write/save/append 零命中；共享指令反而明令禁止文件系统工具。
- [ok] 画布硬规格可复核 — SKILL.md 逐字含 1920px/1080px、transform: scale、默认 scale(0.7)、禁止 overflow 四条。
- [ok] 10 级字号表与 4 套调色板可复核 — 字号表 2xs:18 … 5xl:220 与 Ash & Lime / Sea Indigo / Mate Mocha / Pearl Rose 四套 hex 均在正文逐字存在。
- [ok] frontmatter 与 loader 读取面一致 — featured/recommended/example_* 等字段都在 loader.ts 白名单 case 内，可被 fmToMeta 读成选择器元数据。
- [ok] official_desc 逐字命中 — meta.official_desc 取自 SKILL.md 第 6 行 description 引号内原文，未改写。
6Verdict & Scenarios
Best for: Ideal for scenarios breaking free from rigid layout pools: personal portfolios, art/design coursework, conceptual keynotes, or single-page large-text hero slides (example.md demonstrates short content → single-page question). Also ideal as a specification reference for skill authors adopting the "locked canvas, free layout" hybrid paradigm.
Not for: Not suitable for scenarios requiring strict corporate template consistency (templates with locked layout pools like deck-swiss-international should be used instead); not suitable for fully offline rendering environments (explicitly specifies Tailwind CDN in body); not suitable for content-heavy, report-style data dumping (enforced single visual focal point + forbidden overflow will split long content into excessive slides).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-open-slide-canvas.tar.gz
sha256:
Option B · Copy Guide for Agent993c6c72c87e99e3…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.