Home / All Skills / Design & Motion / ppt-keynote
Design & Motion · nexu-io/html-anything

ppt-keynote

Apple Keynote-level presentation slides, one card per screen, switchable with keyboard left/right arrows

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE 首两行为 "Apache License" 与 "Version 2.0, January 2004";pool.json 记 license=Apache-2.0)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

This skill is not an executable program, but a plain-text prompt template: the host parses the YAML frontmatter of SKILL.md with regex and loads the body content as the primary prompt.

next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
Repository directory convention documentation: 'SKILL.md — frontmatter (id, scenario, tags, …) + prompt body', and 'Adding a template = adding a folder. No TS code change required'—templates are registered via directory conventions; searching the entire repo's TS/TSX yields no hardcoded references to "ppt-keynote", meaning this template is not special-cased by any code.

The template body is not executed independently; instead, it is concatenated into the "template section" of the final prompt: shared design directives + this template's body + user content.

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
Documentation for assemblePrompt in shared.ts: 'Wrap a per-template instruction body with the shared design directives and the user content tail.'; the request first retrieves the directory's body via const skill = loadSkill(templateId); and then concatenates it.

The global "content-driven quantity" rule overrides any numbers within the template: the template only defines layout/style/palette/component library, not the output length.

next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
This rule is marked as "highest priority, overriding any numbers in the template", explicitly stating that numbers like "6-10 slides" in deck-type templates are "strictly regarded as reference lower bounds for short examples". Therefore, this template provides available layouts and constraints, not an upper limit on pages.

The output format is subject to hard global constraints: single-file HTML, pure HTML without fences, the first character must be <, and no file writing is permitted (stdout is captured by the frontend).

next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
The same section also states: 'Forbidden to use Write / Edit / MultiEdit / Bash / Create / any filesystem tools'—writing files to disk is handled by the host frontend, and no disk write operations occur on the template side.

The frontmatter metadata drives the selector rendering (Chinese name / English name / emoji / description / category / scenario / aspect ratio / tags / example metadata).

next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
Metadata for this template: category=slides, scenario=marketing, aspect_hint=16:9 (1280×720), featured=19. The selector groups by category/scenario and sorts by featured, all determined by frontmatter without code special-casing.

Bundled example assets are exposed to the frontend via two read-only APIs: example.html is returned as-is into an iframe, and example.md serves as the input content for the "Preview" button.

next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
The response header for example.html is Content-Type: text/html; charset=utf-8; another route provides the example text to the client via content: skill.exampleMd ?? "". This directory contains: example.md (823 bytes) and example.html (7237 bytes).

