first-commit

scripts/scaffold-html-ppt-skills.mjs

@@ -0,0 +1,297 @@
+#!/usr/bin/env node
+// Scaffold one Open Design skill per upstream html-ppt full-deck template.
+//
+// Each generated `skills/html-ppt-<name>/SKILL.md` ships only frontmatter +
+// a short body. Authoring guidance, layouts, themes, and animations live in
+// the master `skills/html-ppt/` skill — these wrappers only exist so each
+// template surfaces as its own card in the Examples gallery and so the
+// "Use this prompt" flow can prefill `mode=deck`, scenario, and the right
+// example_prompt.
+
+import { writeFile, mkdir } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const SKILLS = path.join(ROOT, 'skills');
+const UPSTREAM_URL = 'https://github.com/lewislulu/html-ppt-skill';
+
+// `featured` is a sort priority used by the Examples gallery — smaller wins
+// the tie-break, so a curated handful float to the top. Templates without
+// `featured` slot in alphabetically after the existing skills.
+const TEMPLATES = [
+  {
+    slug: 'pitch-deck',
+    name: 'html-ppt-pitch-deck',
+    title: 'HTML PPT · Pitch Deck',
+    scenario: 'finance',
+    featured: 20,
+    description:
+      'Investor-ready 10-slide HTML pitch deck — white + blue→purple gradient hero, big numbers, traction bar chart, $4.5M-style ask page. Use when the user wants a fundraising deck, seed-round pitch, or VC meeting slides.',
+    triggers: ['pitch deck', 'pitch', 'fundraising', 'seed round', 'investor deck', 'vc deck', 'pitch slides'],
+    examplePrompt:
+      'Build a 10-slide pitch deck in HTML for my seed round. Use the html-ppt-pitch-deck full-deck template (white + blue→purple gradient, traction bars, $X.XM ask). Confirm three things first: (1) name + one-line pitch, (2) key traction numbers, (3) ask + use of funds.',
+  },
+  {
+    slug: 'product-launch',
+    name: 'html-ppt-product-launch',
+    title: 'HTML PPT · Product Launch',
+    scenario: 'marketing',
+    featured: 21,
+    description:
+      'Launch keynote deck — dark hero + light content, warm orange→peach accent, feature cards, pricing tiers, CTA. Use when announcing a product, launching a feature, or doing a keynote-style reveal.',
+    triggers: ['product launch', 'keynote', 'launch deck', 'feature reveal', 'launch slides', '发布会'],
+    examplePrompt:
+      'Make a product-launch keynote deck in HTML using the html-ppt-product-launch full-deck template (dark hero, warm orange accent, feature cards, pricing tiers). Confirm: product name + tagline, the 3 key features, and pricing tiers — then write the deck.',
+  },
+  {
+    slug: 'tech-sharing',
+    name: 'html-ppt-tech-sharing',
+    title: 'HTML PPT · Tech Sharing',
+    scenario: 'engineering',
+    featured: 22,
+    description:
+      'Conference / internal tech-talk deck — GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A pages. Use for engineering presentations, internal sharing sessions, conference talks, and code-heavy walkthroughs.',
+    triggers: ['tech sharing', 'tech talk', '技术分享', 'engineering talk', 'conference talk', 'dev talk'],
+    examplePrompt:
+      '帮我用 html-ppt-tech-sharing 模板做一份 8 页的技术分享 PPT。先确认：分享主题、目标听众（同事 / 社区 / 客户）、要不要包含代码片段和 benchmark。GitHub 暗色主题 + JetBrains Mono，agenda + Q&A 页备好。',
+  },
+  {
+    slug: 'weekly-report',
+    name: 'html-ppt-weekly-report',
+    title: 'HTML PPT · Weekly Report',
+    scenario: 'operations',
+    featured: 23,
+    description:
+      'Team weekly / status-update deck — corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table. Use for 周报, business reviews, team status updates, and exec dashboards.',
+    triggers: ['weekly report', '周报', 'status update', 'team report', 'business review', 'wbr'],
+    examplePrompt:
+      '用 html-ppt-weekly-report 模板生成一份周报（7 页）。先问我四件事：本周时间范围、3-5 个核心 KPI 数字、本周已发布 / 已完成的事项、下周计划与风险。然后用模板填好 8 周柱状图和下周表格。',
+  },
+  {
+    slug: 'xhs-post',
+    name: 'html-ppt-xhs-post',
+    title: 'HTML PPT · 小红书 图文',
+    scenario: 'marketing',
+    featured: 24,
+    description:
+      '小红书 / Instagram 风 9 页 3:4 竖版图文（810×1080）— 暖色 pastel、虚线 sticker 卡片、底部页码点点。用于发小红书图文、Instagram carousel、品牌种草内容。',
+    triggers: ['小红书', 'xhs', 'xhs post', 'xiaohongshu', '图文', 'instagram carousel', '种草'],
+    examplePrompt:
+      '帮我用 html-ppt-xhs-post 模板做一组 9 张小红书图文（3:4 竖版，810×1080）。先告诉我主题，然后帮我把封面 + 7 页内容 + 结尾 CTA 排好，每页一句标题 + 一段正文 + 关键词 sticker。',
+  },
+  {
+    slug: 'course-module',
+    name: 'html-ppt-course-module',
+    title: 'HTML PPT · Course Module',
+    scenario: 'education',
+    featured: 25,
+    description:
+      'Online-course / workshop module deck — warm paper background + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check page. Use for teaching modules, training materials, workshop slides.',
+    triggers: ['course module', 'course slides', 'workshop', 'training deck', 'lesson', '教学', '课件'],
+    examplePrompt:
+      'Use the html-ppt-course-module template to build a 7-slide module deck. Confirm: module title, 3-5 learning objectives (these stick on the left rail), and the MCQ self-check question. Then assemble the deck with serif headings on warm paper.',
+  },
+  {
+    slug: 'presenter-mode-reveal',
+    name: 'html-ppt-presenter-mode',
+    title: 'HTML PPT · Presenter Mode (演讲者模式)',
+    scenario: 'engineering',
+    featured: 26,
+    description:
+      '演讲者模式专用 deck — tokyo-night 默认主题，5 套主题 T 键切换，每页带 150-300 字逐字稿示例（<aside class="notes">），按 S 打开 popup（CURRENT / NEXT / SCRIPT / TIMER 四张磁吸卡片）。用于技术分享、公开演讲、课程讲解，怕忘词或要提词器的场景。',
+    triggers: ['presenter mode', '演讲者模式', '逐字稿', 'speaker notes', '提词器', 'presenter view', '演讲'],
+    examplePrompt:
+      '用 html-ppt-presenter-mode 模板做一份带逐字稿的演讲 PPT。先确认：演讲主题、时长（每页 2-3 分钟）、目标听众。然后帮我每页写 150-300 字的口语化逐字稿（不是讲稿，是提示信号），按 S 能打开 presenter 弹窗。',
+  },
+  {
+    slug: 'xhs-white-editorial',
+    name: 'html-ppt-xhs-white-editorial',
+    title: 'HTML PPT · 白底杂志风',
+    scenario: 'marketing',
+    featured: 27,
+    description:
+      '白底杂志风 deck — 纯白背景 + 顶部 10 色彩虹 bar、80-110px display 标题、紫→蓝→绿→橙→粉渐变文字、马卡龙软卡片组（粉/紫/蓝/绿/橙）、黑底白字 .focus pill、引用大块。同时适合发小红书图文 + 横版 PPT 双用。',
+    triggers: ['白底杂志', '杂志风', 'xhs editorial', 'white editorial', '小红书白底', 'editorial deck'],
+    examplePrompt:
+      '用 html-ppt-xhs-white-editorial 模板做一份白底杂志风 PPT，中文优先。要点：80-110px display 大标题、彩虹顶部 bar、马卡龙软卡片、黑底白字 .focus pill。先告诉我主题和受众，再写 8-12 页。',
+  },
+  {
+    slug: 'graphify-dark-graph',
+    name: 'html-ppt-graphify-dark-graph',
+    title: 'HTML PPT · 暗底知识图谱',
+    scenario: 'engineering',
+    featured: 28,
+    description:
+      '暗底知识图谱 deck — #06060c→#0e1020 深夜渐变 + 漂浮 blur orbs、封面 SVG 力导向图谱、彩虹渐变标题、JetBrains Mono 命令行高亮、glass-morphism 卡片。适合 dev-tool / CLI / 知识图谱 / 数据可视化的发布会，"AI-native + 科幻 + 暖色" 调子。',
+    triggers: ['知识图谱', 'graph deck', 'dark graph', 'dev tool launch', 'cli launch', 'data viz launch'],
+    examplePrompt:
+      '用 html-ppt-graphify-dark-graph 模板做一份 dev-tool 发布会 PPT。深夜渐变背景 + 力导向图谱封面 + 彩虹标题 + JetBrains Mono 命令行。先确认：工具名、核心能力、demo 步骤；要不要现场敲 CLI。',
+  },
+  {
+    slug: 'knowledge-arch-blueprint',
+    name: 'html-ppt-knowledge-arch-blueprint',
+    title: 'HTML PPT · 奶油蓝图架构',
+    scenario: 'engineering',
+    featured: 29,
+    description:
+      '奶油蓝图架构 deck — 奶油纸 #F0EAE0 底色 + 单一锈红 #B5392A 高亮、48px 蓝图网格 mask、2px 黑边硬卡片、pipeline 步骤盒（其中一个抬高）、右侧锈红 insight callout、Playfair 衬线大字、SVG 虚线反馈环。零渐变零软阴影，认真且印刷友好。',
+    triggers: ['architecture', 'blueprint', 'system design', '架构图', 'data flow', 'engineering whitepaper'],
+    examplePrompt:
+      '用 html-ppt-knowledge-arch-blueprint 模板做一份系统架构介绍 PPT。奶油纸底 + 锈红高亮 + 蓝图网格 + pipeline 抬高一格 + 衬线大字。先告诉我系统名 + 5-7 个核心模块 + 数据流方向，再写 8-10 页。',
+  },
+  {
+    slug: 'hermes-cyber-terminal',
+    name: 'html-ppt-hermes-cyber-terminal',
+    title: 'HTML PPT · 暗终端测评',
+    scenario: 'engineering',
+    featured: 30,
+    description:
+      '暗终端 honest-review deck — #0a0c10 黑底 + 56px 赛博网格 + CRT 暗角 + 扫描线、窗口红绿灯 chrome、`$ prompt` 命令行标题、薄荷绿 #7ed3a4 大字、JetBrains Mono、stroke-only 柱状图、blinking 光标、琥珀/绿/红三档 tag、暗色代码块。适合 CLI / agent / dev tool 测评（含 trace、diff、benchmark）。',
+    triggers: ['terminal review', 'cli review', 'agent review', 'honest review', 'dev tool review', '测评'],
+    examplePrompt:
+      '用 html-ppt-hermes-cyber-terminal 模板做一份 CLI / agent 测评 PPT。深色终端风 + scanlines + 命令行标题 + benchmark 柱状图。先确认：被测评对象、3-5 个对比维度、benchmark 数据。',
+  },
+  {
+    slug: 'obsidian-claude-gradient',
+    name: 'html-ppt-obsidian-claude-gradient',
+    title: 'HTML PPT · GitHub 暗紫渐变',
+    scenario: 'engineering',
+    featured: 31,
+    description:
+      'GitHub 暗紫渐变 deck — GitHub-dark #0d1117 + 紫蓝 radial 环境光 + 60px 网格 mask、居中布局、紫色 pill 标签、三色渐变标题（#a855f7→#60a5fa→#34d399）、GitHub 风代码 palette、紫色左边框高亮块。适合开发者工作流 / MCP / Agent / dev tool 教程，类似 GitHub Blog / Linear Changelog。',
+    triggers: ['github dark', 'developer tutorial', 'mcp tutorial', 'agent tutorial', 'dev workflow', 'changelog deck'],
+    examplePrompt:
+      '用 html-ppt-obsidian-claude-gradient 模板做一份开发者教程 PPT。GitHub 暗紫渐变 + 居中布局 + 紫色 pill + 三色渐变标题 + 配置/步骤代码块。先确认：教什么、目标受众、要不要 MCP/Agent 配置示例。',
+  },
+  {
+    slug: 'testing-safety-alert',
+    name: 'html-ppt-testing-safety-alert',
+    title: 'HTML PPT · 红琥珀警示',
+    scenario: 'engineering',
+    featured: 32,
+    description:
+      '红琥珀警示 deck — 顶/底 45° 红黑 hazard 条纹、红色删除线否定标题、L1/L2/L3 绿/琥珀/红 tier 卡片、圆点状态 alert box、policy-yaml 代码块（红左边框 + bad 关键词高亮）、红绿 checklist、Q1 事故堆叠柱状图。适合安全 / 风险 / 事故复盘 / 红队 / 上线前 AI 评审 / policy-as-code。',
+    triggers: ['safety alert', 'incident', 'red team', 'risk review', '事故复盘', '安全评审', 'policy as code'],
+    examplePrompt:
+      '用 html-ppt-testing-safety-alert 模板做一份事故复盘 / 安全评审 PPT。红黑 hazard 条 + 红色删除线 + L1/L2/L3 tier 卡片 + policy-yaml 代码块。先告诉我事件时间线、根因、影响范围。',
+  },
+  {
+    slug: 'xhs-pastel-card',
+    name: 'html-ppt-xhs-pastel-card',
+    title: 'HTML PPT · 柔和马卡龙慢生活',
+    scenario: 'personal',
+    featured: 33,
+    description:
+      '柔和马卡龙慢生活 deck — 奶油 #fef8f1 底 + 三个柔光 blob、Playfair 斜体衬线 display 标题混 sans 正文、28px 圆角马卡龙卡片（桃 / 薄荷 / 天 / 紫 / 柠 / 玫）、Playfair 斜体 01-04 序号、SVG donut 图、chip+page 顶栏。适合生活方式 / 个人成长 / 慢生活 / 情绪类内容，"杂志、手作、不太科技"的感觉。',
+    triggers: ['pastel', 'macaron', 'lifestyle', 'slow living', '慢生活', '生活方式', '个人成长'],
+    examplePrompt:
+      '用 html-ppt-xhs-pastel-card 模板做一份慢生活主题图文。奶油底 + 马卡龙圆角卡片 + Playfair 斜体序号 + donut 图。先告诉我主题（休息 / 暂停 / 自我照顾…）和 5-7 个想说的点。',
+  },
+  {
+    slug: 'dir-key-nav-minimal',
+    name: 'html-ppt-dir-key-nav-minimal',
+    title: 'HTML PPT · 8 色极简方向键',
+    scenario: 'personal',
+    featured: 34,
+    description:
+      '8 页极简方向键 keynote — 每页一个独立单色背景（靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭），各自配色，160px display 标题 + 4px 短粗 accent 线分隔、箭头 → 前缀的 Mono 列表、左下 ← → kbd 提示 + 右下页码、巨大呼吸留白。适合"有话要说但没什么可看"的 keynote、launch、公开演讲。',
+    triggers: ['minimal keynote', '极简', 'mono color', 'one idea per slide', 'public talk', 'launch keynote'],
+    examplePrompt:
+      '用 html-ppt-dir-key-nav-minimal 模板做一份 8 页极简 keynote。每页一个单色背景 + 一句 160px 大标题 + 几条箭头列表。先告诉我演讲主题，然后帮我把 8 个核心观点拍成 8 页（每页一个 idea）。',
+  },
+];
+
+const SKILL_BODY = (t) => `# ${t.title}
+
+A focused entry point into the [\`html-ppt\`](../html-ppt/SKILL.md) master skill that lands the user directly on the **\`${t.slug}\`** full-deck template.
+
+## When this card is picked
+
+The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of \`${t.slug}\` (see the upstream [full-decks catalog](../html-ppt/references/full-decks.md) for screenshots and rationale).
+
+## How to author the deck
+
+1. **Read the master skill first.** All authoring rules live in
+   [\`skills/html-ppt/SKILL.md\`](../html-ppt/SKILL.md) — content/audience checklist,
+   token rules, layout reuse, presenter mode, the keyboard runtime, and the
+   "never put presenter-only text on the slide" rule.
+2. **Start from the matching template folder:**
+   \`skills/html-ppt/templates/full-decks/${t.slug}/\` — copy \`index.html\` and
+   \`style.css\` into the project, keep the \`.tpl-${t.slug}\` body class.
+3. **Bring the shared runtime with the template.** The upstream
+   \`index.html\` links the shared CSS/JS via \`../../../assets/...\` because it
+   sits three folders deep inside \`skills/html-ppt/templates/full-decks/\`.
+   Once you copy \`index.html\` into the project, those parent-relative URLs
+   no longer resolve and \`base.css\`, \`animations.css\`, and \`runtime.js\`
+   will 404 — meaning the deck never activates and slide navigation is
+   dead. Pick one of these two recipes per project:
+   - **Recipe A — copy + rewrite (preferred):** copy
+     \`skills/html-ppt/assets/fonts.css\`, \`skills/html-ppt/assets/base.css\`,
+     \`skills/html-ppt/assets/animations/animations.css\`, and
+     \`skills/html-ppt/assets/runtime.js\` into a project-local
+     \`assets/\` (with \`assets/animations/animations.css\`), then rewrite the
+     four \`<link>\`/\`<script>\` tags in \`index.html\` from
+     \`../../../assets/...\` to the matching project-local paths
+     (\`assets/fonts.css\`, \`assets/base.css\`,
+     \`assets/animations/animations.css\`, \`assets/runtime.js\`).
+   - **Recipe B — inline:** read the same four files and replace each
+     \`<link rel="stylesheet" href="../../../assets/...">\` with a
+     \`<style>...</style>\` containing the file's contents, and the
+     \`<script src="../../../assets/runtime.js">\` with a
+     \`<script>...</script>\` containing \`runtime.js\`. Yields a single
+     self-contained \`index.html\`.
+   Either way, do not ship the upstream \`../../../assets/...\` URLs
+   verbatim into a project artifact — they only work in-tree.
+4. **Pick a theme.** Default tokens look fine; if the user wants a different
+   feel, swap in any of the 36 themes from \`skills/html-ppt/assets/themes/*.css\`
+   via \`<link id="theme-link">\` and let \`T\` cycle.
+5. **Replace demo content, not classes.** The \`.tpl-${t.slug}\` scoped CSS only
+   recognises the structural classes shipped in the template — keep them.
+6. **Speaker notes go inside \`<aside class="notes">\` or \`<div class="notes">\`** — never as visible text on the slide.
+
+## Attribution
+
+Visual system, layouts, themes and the runtime keyboard model come from
+the upstream MIT-licensed [\`lewislulu/html-ppt-skill\`](${UPSTREAM_URL}). The
+LICENSE file ships at \`skills/html-ppt/LICENSE\`; please keep it in place when
+redistributing.
+`;
+
+function frontmatter(t) {
+  const triggers = t.triggers
+    .map((s) => `  - "${s.replace(/"/g, '\\"')}"`)
+    .join('\n');
+  return [
+    '---',
+    `name: ${t.name}`,
+    `description: ${t.description}`,
+    'triggers:',
+    triggers,
+    'od:',
+    '  mode: deck',
+    `  scenario: ${t.scenario}`,
+    `  featured: ${t.featured}`,
+    `  upstream: "${UPSTREAM_URL}"`,
+    '  preview:',
+    '    type: html',
+    '    entry: index.html',
+    '  design_system:',
+    '    requires: false',
+    '  speaker_notes: true',
+    '  animations: true',
+    `  example_prompt: ${JSON.stringify(t.examplePrompt)}`,
+    '---',
+    '',
+  ].join('\n');
+}
+
+let wrote = 0;
+for (const t of TEMPLATES) {
+  const dir = path.join(SKILLS, `html-ppt-${t.slug}`);
+  await mkdir(dir, { recursive: true });
+  const skillMd = frontmatter(t) + SKILL_BODY(t);
+  await writeFile(path.join(dir, 'SKILL.md'), skillMd, 'utf8');
+  wrote++;
+}
+console.log(`[scaffold] wrote ${wrote} html-ppt-* SKILL.md files`);