デザイン&モーション · nexu-io/html-anything

ppt-keynote

Apple Keynote級のスライド、1画面1カード、キーボードの左右キーで切り替え可能

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信Dual-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
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本skillは実行可能プログラムではなく、プレーンテキストのプロンプトテンプレートです。ホストが正規表現でSKILL.mdのYAML frontmatterをパースし、本文bodyをプロンプトの主体として読み込みます。

next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
リポジトリのディレクトリ規約に関する説明:「SKILL.md — frontmatter (id, scenario, tags, …) + prompt body」および「Adding a template = adding a folder. No TS code change required」—テンプレートはディレクトリ規約によって登録されます。全リポジトリのTS/TSX内に"ppt-keynote"のハードコードされた参照は存在せず、本テンプレートに対するコードレベルの特別処理はありません。

テンプレート本文は単独で実行されず、最終プロンプトの「テンプレート部」に組み込まれます:共有デザイン指示書 + 本テンプレート本文 + ユーザーコンテンツ。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
shared.tsのassemblePromptの説明:「Wrap a per-template instruction body with the shared design directives and the user content tail.」;リクエストはまずconst skill = loadSkill(templateId);により本ディレクトリのbodyを取得し、その後組み立てられます。

グローバルの「コンテンツ主導の数量」ルールがテンプレート内のいかなる数値も上書きします:テンプレートはレイアウト/スタイル/配色/コンポーネントライブラリのみを定義し、出力の長手は定義しません。

next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
このルールは「最高優先度、テンプレート内のいかなる数値も上書き」と明記されており、deck系テンプレートにおける「6〜10枚」のような数値は「一律で短いサンプルにおける参考下限とみなす」と記載されています。したがって、本テンプレートが提供するのは利用可能なレイアウトと制約であり、ページ数の上限ではありません。

成果物の形態はグローバルなハード制約を受けます:単一ファイルHTML、コードフェンスなしの純粋なHTML、先頭文字は必ず<でなければならず、ファイル書き込みは禁止(フロントエンドがstdoutをキャプチャ)。

next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
同じセクションには「Write / Edit / MultiEdit / Bash / Create / ファイルシステムツールの使用を禁止」とも明記されています—ファイルの保存はホストフロントエンドが担当し、テンプレート側でのファイル書き出し動作は発生しません。

frontmatterのメタデータがセレクターの表示(中国語名/英語名/絵文字/説明/カテゴリ/シナリオ/アスペクト比/タグ/サンプルメタデータ)を駆動します。

next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
本テンプレートのメタデータ:category=slides、scenario=marketing、aspect_hint=16:9 (1280×720)、featured=19。セレクターはcategory/scenarioごとにグループ化され、featured順にソートされます。すべてfrontmatterによって決定され、コードの特別処理はありません。

同梱のサンプルアセットは2つの読み取り専用API経由でフロントエンドに公開されます:example.htmlはそのままiframeに返され、example.mdは「プレビュー」ボタンの入力コンテンツとして機能します。

next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
example.htmlのレスポンスヘッダーはContent-Type: text/html; charset=utf-8です。別ルートではcontent: skill.exampleMd ?? ""としてサンプルテキストをクライアントに渡します。本ディレクトリ:example.md(823バイト)およびexample.html(7237バイト)が存在します。

実行チェーン(ホスト側の動作であり、本テンプレートのコードではありません):ホストがローカルで認証済みのagent CLIをspawnし、組み立てられたプロンプトをstdin経由で渡し、stdoutからHTMLをストリーミング回収します。

next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
子プロセスはcwd=process.cwd()(cwd: opts.cwd ?? process.cwd(),)で実行され、stdioはすべてpipeされます。プロンプトはシェル結合ではなくstdin/--message経由で渡されます(not interpolated into a shell command)。

テンプレートは「1画面1section」のWeb deck構造であり、キャンバスサイズと中央配置は固定されています。共有指示の「数量はコンテンツによって決定」と連携し、ページ数は入力の長さに応じて伸縮します。

next/src/lib/templates/skills/ppt-keynote/SKILL.md
整体宽 1280 高 720, 居中显示, 背景渐变
sharedの「コンテンツ主導の数量」ルールはdeck系テンプレートを名指ししています:「テンプレート本文に『6〜10枚を選んでdeckを構成する』といった記述がある場合、一律で短いサンプルの参考下限とみなす」。本テンプレートはページ数を一切指定していません。

9件のテンプレート中、本文内でJSの実装を要求する唯一のテンプレートです:キーボード操作によるページ送り + hashルーティング。インタラクションは外部サービス呼び出しではなく成果物自身に含まれます(自己完結型)。

