npm - constellai - Versions diffs - 0.3.0 - Mend

constellai 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1993) hide show

package/skills/design/slides-guizang-magazine-playbook/SKILL.md ADDED Viewed

@@ -0,0 +1,51 @@
+---
+name: slides-guizang-magazine-playbook
+description: |
+  Use this skill when Codex needs editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune). Recast from the original deck-guizang-editorial/SKILL.md material as the slides-guizang-magazine-playbook procedure.
+---
+# Slides Guizang Magazine Playbook
+## Role
+Use this skill when Codex needs editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune). Recast from the original deck-guizang-editorial/SKILL.md material as the slides-guizang-magazine-playbook procedure.
+## Source Trace
+- Original Markdown: `deck-guizang-editorial/SKILL.md`
+- Reformulated skill name: `slides-guizang-magazine-playbook`
+- Upstream reference: https://github.com/nexu-io/html-anything
+- Source category: `slides`
+## Operating Guidance
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+【模板: 归藏编辑墨水 Deck (Editorial × E-Ink)】
+【意图】叙事、观点、分享、个人风格表达。墨纸印刷感, 不要科技感。Inspired by op7418/guizang-ppt-skill Style A。
+【调色板 — 5 选 1, 严禁改 hex、严禁混用】
+- 🖋 **墨水经典 Monocle** — ink `#0a0a0b`, paper `#f1efea`, paper-tint `#e8e5de`, ink-tint `#18181a`. 默认 / 通用商业 / 科技。
+- 🌊 **靛蓝瓷 Indigo Porcelain** — ink `#0a1f3d`, paper `#f1f3f5`, paper-tint `#e4e8ec`, ink-tint `#152a4a`. 科技 / 研究 / 数据。
+- 🌿 **森林墨 Forest Ink** — ink `#1a2e1f`, paper `#f5f1e8`, paper-tint `#ece7da`, ink-tint `#253d2c`. 自然 / 可持续 / 文化。
+- 🍂 **牛皮纸 Kraft Paper** — ink `#2a1e13`, paper `#eedfc7`, paper-tint `#e0d0b6`, ink-tint `#3a2a1d`. 怀旧 / 人文 / 文学。
+- 🌙 **沙丘 Dune** — ink `#1f1a14`, paper `#f0e6d2`, paper-tint `#e3d7bf`, ink-tint `#2d2620`. 艺术 / 设计 / 时尚。
+【布局 — 10 个磁带式版式池, 可复用; **数量由【用户内容】决定**, 完整覆盖每个要点; 短内容 6-12 张起步, 长内容应更多 (同一版式可在不同章节重复使用)】
+- **L01 Hero Cover** — 居中大字 hero typography + kicker + subtitle + lead paragraph + 底部元数据 row。
+- **L02 Act Divider** — kicker + 8.5-10vw 巨大 headline + 一句引言; 章节切换可反色 (ink ↔ paper)。
+- **L03 Big Numbers Grid** — 3×2 数据卡 (label / 大数字 / 注释)。
+- **L04 Quote + Image** — 左 kicker + headline + body + callout; 右 16:10 图 (基线对齐 baseline 不是 top)。
+- **L05 Image Grid** — 3×2 或 3×1 等高图网格 (26vh 或 22vh); 严格统一高度。
+- **L06 Pipeline / Flow** — 横向编号步骤组, 每步: №X + 标题 + 描述; 支持键盘逐步推进。
+- **L07 Hero Question** — 7vw 全屏单一问句, 按语义断行, 周围极简。
+- **L08 Big Quote** — 5.8vw 巨大衬线引文 + 英文翻译 + 署名 + 日期。
+- **L09 Before / After** — 1:1 split; 左列 opacity .55 (旧/before); 右列 full brightness (新/after)。
+- **L10 Mixed Media** — 8:4 比例; 左大段文字 (kicker / headline / body / callout) + 右 3:4 竖图作辅助。
+【设计细节】
+- **严禁**: 渐变 / drop-shadow / 圆角 / 圆形装饰 / blur / SVG 图标库 / emoji 装饰。
+- **字体**: Display 用 `Playfair Display` (英) / `Noto Serif SC` (中); Body 用 `Inter` / `Noto Sans SC`; 编号 / 数字偶尔可用 italic 衬线。
+- **杂志感细节**: kicker 用 11px uppercase letterspacing 0.12em; folio 右下角 `01 / 12`; 顶部细 hairline rule + 期刊 logo / topic。
+- **不许**: 数据捏造、Lorem ipsum、占位图片 URL。所有图请用纯 CSS / SVG 内联描绘 (色块 + 简笔)。
+- 键盘 ← / → 切换; hash 同步; 单文件 HTML。