Execution chain (host behavior, not this template's code): The host spawns the locally authenticated agent CLI, feeds the assembled prompt via stdin, and streams the HTML back from stdout.

next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
The child process runs with cwd=process.cwd() (cwd: opts.cwd ?? process.cwd(),) with all stdio piped; the prompt is passed via stdin/--message rather than shell concatenation (not interpolated into a shell command).

The template is structured as a web deck with "one section per screen", where canvas dimensions and centering are fixed; combined with the shared directive "quantity is determined by content", page count scales with input length.

next/src/lib/templates/skills/ppt-keynote/SKILL.md
整体宽 1280 高 720, 居中显示, 背景渐变
The "content-driven quantity" rule in shared specifically names deck-type templates: "If numbers like 'pick 6-10 to form a deck' are written in the template body, they are strictly regarded as reference lower bounds for short examples"; this template provides no page count numbers at all.

This is the only template among the 9 that requires writing JS in the body: keyboard slide switching + hash routing, where interactivity is self-contained in the artifact rather than calling external services.

next/src/lib/templates/skills/ppt-keynote/SKILL.md
- 加一段 JavaScript 监听 ArrowLeft / ArrowRight / 空格键切换 slide; 同时维护 hash (#/3)。
Hash routing allows a specific slide to be shared via direct link, serving as a practical detail for presentation scenarios.

Font sizes and color palettes specify class names and shade steps (text-7xl / font-semibold / tracking-tight / text-neutral-500), while requiring "maintaining whitespace, aligning data cards using grid layout, and restrained colors".

next/src/lib/templates/skills/ppt-keynote/SKILL.md
- 字号: 标题 `text-7xl font-semibold tracking-tight`, 副标题 `text-2xl text-neutral-500`。
Such explicit constraints steer the output closer to a "designed deck" rather than a "typeset document".

2Core Capabilities

01One <section class="slide"> per screen, centered canvas at 1280×720
02Subtractive design per slide: large title + 1-3 lines / a data chart / a punchline
03Keyboard navigation JS (←/→/Space) + hash routing (#/3)
04Fade-in transitions between slides
05Page number indicator at top-right (current page / total pages)
06Cover and closing slide conventions: cover (topic + speaker/date) and closing slide ("Thanks." / CTA)

3External Dependencies

KindDependency / Endpoint
networkTailwind Play CDN(共享指令对产物的要求)
networkjsdelivr CDN(可选:图表/动画脚本)
networkGoogle Fonts(共享指令指定)
cli本机 coding-agent CLI(宿主检测 PATH 并 spawn)
network随包示例 example.html 的外链(产物示例)

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: No network request code in directory; the bundled example.html references https://cdn.tailwindcss.com in <head> (external link in example artifact,
Audit Notes: . Evaluation scope: Evaluates only this skill directory (SKILL.md + example.html/example.md); the host shell and external links in the artifact are not included in grading. Within the directory, there are zero script files, zero credential reads, zero disk-writing instructions, and no runtime external links required by SKILL.md ("JavaScript" in SKILL.md refers to slide-switching code required in the generated artifact, not the skill calling external scripts). There are two endpoints and external links actually appearing in the directory, both being bundled example artifacts: example.html references cdn.tailwindcss.com in <head>, and example.html contains an inline keydown slide-switching script; additionally, "pnpm dev" text appears in example.md / example.html (example text, not execution commands). Two notes provided for context without altering the verdict: ① The host shell (loader.ts → assemblePrompt → agents/invoke.ts spawning local CLI; claude arguments including --permission-mode bypassPermissions, and envFor passing all environment variables via {...process.env}) represents host behavior and is documented in verdict.risks; ② The shared design directives injected by the host require the artifact to reference Tailwind Play / Google Fonts in <head> (which are runtime external links of the generated artifact).

5Second-Pass Verification

  • [ok] skill 目录资产面(脚本 / references / 数据 / 模板) — 目录实为 3 个文件:SKILL.md 与 example.html、example.md;无 scripts/、无 references 目录、无任何可执行文件(.sh/.py/.js/.mjs/.ts 零命中)。
  • [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描(api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.):仅命中 example.md / example.html 里作为示例文案出现的 "pnpm dev"(展示文本,非可执行指令);SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描,仅命中 font-semibold / font-black 这类字重类名,无端点。
  • [ok] 官方描述 vs 实际能力(有无夸大) — frontmatter description(苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换)与正文一致:描述承诺的版式要素都能在正文找到对应条目,未见正文未支持的越界承诺。
  • [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目(Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI)逐条回到 shared.ts 与 argv.ts 原文取证;本模板另有 example.html 的 cdn.tailwindcss.com 外链,已在该 example.html 原文中定位。
  • [ok] 宿主执行链(供 security.reason / verdict.risks 使用,不参与判级) — prompt 经 stdin 送入被 spawn 的本机 CLI(invoke.ts),HTML 从 stdout 分流捕获;claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env;预览 iframe sandbox="allow-scripts allow-same-origin"(template-picker.tsx:544 / preview-pane.tsx:297)。
  • [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699(与任务表 pin 一致);skill.path=next/src/lib/templates/skills/ppt-keynote 下确有 SKILL.md,全仓无第二份同名模板。
  • [ok] 内联 <script> 是否改变"目录无脚本文件"结论 — example.html 含一段内联 JS(以 "// ←/→ scroll between slides; current implementation just smooth-scrolls" 起的 keydown 监听)。它属随包示例产物、只在预览 iframe 中执行;SKILL.md(skill 指令面)无任何脚本执行要求,目录内也没有任何脚本文件,故仍判 green——已在 security.reason 与 verdict.risks 明写。
  • [ok] 键盘导航是否依赖外部库 — 示例脚本为原生 document.addEventListener 实现,无 import、无 CDN JS;SKILL.md 也只要求"加一段 JavaScript",不点名任何库。

6Verdict & Scenarios

  • Zero code, zero dependencies: The template is a prompt, registered via directory conventions; adding or replacing templates requires no TS code changes
  • One section per screen + keyboard navigation + hash direct links, ready for presentations directly in browser; clear focus on whitespace and restrained colors
  • Synergy with global design discipline: Content-driven quantity + real data + single-file HTML + Chinese typography rules (Noto Sans SC / Pangu spacing) are injected by the host, allowing the template to focus solely on its layout
  • Self-contained examples: The bundled example.html can be previewed directly in the selector, and example.md provides paired input, lowering the barrier to trial
  • Best for: Suitable for web-based Keynote presentations for product introductions or internal talks: product narratives spanning a few to over a dozen pages, directly presentable in fullscreen, supporting ←/→ navigation and #/N direct linking.
    Not for: Not suitable for formal presentations requiring PPTX delivery or presenter view/audience screen synchronization (this template produces a web deck; the repository provides separate deck-* / video-* series for more complex capabilities); not suitable for content-dense pages (the template requires only 1-3 lines or a single image per slide).
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload ppt-keynote.tar.gz
    sha256: 3e33c78e36b73ce5…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.