next/src/lib/templates/skills/ppt-keynote/SKILL.md
- 加一段 JavaScript 监听 ArrowLeft / ArrowRight / 空格键切换 slide; 同时维护 hash (#/3)。
hashルーティングにより特定のページを直接リンクで共有可能となり、プレゼンテーションの実用的なディテールとなっています。

フォントサイズ/配色はクラス名とカラースケール(text-7xl / font-semibold / tracking-tight / text-neutral-500)で指定され、同時に「余白の維持、データカードのgrid配置による整列、控えめな色彩」を要求します。

next/src/lib/templates/skills/ppt-keynote/SKILL.md
- 字号: 标题 `text-7xl font-semibold tracking-tight`, 副标题 `text-2xl text-neutral-500`。
このようなテキスト制約により、出力は「組版されたドキュメント」ではなく「デザインされたdeck」に近づきます。

2コア機能

011画面ごとに1つの<section class="slide">、キャンバスは1280×720中央揃え
021ページのコンテンツを引き算で設計:大見出し + 1〜3行 / データチャート1枚 / キーフレーズ1つ
03キーボードページ送りJS(←/→/Space)+ hashルーティング(#/3)
04スライド間のfade-inトランジション
05右上のページ番号インジケーター(現在ページ / 総ページ数)
06最初と最後のスライド仕様:表紙(タイトル + 発表者/日付)および終了スライド(「Thanks.」 / CTA)

3外部依存関係

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

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠(ファイルパスと抜粋)
  • 网络端点: 外部ネットワークアクセスの宣言:ディレクトリ内にネットワークリクエストのコードは皆無。同梱のexample.htmlの<head>内でhttps://cdn.tailwindcss.comを参照(サンプルの成果物における外部リンク、
監査ノート: 。評価基準:本skillディレクトリ(SKILL.md + example.html/example.md)のみを評価対象とし、ホストシェルおよび成果物の外部リンクは評価に含めません。ディレクトリ内にはスクリプトファイル皆無、クレデンシャル読み取り皆無、ディスク書き込み指示皆無であり、SKILL.mdが要求するランタイム時の外部リンクもありません(SKILL.md内の「JavaScript」は成果物に記述させるキーボード操作コードであり、skillによる外部スクリプト呼び出しではありません)。ディレクトリ内に実際に現れるエンドポイントおよび外部リンクは2箇所で、いずれも同梱のサンプル成果物です:example.htmlの<head>がcdn.tailwindcss.comを参照し、example.html内にインラインのkeydownページ送りスクリプトが含まれます。またexample.md / example.html内に"pnpm dev"の文言が出現します(サンプル本文であり、実行コマンドではありません)。判定を変更しない補足事項2点:①ホストシェル(loader.ts → assemblePrompt → agents/invoke.tsによるローカルCLIのspawn;claudeの引数に--permission-mode bypassPermissionsを含み、envForが{...process.env}で環境変数を透過)はホストの挙動であり、verdict.risksに記載済みです。②ホストが注入する共有デザイン指示は成果物の<head>内でTailwind Play / Google Fontsの参照を要求します(成果物の実行時外部リンクに該当)。

5二重目の独立検証

  • [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",不点名任何库。

6結論

  • ゼロコード・ゼロ依存関係:テンプレートはプロンプトそのものであり、ディレクトリ規約で登録されるため、テンプレートの追加や置換にTSコードの変更は一切不要
  • 1画面1section + キーボード操作 + hashダイレクトリンクによりブラウザ上で即座にプレゼン可能。余白と控えめな配色への明確な志向
  • グローバルなデザイン規律との協調:コンテンツ主導の数量 + 実データ + 単一ファイルHTML + 中国語タイポグラフィ規律(Noto Sans SC / 盤古の白・スペース処理)がホストから一括注入され、テンプレートは自身のレイアウトにのみ集中可能
  • サンプルの自己完結性:同梱のexample.htmlはセレクター内で直接プレビューでき、example.mdは対応する入力を提供して試用のハードルを低減
  • 最適な用途: 製品紹介や社内発表向けのWeb版Keynoteに最適:数ページから十数ページの製品ナラティブ、直接フルスクリーンでのプレゼン、←/→キーでのスライド送りや#/Nダイレクトリンクに対応。
    不向きな用途: PPTX形式での納品や発表者ノート/聴衆スクリーンの同期が必要な公式レポートには不向き(本テンプレートはWeb deckです。リポジトリ内にはより高度な機能を受け持つdeck-* / video-*シリーズが別に存在します)。情報密度が極めて高いページには不向き(テンプレートは1ページあたり1〜3行または図1点のみを要求します)。
    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
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.