package/skills/design/slides-guizang-magazine-playbook/example.html ADDED Viewed

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>贵赞编辑墨水 · 章节封页</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;700&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet" />
+<style>
+  body { font-family: 'Inter','Noto Sans SC',system-ui,sans-serif; background:#0a0a0b; margin:0; }
+  .deck { display:grid; gap:24px; padding:24px; }
+  .slide { width:100%; aspect-ratio:16/9; max-width:1280px; margin:0 auto; position:relative; overflow:hidden; }
+  .paper { background:#f1efea; color:#0a0a0b; }
+  .ink { background:#0a0a0b; color:#f1efea; }
+  .display { font-family:'Playfair Display','Noto Serif SC',serif; }
+  .body-serif { font-family:'Playfair Display','Noto Serif SC',serif; font-style:italic; }
+  .kicker { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500; }
+  .hairline { border:0; border-top:1px solid currentColor; opacity:0.3; }
+  .folio { font-feature-settings:'tnum'; font-variant-numeric:tabular-nums; }
+</style>
+</head>
+<body>
+<div class="deck">
+  <!-- L02 Act Divider · ink reverse -->
+  <section class="slide ink">
+    <div class="absolute inset-0 p-12 flex flex-col justify-between">
+      <header class="flex items-baseline justify-between kicker opacity-70">
+        <span>OPEN DESIGN — Issue №26</span>
+        <span>Act II</span>
+        <span class="folio">04 / 12</span>
+      </header>
+      <div>
+        <div class="kicker opacity-80">第二章</div>
+        <h1 class="display mt-4 leading-[0.95]" style="font-size:clamp(64px,9vw,160px); font-weight:500;">
+          为什么<br/>
+          <span class="body-serif">写作者</span>该写 HTML<br/>
+          而不是 Markdown。
+        </h1>
+      </div>
+      <footer class="flex items-baseline justify-between kicker opacity-60">
+        <span>BY Open Design · 2026 SPRING</span>
+        <span class="body-serif normal-case tracking-normal">A magazine for editorial agents.</span>
+      </footer>
+    </div>
+  </section>
+  <!-- L03 Big Numbers Grid · paper -->
+  <section class="slide paper">
+    <div class="absolute inset-0 p-12 flex flex-col justify-between">
+      <header class="flex items-baseline justify-between kicker" style="color:#3a382f">
+        <span>OPEN DESIGN — Issue №26</span>
+        <span>Numbers</span>
+        <span class="folio">05 / 12</span>
+      </header>
+      <div>
+        <div class="kicker" style="color:#6b665b">By the numbers</div>
+        <h2 class="display mt-2 leading-[1.0]" style="font-size:clamp(36px,5vw,72px); font-weight:500;">
+          四个数字, <span class="body-serif">一条线</span> —— HTML 已经赢了。
+        </h2>
+      </div>
+      <div class="grid grid-cols-4 gap-8 mt-4">
+        <article class="border-t pt-4" style="border-color:#0a0a0b">
+          <div class="kicker" style="color:#6b665b">现有模板</div>
+          <div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">75</div>
+          <p class="mt-3 text-[13px] leading-snug" style="color:#3a382f"><span class="body-serif">+16</span> in this release; cover slides, docs, frames.</p>
+        </article>
+        <article class="border-t pt-4" style="border-color:#0a0a0b">
+          <div class="kicker" style="color:#6b665b">本地 Agent</div>
+          <div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">17</div>
+          <p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">Claude · Codex · Cursor · Gemini · Copilot, all <span class="body-serif">stdin</span>.</p>
+        </article>
+        <article class="border-t pt-4" style="border-color:#0a0a0b">
+          <div class="kicker" style="color:#6b665b">平均生成</div>
+          <div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">80<span class="body-serif text-[40px]">s</span></div>
+          <p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">一份杂志风 PPT, <span class="body-serif">31KB</span> 自包含 HTML.</p>
+        </article>
+        <article class="border-t pt-4" style="border-color:#0a0a0b">
+          <div class="kicker" style="color:#6b665b">API Keys</div>
+          <div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">0</div>
+          <p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">复用你 <span class="body-serif">已经登录</span>的 CLI session.</p>
+        </article>
+      </div>
+      <footer class="flex items-baseline justify-between kicker opacity-70" style="color:#3a382f">
+        <span>Source: HTML-Anything internal · 2026-05</span>
+        <span class="body-serif normal-case tracking-normal">Set in Playfair &amp; Inter.</span>
+      </footer>
+    </div>
+  </section>
+</div>
+</body>
+</html>

package/skills/design/slides-guizang-magazine-sample-worked-sample/SKILL.md ADDED Viewed

@@ -0,0 +1,31 @@
+---
+name: slides-guizang-magazine-sample-worked-sample
+description: |
+  Use this skill when Codex needs procedural guidance derived from deck-guizang-editorial/example.md. Recast from the original deck-guizang-editorial/example.md material as the slides-guizang-magazine-sample-worked-sample procedure.
+---
+# Slides Guizang Magazine Sample Worked Sample
+## Role
+Use this skill when Codex needs procedural guidance derived from deck-guizang-editorial/example.md. Recast from the original deck-guizang-editorial/example.md material as the slides-guizang-magazine-sample-worked-sample procedure.
+## Source Trace
+- Original Markdown: `deck-guizang-editorial/example.md`
+- Reformulated skill name: `slides-guizang-magazine-sample-worked-sample`
+## Operating Guidance
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+> 墨水经典调色板, 双页预览: L02 章节封页 + L03 Big Numbers
+## 主题
+Claude Code 团队全面转向 HTML — 我们为什么也该跟上。
+## 关键数据
+- 75: HTML Anything 现有模板数
+- 17: 已接入的本地 AI agent
+- 80s: 平均一次"杂志风网页 PPT"生成耗时
+- 0: 用户需要的 API key 数量

package/skills/design/slides-guizang-magazine-sample-worked-sample/example.html ADDED Viewed

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>贵赞编辑墨水 · 章节封页</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;700&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet" />
+<style>
+  body { font-family: 'Inter','Noto Sans SC',system-ui,sans-serif; background:#0a0a0b; margin:0; }
+  .deck { display:grid; gap:24px; padding:24px; }
+  .slide { width:100%; aspect-ratio:16/9; max-width:1280px; margin:0 auto; position:relative; overflow:hidden; }
+  .paper { background:#f1efea; color:#0a0a0b; }
+  .ink { background:#0a0a0b; color:#f1efea; }
+  .display { font-family:'Playfair Display','Noto Serif SC',serif; }
+  .body-serif { font-family:'Playfair Display','Noto Serif SC',serif; font-style:italic; }
+  .kicker { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500; }
+  .hairline { border:0; border-top:1px solid currentColor; opacity:0.3; }
+  .folio { font-feature-settings:'tnum'; font-variant-numeric:tabular-nums; }
+</style>
+</head>
+<body>
+<div class="deck">
+  <!-- L02 Act Divider · ink reverse -->
+  <section class="slide ink">
+    <div class="absolute inset-0 p-12 flex flex-col justify-between">
+      <header class="flex items-baseline justify-between kicker opacity-70">
+        <span>OPEN DESIGN — Issue №26</span>
+        <span>Act II</span>
+        <span class="folio">04 / 12</span>
+      </header>
+      <div>
+        <div class="kicker opacity-80">第二章</div>
+        <h1 class="display mt-4 leading-[0.95]" style="font-size:clamp(64px,9vw,160px); font-weight:500;">
+          为什么<br/>
+          <span class="body-serif">写作者</span>该写 HTML<br/>
+          而不是 Markdown。
+        </h1>
+      </div>
+      <footer class="flex items-baseline justify-between kicker opacity-60">
+        <span>BY Open Design · 2026 SPRING</span>
+        <span class="body-serif normal-case tracking-normal">A magazine for editorial agents.</span>
+      </footer>
+    </div>
+  </section>
+  <!-- L03 Big Numbers Grid · paper -->
+  <section class="slide paper">
+    <div class="absolute inset-0 p-12 flex flex-col justify-between">
+      <header class="flex items-baseline justify-between kicker" style="color:#3a382f">
+        <span>OPEN DESIGN — Issue №26</span>
+        <span>Numbers</span>
+        <span class="folio">05 / 12</span>
+      </header>
+      <div>
+        <div class="kicker" style="color:#6b665b">By the numbers</div>
+        <h2 class="display mt-2 leading-[1.0]" style="font-size:clamp(36px,5vw,72px); font-weight:500;">
+          四个数字, <span class="body-serif">一条线</span> —— HTML 已经赢了。
+        </h2>
+      </div>
+      <div class="grid grid-cols-4 gap-8 mt-4">
+        <article class="border-t pt-4" style="border-color:#0a0a0b">
+          <div class="kicker" style="color:#6b665b">现有模板</div>
+          <div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">75</div>
+          <p class="mt-3 text-[13px] leading-snug" style="color:#3a382f"><span class="body-serif">+16</span> in this release; cover slides, docs, frames.</p>
+        </article>
+        <article class="border-t pt-4" style="border-color:#0a0a0b">
+          <div class="kicker" style="color:#6b665b">本地 Agent</div>
+          <div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">17</div>
+          <p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">Claude · Codex · Cursor · Gemini · Copilot, all <span class="body-serif">stdin</span>.</p>
+        </article>
+        <article class="border-t pt-4" style="border-color:#0a0a0b">
+          <div class="kicker" style="color:#6b665b">平均生成</div>
+          <div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">80<span class="body-serif text-[40px]">s</span></div>
+          <p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">一份杂志风 PPT, <span class="body-serif">31KB</span> 自包含 HTML.</p>
+        </article>
+        <article class="border-t pt-4" style="border-color:#0a0a0b">
+          <div class="kicker" style="color:#6b665b">API Keys</div>
+          <div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">0</div>
+          <p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">复用你 <span class="body-serif">已经登录</span>的 CLI session.</p>
+        </article>
+      </div>
+      <footer class="flex items-baseline justify-between kicker opacity-70" style="color:#3a382f">
+        <span>Source: HTML-Anything internal · 2026-05</span>
+        <span class="body-serif normal-case tracking-normal">Set in Playfair &amp; Inter.</span>
+      </footer>
+    </div>
+  </section>
+</div>
+</body>
+</html>

package/skills/design/slides-keynote-playbook/SKILL.md ADDED Viewed

@@ -0,0 +1,32 @@
+---
+name: slides-keynote-playbook
+description: |
+  Use this skill when Codex needs apple Keynote-quality slides, one card per screen, with keyboard left/right navigation. Recast from the original ppt-keynote/SKILL.md material as the slides-keynote-playbook procedure.
+---
+# Slides Keynote Playbook
+## Role
+Use this skill when Codex needs apple Keynote-quality slides, one card per screen, with keyboard left/right navigation. Recast from the original ppt-keynote/SKILL.md material as the slides-keynote-playbook procedure.
+## Source Trace
+- Original Markdown: `ppt-keynote/SKILL.md`
+- Reformulated skill name: `slides-keynote-playbook`
+- Upstream reference: https://github.com/nexu-io/html-anything
+- Source category: `slides`
+## Operating Guidance
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+【模板: Keynote 风格 PPT】
+- 每张幻灯片是一个 `<section class="slide">`, 整体宽 1280 高 720, 居中显示, 背景渐变。
+- 单页内容极简: 大标题 + 1-3 行支持文字; 或一张数据图; 或一个金句。
+- 字号: 标题 `text-7xl font-semibold tracking-tight`, 副标题 `text-2xl text-neutral-500`。
+- 第一页是封面 (主题 + 演讲者 / 日期), 最后一页是 "Thanks." 或行动号召。
+- 顶部右上角小指示器: 当前页 / 总页数。
+- 加一段 JavaScript 监听 ArrowLeft / ArrowRight / 空格键切换 slide; 同时维护 hash (#/3)。
+- 每页之间用 fade-in 动画。
+- 保持留白, 数据卡片用 grid 布局对齐, 颜色克制。

package/skills/design/slides-keynote-playbook/example.html ADDED Viewed

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>HTML Anything · 产品介绍</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; }
+  .deck { display:flex; flex-direction:column; align-items:center; gap:32px; padding:40px 0; }
+  .slide { position:relative; width:1280px; max-width:96vw; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,0.7); display:flex; flex-direction:column; padding:64px 80px; color:#0a0a0a; background:#fafaf7; }
+  .slide.dark { background:#15140f; color:#fafaf7; }
+  .slide.brand { background:linear-gradient(135deg,#c96442 0%,#e9b94a 100%); color:#fff; }
+  .slide .num { position:absolute; top:24px; right:32px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; opacity:0.55; }
+  .slide .eyebrow { font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; opacity:0.65; margin-bottom:20px; }
+  .slide h1 { font-size:84px; font-weight:800; line-height:1.05; letter-spacing:-0.025em; margin:0; }
+  .slide h2 { font-size:64px; font-weight:700; line-height:1.1; letter-spacing:-0.02em; margin:0 0 24px; }
+  .slide p { font-size:24px; line-height:1.5; opacity:0.78; max-width:65ch; }
+  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:auto; }
+  .card { padding:28px; border-radius:14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
+  .card .k { font-size:48px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
+  .card .l { font-size:14px; opacity:0.65; }
+</style>
+</head>
+<body>
+<div class="deck">
+  <section class="slide brand">
+    <span class="num">01 / 07</span>
+    <div class="eyebrow">Product · 2026</div>
+    <h1 style="margin-top:auto">HTML <em style="font-family:Georgia,serif;font-style:italic;font-weight:400">Anything</em></h1>
+    <p style="font-size:28px; opacity:0.95; margin-top:24px">把任何文档、数据, 用本地 AI agent, 一键转成世界级好看的 HTML。</p>
+    <div style="margin-top:auto; display:flex; align-items:center; gap:16px; font-size:14px; opacity:0.85">
+      <div style="width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,0.25);display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;font-weight:600">H</div>
+      <span>Tom Pan · 5 月 11 日</span>
+    </div>
+  </section>
+  <section class="slide">
+    <span class="num">02 / 07</span>
+    <div class="eyebrow" style="color:#c96442">问题</div>
+    <h2>Markdown 易写,<br/>但<span style="color:#c96442">发出去就丑</span>。</h2>
+    <ul style="font-size:24px; line-height:2; opacity:0.78; list-style:none; padding:0">
+      <li>· 截图发推, 默认是 14px 宋体压缩 jpg</li>
+      <li>· 复制到公众号, 排版被微信彻底重写</li>
+      <li>· 知乎、小红书、Notion 各家规则不一</li>
+    </ul>
+  </section>
+  <section class="slide dark">
+    <span class="num">03 / 07</span>
+    <div class="eyebrow" style="color:#e9b94a">方案</div>
+    <h2 style="font-size:96px; margin-top:auto; margin-bottom:auto">
+      任何输入 →<br/>
+      <span style="font-family:Georgia,serif;font-style:italic;font-weight:600;color:#e9b94a">世界级 HTML</span>
+    </h2>
+    <p style="font-size:22px;opacity:0.6">用你本地已经登录的 Claude / Cursor / Codex, 0 API Key 边际成本。</p>
+  </section>
+  <section class="slide">
+    <span class="num">04 / 07</span>
+    <div class="eyebrow">三个核心</div>
+    <h2>三件让它好用的事</h2>
+    <div class="grid3" style="grid-template-columns:repeat(3,1fr); gap:20px">
+      <div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
+        <div style="font-size:36px; margin-bottom:14px">🔌</div>
+        <div style="font-weight:600; font-size:18px; margin-bottom:6px">本地 Agent</div>
+        <div style="font-size:14px; opacity:0.7; line-height:1.6">复用你已经登录的 CLI session, 不要求 API Key</div>
+      </div>
+      <div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
+        <div style="font-size:36px; margin-bottom:14px">🎨</div>
+        <div style="font-weight:600; font-size:18px; margin-bottom:6px">9 套模板</div>
+        <div style="font-size:14px; opacity:0.7; line-height:1.6">PPT · 简历 · 海报 · 小红书 · 数据报告 ...</div>
+      </div>
+      <div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
+        <div style="font-size:36px; margin-bottom:14px">📋</div>
+        <div style="font-weight:600; font-size:18px; margin-bottom:6px">一键发布</div>
+        <div style="font-size:14px; opacity:0.7; line-height:1.6">公众号 / 推特 / 知乎 / PNG, 直接粘贴</div>
+      </div>
+    </div>
+  </section>
+  <section class="slide dark">
+    <span class="num">05 / 07</span>
+    <div class="eyebrow" style="color:#e9b94a">数据</div>
+    <h2>已经在跑</h2>
+    <div class="grid3">
+      <div class="card"><div class="k" style="color:#e9b94a">80<span style="font-size:24px">s</span></div><div class="l">生成 31KB 可交付文章</div></div>
+      <div class="card"><div class="k" style="color:#e9b94a">9</div><div class="l">套世界级模板</div></div>
+      <div class="card"><div class="k" style="color:#e9b94a">8</div><div class="l">个本地 agent 适配</div></div>
+    </div>
+  </section>
+  <section class="slide">
+    <span class="num">06 / 07</span>
+    <div class="eyebrow" style="color:#c96442">为什么是现在</div>
+    <h2 style="font-size:56px; margin-top:auto; margin-bottom:auto">
+      Claude 团队不再用 markdown,<br/>
+      <span style="font-family:Georgia,serif;font-style:italic;font-weight:600;color:#c96442">全换成了 HTML。</span>
+    </h2>
+    <p>HTML 是面向读者的最终形态, AI 让"啰嗦"不再是问题。</p>
+  </section>
+  <section class="slide brand">
+    <span class="num">07 / 07</span>
+    <h1 style="margin:auto 0; font-size:120px">Thanks.</h1>
+    <div style="display:flex; align-items:flex-end; justify-content:space-between; font-size:18px">
+      <div>
+        <div style="font-family:'JetBrains Mono',monospace; font-size:16px; opacity:0.85">$ pnpm dev</div>
+        <div style="opacity:0.85; margin-top:6px">→ http://localhost:3000 → ⌘+Enter</div>
+      </div>
+      <div style="opacity:0.7">github.com/your-org/html-anything</div>
+    </div>
+  </section>
+</div>
+<script>
+  // ←/→ scroll between slides; current implementation just smooth-scrolls
+  const slides=document.querySelectorAll('.slide');
+  let i=0;
+  document.addEventListener('keydown', e=>{
+    if(e.key==='ArrowRight') i=Math.min(i+1, slides.length-1);
+    else if(e.key==='ArrowLeft') i=Math.max(i-1,0);
+    else return;
+    slides[i].scrollIntoView({behavior:'smooth', block:'center'});
+  });
+</script>
+</body>
+</html>

package/skills/design/slides-keynote-sample-worked-sample/SKILL.md ADDED Viewed

@@ -0,0 +1,44 @@
+---
+name: slides-keynote-sample-worked-sample
+description: |
+  Use this skill when Codex needs procedural guidance derived from ppt-keynote/example.md. Recast from the original ppt-keynote/example.md material as the slides-keynote-sample-worked-sample procedure.
+---
+# Slides Keynote Sample Worked Sample
+## Role
+Use this skill when Codex needs procedural guidance derived from ppt-keynote/example.md. Recast from the original ppt-keynote/example.md material as the slides-keynote-sample-worked-sample procedure.
+## Source Trace
+- Original Markdown: `ppt-keynote/example.md`
+- Reformulated skill name: `slides-keynote-sample-worked-sample`
+## Operating Guidance
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+## 我们解决的问题
+- Markdown 易写但发出去丑
+- 截图发推丑得离谱
+- 公众号 / 知乎 各家排版规则不一
+## 我们的方案
+**任何输入 → 世界级 HTML**, 用你本地的 AI agent
+## 三个核心
+1. 复用你已经登录的本地 agent (Claude / Cursor / Codex), 不要 API Key
+2. 9 套世界级模板 (PPT / 简历 / 海报 / 小红书 / 数据报告 ...)
+3. 一键复制到公众号 / 推特 / 知乎, 或导出 PNG
+## 数据
+- 80 秒生成 31KB 的可交付文章
+- 9 套模板, 8 个本地 agent 适配
+- 0 API Key, 100% 复用本地 session
+## 为什么是现在
+Claude 团队不再用 markdown, 全换成 HTML 了。HTML 是面向读者的最终形态, AI 让"啰嗦"不再是问题。
+## 立即开始
+`pnpm dev` → 打开浏览器 → ⌘+Enter

package/skills/design/slides-keynote-sample-worked-sample/example.html ADDED Viewed

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>HTML Anything · 产品介绍</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; }
+  .deck { display:flex; flex-direction:column; align-items:center; gap:32px; padding:40px 0; }
+  .slide { position:relative; width:1280px; max-width:96vw; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,0.7); display:flex; flex-direction:column; padding:64px 80px; color:#0a0a0a; background:#fafaf7; }
+  .slide.dark { background:#15140f; color:#fafaf7; }
+  .slide.brand { background:linear-gradient(135deg,#c96442 0%,#e9b94a 100%); color:#fff; }
+  .slide .num { position:absolute; top:24px; right:32px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; opacity:0.55; }
+  .slide .eyebrow { font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; opacity:0.65; margin-bottom:20px; }
+  .slide h1 { font-size:84px; font-weight:800; line-height:1.05; letter-spacing:-0.025em; margin:0; }
+  .slide h2 { font-size:64px; font-weight:700; line-height:1.1; letter-spacing:-0.02em; margin:0 0 24px; }
+  .slide p { font-size:24px; line-height:1.5; opacity:0.78; max-width:65ch; }
+  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:auto; }
+  .card { padding:28px; border-radius:14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
+  .card .k { font-size:48px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
+  .card .l { font-size:14px; opacity:0.65; }
+</style>
+</head>
+<body>
+<div class="deck">
+  <section class="slide brand">
+    <span class="num">01 / 07</span>
+    <div class="eyebrow">Product · 2026</div>
+    <h1 style="margin-top:auto">HTML <em style="font-family:Georgia,serif;font-style:italic;font-weight:400">Anything</em></h1>
+    <p style="font-size:28px; opacity:0.95; margin-top:24px">把任何文档、数据, 用本地 AI agent, 一键转成世界级好看的 HTML。</p>
+    <div style="margin-top:auto; display:flex; align-items:center; gap:16px; font-size:14px; opacity:0.85">
+      <div style="width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,0.25);display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;font-weight:600">H</div>
+      <span>Tom Pan · 5 月 11 日</span>
+    </div>
+  </section>
+  <section class="slide">
+    <span class="num">02 / 07</span>
+    <div class="eyebrow" style="color:#c96442">问题</div>
+    <h2>Markdown 易写,<br/>但<span style="color:#c96442">发出去就丑</span>。</h2>
+    <ul style="font-size:24px; line-height:2; opacity:0.78; list-style:none; padding:0">
+      <li>· 截图发推, 默认是 14px 宋体压缩 jpg</li>
+      <li>· 复制到公众号, 排版被微信彻底重写</li>
+      <li>· 知乎、小红书、Notion 各家规则不一</li>
+    </ul>
+  </section>
+  <section class="slide dark">
+    <span class="num">03 / 07</span>
+    <div class="eyebrow" style="color:#e9b94a">方案</div>
+    <h2 style="font-size:96px; margin-top:auto; margin-bottom:auto">
+      任何输入 →<br/>
+      <span style="font-family:Georgia,serif;font-style:italic;font-weight:600;color:#e9b94a">世界级 HTML</span>
+    </h2>
+    <p style="font-size:22px;opacity:0.6">用你本地已经登录的 Claude / Cursor / Codex, 0 API Key 边际成本。</p>
+  </section>
+  <section class="slide">
+    <span class="num">04 / 07</span>
+    <div class="eyebrow">三个核心</div>
+    <h2>三件让它好用的事</h2>
+    <div class="grid3" style="grid-template-columns:repeat(3,1fr); gap:20px">
+      <div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
+        <div style="font-size:36px; margin-bottom:14px">🔌</div>
+        <div style="font-weight:600; font-size:18px; margin-bottom:6px">本地 Agent</div>
+        <div style="font-size:14px; opacity:0.7; line-height:1.6">复用你已经登录的 CLI session, 不要求 API Key</div>
+      </div>
+      <div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
+        <div style="font-size:36px; margin-bottom:14px">🎨</div>
+        <div style="font-weight:600; font-size:18px; margin-bottom:6px">9 套模板</div>
+        <div style="font-size:14px; opacity:0.7; line-height:1.6">PPT · 简历 · 海报 · 小红书 · 数据报告 ...</div>
+      </div>
+      <div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
+        <div style="font-size:36px; margin-bottom:14px">📋</div>
+        <div style="font-weight:600; font-size:18px; margin-bottom:6px">一键发布</div>
+        <div style="font-size:14px; opacity:0.7; line-height:1.6">公众号 / 推特 / 知乎 / PNG, 直接粘贴</div>
+      </div>
+    </div>
+  </section>
+  <section class="slide dark">
+    <span class="num">05 / 07</span>
+    <div class="eyebrow" style="color:#e9b94a">数据</div>
+    <h2>已经在跑</h2>
+    <div class="grid3">
+      <div class="card"><div class="k" style="color:#e9b94a">80<span style="font-size:24px">s</span></div><div class="l">生成 31KB 可交付文章</div></div>
+      <div class="card"><div class="k" style="color:#e9b94a">9</div><div class="l">套世界级模板</div></div>
+      <div class="card"><div class="k" style="color:#e9b94a">8</div><div class="l">个本地 agent 适配</div></div>
+    </div>
+  </section>
+  <section class="slide">
+    <span class="num">06 / 07</span>
+    <div class="eyebrow" style="color:#c96442">为什么是现在</div>
+    <h2 style="font-size:56px; margin-top:auto; margin-bottom:auto">
+      Claude 团队不再用 markdown,<br/>
+      <span style="font-family:Georgia,serif;font-style:italic;font-weight:600;color:#c96442">全换成了 HTML。</span>
+    </h2>
+    <p>HTML 是面向读者的最终形态, AI 让"啰嗦"不再是问题。</p>
+  </section>
+  <section class="slide brand">
+    <span class="num">07 / 07</span>
+    <h1 style="margin:auto 0; font-size:120px">Thanks.</h1>
+    <div style="display:flex; align-items:flex-end; justify-content:space-between; font-size:18px">
+      <div>
+        <div style="font-family:'JetBrains Mono',monospace; font-size:16px; opacity:0.85">$ pnpm dev</div>
+        <div style="opacity:0.85; margin-top:6px">→ http://localhost:3000 → ⌘+Enter</div>
+      </div>
+      <div style="opacity:0.7">github.com/your-org/html-anything</div>
+    </div>
+  </section>
+</div>
+<script>
+  // ←/→ scroll between slides; current implementation just smooth-scrolls
+  const slides=document.querySelectorAll('.slide');
+  let i=0;
+  document.addEventListener('keydown', e=>{
+    if(e.key==='ArrowRight') i=Math.min(i+1, slides.length-1);
+    else if(e.key==='ArrowLeft') i=Math.max(i-1,0);
+    else return;
+    slides[i].scrollIntoView({behavior:'smooth', block:'center'});
+  });
+</script>
+</body>
+</html>