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/scene-macos-alert-playbook/SKILL.md ADDED Viewed

@@ -0,0 +1,57 @@
+---
+name: scene-macos-alert-playbook
+description: |
+  Use this skill when Codex needs realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers. Recast from the original frame-macos-notification/SKILL.md material as the scene-macos-alert-playbook procedure.
+---
+# Scene Macos Alert Playbook
+## Role
+Use this skill when Codex needs realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers. Recast from the original frame-macos-notification/SKILL.md material as the scene-macos-alert-playbook procedure.
+## Source Trace
+- Original Markdown: `frame-macos-notification/SKILL.md`
+- Reformulated skill name: `scene-macos-alert-playbook`
+- Upstream reference: https://github.com/nexu-io/html-anything
+- Source category: `card`
+## 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.
+【模板: macOS 通知横幅】
+【意图】把一段公告 / 消息 / 提示渲染成 macOS Big Sur+ 风格的通知横幅, 适合视频角落叠加、产品发布预告、社媒图。Inspired by hyperframes macos-notification。
+【画布】两种用法:
+- 视频叠加 1920×1080, 通知放右上角, 周围透明。
+- 单独 banner 480×120, 居中输出。
+【横幅结构】
+- 外框: 圆角 14px (macOS Big Sur 标准), 480×120 (或更长 480×180 含正文), 12-16px 内边距。
+- 背景: **frosted glass** 效果 — `background: rgba(245,245,247,0.78)` + `backdrop-filter: blur(40px) saturate(180%)`; 暗色版 `rgba(28,28,30,0.78)`。
+- 边框: 1px `rgba(0,0,0,0.06)` (light) / `rgba(255,255,255,0.08)` (dark); 顶部加 1px 亮 highlight `rgba(255,255,255,0.5)`。
+- 阴影: `0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)`。
+【内容】
+- 左侧: **App icon** (44×44, 圆角 10px, CSS gradient + 1 个 emoji 或 monogram 字母, **不用外链图片**)。
+- 中间:
+  - 顶部 row: App 名 (SF Pro 13px, weight 600) + `now` 或具体时间 (12px, opacity 0.6) — 两端对齐。
+  - 标题 (15px, weight 600, 1 行截断)。
+  - 正文 (13px, weight 400, 1-2 行截断, line-height 1.35)。
+- 右侧 (可选): action button "Open" 或 "Reply" (capsule, 浅灰底)。
+【字体】
+- 主: `SF Pro Text` → fallback `Inter` / `system-ui`; 中文用 `PingFang SC` / `Noto Sans SC`。
+【可选附加】
+- 多条通知堆叠: 第一条在前, 后面 2 条向后向下递缩 (scale 0.96 + opacity 0.6 + translateY)。
+- 入场动效: 从屏幕外右侧滑入 `transform: translateX(110%)→0`, 200ms ease-out; 可被 `prefers-reduced-motion` 关闭。
+- 右上角控制 chip "Clear" (hover 显示, opacity 默认 0)。
+【设计细节】
+- light mode 背景白磨砂, dark mode (推荐 video) 几乎黑磨砂。
+- icon 不能用外链 emoji 图片, 用 unicode emoji 或 CSS 绘制几何。
+- 必须用用户提供的内容; 标题 + 正文清晰来自用户输入。
+- 单文件 HTML, 注意 `backdrop-filter` Safari 需要 `-webkit-` 前缀。

package/skills/design/scene-macos-alert-playbook/example.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>macOS Notification · 转换完成</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
+<style>
+  body {
+    font-family: 'Inter','Noto Sans SC','PingFang SC',system-ui,sans-serif;
+    background:
+      linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%),
+      radial-gradient(circle at 80% 20%, rgba(255,200,150,0.3) 0%, transparent 50%);
+    background-blend-mode: screen;
+    min-height: 100vh;
+  }
+  .frost {
+    background: rgba(28,28,30,0.78);
+    -webkit-backdrop-filter: blur(40px) saturate(180%);
+    backdrop-filter: blur(40px) saturate(180%);
+    border: 1px solid rgba(255,255,255,0.08);
+    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
+  }
+  @keyframes slideIn { from { transform: translateX(120%); opacity:0 } to { transform: translateX(0); opacity:1 } }
+  .notif-1 { animation: slideIn .4s ease-out; }
+  .notif-2 { transform: translateY(-12px) scale(0.96); opacity: 0.7; }
+  .notif-3 { transform: translateY(-24px) scale(0.92); opacity: 0.4; }
+</style>
+</head>
+<body class="flex flex-col items-end justify-start gap-3 p-12 text-white">
+  <!-- top stacked notifs -->
+  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-3">
+    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#1DB954,#0d7a35)">🎵</div>
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between"><span class="text-[13px] font-semibold">Spotify</span><span class="text-[11px] opacity-60">2m ago</span></div>
+      <div class="text-[12.5px] truncate opacity-80">Now Playing — Lo-Fi Essentials</div>
+    </div>
+  </div>
+  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-2">
+    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#0f0f12,#2a2a35)">⌘</div>
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between"><span class="text-[13px] font-semibold">Cursor</span><span class="text-[11px] opacity-60">1m ago</span></div>
+      <div class="text-[12.5px] truncate opacity-80">同步完成 · 8 个文件已上传</div>
+    </div>
+  </div>
+  <!-- main, in-focus notif -->
+  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-1">
+    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl shrink-0" style="background:linear-gradient(135deg,#ff7849,#d97757)">H</div>
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between">
+        <span class="text-[13px] font-semibold">HTML Anything</span>
+        <span class="text-[11px] opacity-60">now</span>
+      </div>
+      <div class="text-[14px] font-semibold leading-tight mt-0.5">转换完成 · 杂志风网页 PPT</div>
+      <div class="text-[12.5px] opacity-80 leading-snug mt-0.5">31.2 KB · 12 帧 · 已在右侧预览面板渲染。点击复制为公众号 / 推特格式。</div>
+    </div>
+    <button class="text-[11px] font-semibold px-2.5 py-1 rounded-full ml-1 shrink-0" style="background:rgba(255,255,255,0.12)">Open</button>
+  </div>
+</body>
+</html>

package/skills/design/scene-macos-alert-sample-worked-sample/SKILL.md ADDED Viewed

@@ -0,0 +1,29 @@
+---
+name: scene-macos-alert-sample-worked-sample
+description: |
+  Use this skill when Codex needs procedural guidance derived from frame-macos-notification/example.md. Recast from the original frame-macos-notification/example.md material as the scene-macos-alert-sample-worked-sample procedure.
+---
+# Scene Macos Alert Sample Worked Sample
+## Role
+Use this skill when Codex needs procedural guidance derived from frame-macos-notification/example.md. Recast from the original frame-macos-notification/example.md material as the scene-macos-alert-sample-worked-sample procedure.
+## Source Trace
+- Original Markdown: `frame-macos-notification/example.md`
+- Reformulated skill name: `scene-macos-alert-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.
+App: HTML Anything
+Title: 转换完成
+Body: 你的杂志风网页 PPT 已生成 · 31.2 KB · 视频中输出
+Time: now
+二级通知 (堆叠):
+- Cursor · 同步完成 · 8 个文件已上传
+- Spotify · 现在播放 Lo-Fi Essentials

package/skills/design/scene-macos-alert-sample-worked-sample/example.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>macOS Notification · 转换完成</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
+<style>
+  body {
+    font-family: 'Inter','Noto Sans SC','PingFang SC',system-ui,sans-serif;
+    background:
+      linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%),
+      radial-gradient(circle at 80% 20%, rgba(255,200,150,0.3) 0%, transparent 50%);
+    background-blend-mode: screen;
+    min-height: 100vh;
+  }
+  .frost {
+    background: rgba(28,28,30,0.78);
+    -webkit-backdrop-filter: blur(40px) saturate(180%);
+    backdrop-filter: blur(40px) saturate(180%);
+    border: 1px solid rgba(255,255,255,0.08);
+    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
+  }
+  @keyframes slideIn { from { transform: translateX(120%); opacity:0 } to { transform: translateX(0); opacity:1 } }
+  .notif-1 { animation: slideIn .4s ease-out; }
+  .notif-2 { transform: translateY(-12px) scale(0.96); opacity: 0.7; }
+  .notif-3 { transform: translateY(-24px) scale(0.92); opacity: 0.4; }
+</style>
+</head>
+<body class="flex flex-col items-end justify-start gap-3 p-12 text-white">
+  <!-- top stacked notifs -->
+  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-3">
+    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#1DB954,#0d7a35)">🎵</div>
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between"><span class="text-[13px] font-semibold">Spotify</span><span class="text-[11px] opacity-60">2m ago</span></div>
+      <div class="text-[12.5px] truncate opacity-80">Now Playing — Lo-Fi Essentials</div>
+    </div>
+  </div>
+  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-2">
+    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#0f0f12,#2a2a35)">⌘</div>
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between"><span class="text-[13px] font-semibold">Cursor</span><span class="text-[11px] opacity-60">1m ago</span></div>
+      <div class="text-[12.5px] truncate opacity-80">同步完成 · 8 个文件已上传</div>
+    </div>
+  </div>
+  <!-- main, in-focus notif -->
+  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-1">
+    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl shrink-0" style="background:linear-gradient(135deg,#ff7849,#d97757)">H</div>
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between">
+        <span class="text-[13px] font-semibold">HTML Anything</span>
+        <span class="text-[11px] opacity-60">now</span>
+      </div>
+      <div class="text-[14px] font-semibold leading-tight mt-0.5">转换完成 · 杂志风网页 PPT</div>
+      <div class="text-[12.5px] opacity-80 leading-snug mt-0.5">31.2 KB · 12 帧 · 已在右侧预览面板渲染。点击复制为公众号 / 推特格式。</div>
+    </div>
+    <button class="text-[11px] font-semibold px-2.5 py-1 rounded-full ml-1 shrink-0" style="background:rgba(255,255,255,0.12)">Open</button>
+  </div>
+</body>
+</html>

package/skills/design/scene-mark-ending-playbook/SKILL.md ADDED Viewed

@@ -0,0 +1,49 @@
+---
+name: scene-mark-ending-playbook
+description: |
+  Use this skill when Codex needs segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames. Recast from the original frame-logo-outro/SKILL.md material as the scene-mark-ending-playbook procedure.
+---
+# Scene Mark Ending Playbook
+## Role
+Use this skill when Codex needs segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames. Recast from the original frame-logo-outro/SKILL.md material as the scene-mark-ending-playbook procedure.
+## Source Trace
+- Original Markdown: `frame-logo-outro/SKILL.md`
+- Reformulated skill name: `scene-mark-ending-playbook`
+- Upstream reference: https://github.com/nexu-io/html-anything
+- Source category: `video`
+## 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.
+【模板: Logo 收尾帧 (Logo Outro)】
+【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。
+【画布】1920×1080, 黑色 `#08090c` 或品牌深色背景; 加微妙 vignette `radial-gradient(...)` 让中心更亮。
+【布局】
+- **中心 Logo**: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。
+  - 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity 0→1, 错峰 80ms; 总时长 1.2s。
+  - 入场完成后, 整个 logo 加 glow bloom: `filter: drop-shadow(0 0 24px <accent>40)`; 同时一道 shimmer `mask-image` 横扫 logo (500ms)。
+- **品牌名**: logo 下方 6-8% 位置, 大字 (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), 入场: typewriter or fade-up after logo bloom (1.4s 开始)。
+- **Tagline**: 品牌名下方一行 (24-28px, weight 400, opacity 0.7), fade in (1.8s)。
+- **底部 CTA + 元数据**: 双行底部 row, 例如 `htmlanything.dev · @htmlanything · 2026`, 11px uppercase letter-spacing 0.16em, 颜色 opacity 0.4, hairline 分隔。
+【调色 — 4 选 1, 不混用】
+- 🌌 **Midnight Indigo** — bg `#08090c`, accent `#7c5cff` (霓虹紫蓝 glow)。
+- 🌅 **Solar Amber** — bg `#0e0a08`, accent `#ffb547` (暖琥珀)。
+- 🌿 **Forest Mint** — bg `#0a1410`, accent `#5fb38a` (薄荷绿)。
+- ⚪ **Bone & Ink** — bg `#f1efea`, accent `#0a0a0b` (无 neon, 走 editorial 风, glow 改成阴影)。
+【设计细节】
+- **绝不**: 用外链 logo 图片; logo 必须用纯 CSS / 内联 SVG 几何绘制。
+- 入场动画用 `@keyframes` + `animation-delay`; 可被 `prefers-reduced-motion` 关闭。
+- 字体: 西文 `Inter Tight` / `SF Pro Display` / `Manrope`; 中文 `Noto Sans SC` weight 700。
+- 必须用用户提供的品牌名 + tagline; 若没有, 跑 fallback "HTML Anything" / "Anything → beautiful HTML"。
+- 单文件 HTML; 整个动画完成后 freeze (不要 loop, 这是视频结尾帧)。
+- 顶部可选 5px ribbon (accent 色) 增加品牌识别。

package/skills/design/scene-mark-ending-playbook/example.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>Logo Outro · HTML Anything</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;800;900&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
+<style>
+  body {
+    font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif;
+    background: radial-gradient(circle at 50% 45%, #1a1535 0%, #08090c 70%);
+    color:#f5f5f7;
+    margin:0;
+    min-height:100vh;
+    overflow:hidden;
+  }
+  .accent { color:#7c5cff; }
+  .ribbon { background:#7c5cff; }
+  @keyframes pieceIn { 0% { opacity:0; transform: scale(1.4) translate(var(--dx, 0), var(--dy, 0)) } 100% { opacity:1; transform: scale(1) translate(0,0) } }
+  @keyframes glow { from { filter: drop-shadow(0 0 0 transparent) } to { filter: drop-shadow(0 0 32px rgba(124,92,255,0.6)) } }
+  .piece { animation: pieceIn 1s cubic-bezier(.34,1.56,.64,1) both; }
+  .piece:nth-child(1){--dx:-80px;--dy:-40px;animation-delay:0s}
+  .piece:nth-child(2){--dx:60px;--dy:-50px;animation-delay:.08s}
+  .piece:nth-child(3){--dx:-40px;--dy:50px;animation-delay:.16s}
+  .piece:nth-child(4){--dx:70px;--dy:40px;animation-delay:.24s}
+  .piece:nth-child(5){--dx:0;--dy:-70px;animation-delay:.32s}
+  .logo-wrap { animation: glow .8s ease-out 1.1s both; }
+  @keyframes fadeUp { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform: translateY(0) } }
+  .brand { animation: fadeUp .8s ease-out 1.4s both; }
+  .tagline { animation: fadeUp .8s ease-out 1.7s both; }
+  .meta { animation: fadeUp .6s ease-out 2.1s both; }
+  /* shimmer */
+  @keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }
+  .shimmer {
+    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
+    background-size: 200% 100%;
+    -webkit-background-clip:text; background-clip:text; color:transparent;
+    animation: shimmer 1.8s ease-out 1.9s 1 both;
+  }
+</style>
+</head>
+<body class="flex flex-col items-center justify-center relative">
+  <div class="ribbon absolute top-0 left-0 right-0" style="height:4px"></div>
+  <!-- logo -->
+  <div class="logo-wrap relative" style="width:140px;height:140px">
+    <svg viewBox="0 0 140 140" class="absolute inset-0">
+      <!-- 5 geometric pieces forming an "H" -->
+      <rect class="piece" x="20" y="20" width="20" height="100" fill="#7c5cff"/>
+      <rect class="piece" x="100" y="20" width="20" height="100" fill="#7c5cff"/>
+      <rect class="piece" x="40" y="60" width="60" height="20" fill="#f5f5f7"/>
+      <circle class="piece" cx="30" cy="20" r="10" fill="#7c5cff"/>
+      <circle class="piece" cx="110" cy="120" r="10" fill="#f5f5f7"/>
+    </svg>
+  </div>
+  <!-- brand -->
+  <h1 class="brand mt-10 font-black tracking-[-0.02em] leading-[0.95]" style="font-size:84px">
+    <span class="shimmer">HTML Anything</span>
+  </h1>
+  <!-- tagline -->
+  <p class="tagline mt-4 text-[24px] opacity-70 font-medium">
+    Anything → <em class="not-italic accent">beautiful HTML</em>
+  </p>
+  <!-- CTA / meta -->
+  <div class="meta mt-12 flex items-center gap-6 text-[11px] uppercase tracking-[0.18em] opacity-50">
+    <span>htmlanything.dev</span>
+    <span class="opacity-40">·</span>
+    <span>@htmlanything</span>
+    <span class="opacity-40">·</span>
+    <span>2026</span>
+  </div>
+  <!-- corner timecode -->
+  <div class="absolute bottom-8 right-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">END · 00:03:21</div>
+  <div class="absolute bottom-8 left-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">FRAME · LOGO-OUTRO</div>
+</body>
+</html>

package/skills/design/scene-mark-ending-sample-worked-sample/SKILL.md ADDED Viewed

@@ -0,0 +1,31 @@
+---
+name: scene-mark-ending-sample-worked-sample
+description: |
+  Use this skill when Codex needs procedural guidance derived from frame-logo-outro/example.md. Recast from the original frame-logo-outro/example.md material as the scene-mark-ending-sample-worked-sample procedure.
+---
+# Scene Mark Ending Sample Worked Sample
+## Role
+Use this skill when Codex needs procedural guidance derived from frame-logo-outro/example.md. Recast from the original frame-logo-outro/example.md material as the scene-mark-ending-sample-worked-sample procedure.
+## Source Trace
+- Original Markdown: `frame-logo-outro/example.md`
+- Reformulated skill name: `scene-mark-ending-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.
+> Midnight Indigo 调色, 用作视频结尾的品牌 reveal
+## 品牌
+HTML Anything
+## Tagline
+Anything → beautiful HTML
+## CTA
+htmlanything.dev · @htmlanything · 2026

package/skills/design/scene-mark-ending-sample-worked-sample/example.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>Logo Outro · HTML Anything</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;800;900&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
+<style>
+  body {
+    font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif;
+    background: radial-gradient(circle at 50% 45%, #1a1535 0%, #08090c 70%);
+    color:#f5f5f7;
+    margin:0;
+    min-height:100vh;
+    overflow:hidden;
+  }
+  .accent { color:#7c5cff; }
+  .ribbon { background:#7c5cff; }
+  @keyframes pieceIn { 0% { opacity:0; transform: scale(1.4) translate(var(--dx, 0), var(--dy, 0)) } 100% { opacity:1; transform: scale(1) translate(0,0) } }
+  @keyframes glow { from { filter: drop-shadow(0 0 0 transparent) } to { filter: drop-shadow(0 0 32px rgba(124,92,255,0.6)) } }
+  .piece { animation: pieceIn 1s cubic-bezier(.34,1.56,.64,1) both; }
+  .piece:nth-child(1){--dx:-80px;--dy:-40px;animation-delay:0s}
+  .piece:nth-child(2){--dx:60px;--dy:-50px;animation-delay:.08s}
+  .piece:nth-child(3){--dx:-40px;--dy:50px;animation-delay:.16s}
+  .piece:nth-child(4){--dx:70px;--dy:40px;animation-delay:.24s}
+  .piece:nth-child(5){--dx:0;--dy:-70px;animation-delay:.32s}
+  .logo-wrap { animation: glow .8s ease-out 1.1s both; }
+  @keyframes fadeUp { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform: translateY(0) } }
+  .brand { animation: fadeUp .8s ease-out 1.4s both; }
+  .tagline { animation: fadeUp .8s ease-out 1.7s both; }
+  .meta { animation: fadeUp .6s ease-out 2.1s both; }
+  /* shimmer */
+  @keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }
+  .shimmer {
+    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
+    background-size: 200% 100%;
+    -webkit-background-clip:text; background-clip:text; color:transparent;
+    animation: shimmer 1.8s ease-out 1.9s 1 both;
+  }
+</style>
+</head>
+<body class="flex flex-col items-center justify-center relative">
+  <div class="ribbon absolute top-0 left-0 right-0" style="height:4px"></div>
+  <!-- logo -->
+  <div class="logo-wrap relative" style="width:140px;height:140px">
+    <svg viewBox="0 0 140 140" class="absolute inset-0">
+      <!-- 5 geometric pieces forming an "H" -->
+      <rect class="piece" x="20" y="20" width="20" height="100" fill="#7c5cff"/>
+      <rect class="piece" x="100" y="20" width="20" height="100" fill="#7c5cff"/>
+      <rect class="piece" x="40" y="60" width="60" height="20" fill="#f5f5f7"/>
+      <circle class="piece" cx="30" cy="20" r="10" fill="#7c5cff"/>
+      <circle class="piece" cx="110" cy="120" r="10" fill="#f5f5f7"/>
+    </svg>
+  </div>
+  <!-- brand -->
+  <h1 class="brand mt-10 font-black tracking-[-0.02em] leading-[0.95]" style="font-size:84px">
+    <span class="shimmer">HTML Anything</span>
+  </h1>
+  <!-- tagline -->
+  <p class="tagline mt-4 text-[24px] opacity-70 font-medium">
+    Anything → <em class="not-italic accent">beautiful HTML</em>
+  </p>
+  <!-- CTA / meta -->
+  <div class="meta mt-12 flex items-center gap-6 text-[11px] uppercase tracking-[0.18em] opacity-50">
+    <span>htmlanything.dev</span>
+    <span class="opacity-40">·</span>
+    <span>@htmlanything</span>
+    <span class="opacity-40">·</span>
+    <span>2026</span>
+  </div>
+  <!-- corner timecode -->
+  <div class="absolute bottom-8 right-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">END · 00:03:21</div>
+  <div class="absolute bottom-8 left-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">FRAME · LOGO-OUTRO</div>
+</body>
+</html>

package/skills/design/scene-metrics-chart-nyt-playbook/SKILL.md ADDED Viewed

@@ -0,0 +1,46 @@
+---
+name: scene-metrics-chart-nyt-playbook
+description: |
+  Use this skill when Codex needs nYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band). Recast from the original frame-data-chart-nyt/SKILL.md material as the scene-metrics-chart-nyt-playbook procedure.
+---
+# Scene Metrics Chart Nyt Playbook
+## Role
+Use this skill when Codex needs nYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band). Recast from the original frame-data-chart-nyt/SKILL.md material as the scene-metrics-chart-nyt-playbook procedure.
+## Source Trace
+- Original Markdown: `frame-data-chart-nyt/SKILL.md`
+- Reformulated skill name: `scene-metrics-chart-nyt-playbook`
+- Upstream reference: https://github.com/nexu-io/html-anything
+- Source category: `video`
+## 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.
+【模板: NYT 风数据图表帧】
+【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。
+【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。
+【布局】
+- **顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。
+- **大字标题** (Cheltenham / Playfair / Origin Serif Pro, 5.6vw, italic 副标可选): 一句结论。**结论必须从用户数据中提炼**, 不是描述图。
+- **图表区** (占画布 55-65%):
+  - 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 `2024 · 412M` 黑色 mono 小字。
+  - 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。
+  - 范围带 (range band): 浅灰填充 `#e6e2d2` 包络 + 中线 ink。
+- **底部 source + footnote** (10px mono, opacity 0.6): "Origin: 用户数据 · Chart by html-anything"。
+- **错峰揭示动画**: 标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 `prefers-reduced-motion` 关闭。
+【设计细节】
+- **绝不**: 使用 chart.js / d3 库 (除非 jsdelivr CDN 引入); 推荐手写 SVG, 不超过 80 行 inline。
+- 字体: 标题 `Source Serif Pro` 或 `Cheltenham` (无则用 `Playfair Display`); body `IBM Plex Sans` 或 `Inter`; 数据标签 `IBM Plex Mono`。
+- 1 个主色 (ink) + 1 个 accent (NYT red `#a91d1d` / 编辑 mint `#5fb38a` / 暖橙 `#d97757` 三选一)。
+- Y 轴刻度仅 hairline + 3-4 个 tick, 标签在轴外侧 mono 字。
+- 严禁 grid 全屏铺线、阴影、3D 立体柱; 严禁 emoji。
+- 必须用用户提供的数据。如果输入是文本结论, 自动估算合理坐标 (但要标注 "schematic"); 如果是 CSV/JSON, 直接绘制。
+- 单文件 HTML; 数据点旁注释格式: `<text class="annot">2024 · 412M</text>`。

package/skills/design/scene-metrics-chart-nyt-playbook/example.html ADDED Viewed

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>NYT Chart · AI Agent MAU 2018–2026</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet" />
+<style>
+  body { font-family:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif; background:#f7f5ee; color:#1a1a1a; margin:0; }
+  .serif { font-family:'Source Serif Pro',Georgia,serif; }
+  .mono { font-family:'IBM Plex Mono',ui-monospace,monospace; }
+  .nyt-red { color:#a91d1d; }
+  .nyt-red-fill { fill:#a91d1d; }
+  .kicker { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
+  @keyframes draw { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
+  .line { stroke-dasharray:1000; animation: draw 1.4s ease-out forwards; animation-delay: .4s; opacity:0; animation-fill-mode: forwards; }
+  .line { animation: draw 1.4s ease-out .4s forwards, fadeIn .1s linear .4s forwards; }
+  @keyframes fadeIn { to { opacity:1 } }
+</style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-12">
+  <article class="w-[1280px] max-w-full">
+    <header class="flex items-baseline justify-between">
+      <div class="kicker nyt-red font-semibold">GLOBAL · MONTHLY ACTIVE USERS · 2018–2026</div>
+      <div class="kicker opacity-60 mono">FRAME 04 · CHART</div>
+    </header>
+    <h1 class="serif mt-3 leading-[1.05] font-medium" style="font-size:clamp(36px,4.4vw,68px)">
+      AI agent 月活在 <span class="nyt-red italic">2024 之后</span> 进入两段抛物线 ——<br/>
+      第一段由云端 Claude / GPT 推动, 第二段由本地 CLI agent 普及。
+    </h1>
+    <!-- chart -->
+    <svg viewBox="0 0 1100 460" class="mt-8 w-full">
+      <!-- y axis hairlines -->
+      <g stroke="#1a1a1a" stroke-width="0.5" opacity="0.25">
+        <line x1="60" y1="60" x2="1040" y2="60"/>
+        <line x1="60" y1="180" x2="1040" y2="180"/>
+        <line x1="60" y1="300" x2="1040" y2="300"/>
+        <line x1="60" y1="420" x2="1040" y2="420"/>
+      </g>
+      <!-- y labels -->
+      <g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6">
+        <text x="20" y="64">640M</text>
+        <text x="20" y="184">420M</text>
+        <text x="20" y="304">210M</text>
+        <text x="20" y="424">0</text>
+      </g>
+      <!-- area band -->
+      <path d="M 60 410 L 180 405 L 300 395 L 420 380 L 540 355 L 660 320 L 780 270 L 900 195 L 1020 90 L 1020 420 L 60 420 Z" fill="#a91d1d" opacity="0.06"/>
+      <!-- main line -->
+      <polyline class="line" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
+        points="60,410 180,405 300,395 420,380 540,355 660,320 780,270 900,195 1020,90" />
+      <!-- accent inflection -->
+      <polyline fill="none" stroke="#a91d1d" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 5"
+        points="780,270 900,195 1020,90" />
+      <!-- data points -->
+      <g>
+        <circle cx="60" cy="410" r="4" fill="#1a1a1a"/>
+        <circle cx="180" cy="405" r="4" fill="#1a1a1a"/>
+        <circle cx="300" cy="395" r="4" fill="#1a1a1a"/>
+        <circle cx="420" cy="380" r="4" fill="#1a1a1a"/>
+        <circle cx="540" cy="355" r="4" fill="#1a1a1a"/>
+        <circle cx="660" cy="320" r="4" fill="#1a1a1a"/>
+        <circle cx="780" cy="270" r="6" class="nyt-red-fill"/>
+        <circle cx="900" cy="195" r="6" class="nyt-red-fill"/>
+        <circle cx="1020" cy="90" r="6" class="nyt-red-fill"/>
+      </g>
+      <!-- annotations -->
+      <g class="mono" font-size="11" fill="#1a1a1a">
+        <text x="784" y="250">2024 · 310M</text>
+        <text x="894" y="175" class="nyt-red-fill">2025 · 468M</text>
+        <text x="1010" y="70" class="nyt-red-fill" text-anchor="end">2026 · 640M</text>
+      </g>
+      <!-- inflection callout -->
+      <g class="serif" font-style="italic" fill="#a91d1d">
+        <text x="800" y="380" font-size="14">⤴ Inflection point</text>
+        <text x="800" y="398" font-size="14">local CLI agents普及</text>
+      </g>
+      <!-- x labels -->
+      <g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6">
+        <text x="60" y="445" text-anchor="middle">'18</text>
+        <text x="180" y="445" text-anchor="middle">'19</text>
+        <text x="300" y="445" text-anchor="middle">'20</text>
+        <text x="420" y="445" text-anchor="middle">'21</text>
+        <text x="540" y="445" text-anchor="middle">'22</text>
+        <text x="660" y="445" text-anchor="middle">'23</text>
+        <text x="780" y="445" text-anchor="middle">'24</text>
+        <text x="900" y="445" text-anchor="middle">'25</text>
+        <text x="1020" y="445" text-anchor="middle">'26</text>
+      </g>
+    </svg>
+    <footer class="mt-3 flex items-baseline justify-between mono text-[10.5px] opacity-60">
+      <span>Source · Synthesized industry estimates, 2026-05</span>
+      <span>Chart by HTML-Anything</span>
+      <span>NYT-STYLE · FRAME-DATA-CHART-NYT</span>
+    </footer>
+  </article>
+</body>
+</html>

package/skills/design/scene-metrics-chart-nyt-sample-worked-sample/SKILL.md ADDED Viewed

@@ -0,0 +1,37 @@
+---
+name: scene-metrics-chart-nyt-sample-worked-sample
+description: |
+  Use this skill when Codex needs procedural guidance derived from frame-data-chart-nyt/example.md. Recast from the original frame-data-chart-nyt/example.md material as the scene-metrics-chart-nyt-sample-worked-sample procedure.
+---
+# Scene Metrics Chart Nyt Sample Worked Sample
+## Role
+Use this skill when Codex needs procedural guidance derived from frame-data-chart-nyt/example.md. Recast from the original frame-data-chart-nyt/example.md material as the scene-metrics-chart-nyt-sample-worked-sample procedure.
+## Source Trace
+- Original Markdown: `frame-data-chart-nyt/example.md`
+- Reformulated skill name: `scene-metrics-chart-nyt-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.
+> NYT 风折线图, 一个结论 + 8 个数据点
+## 结论
+**AI agent 月活在 2024 之后呈两段抛物线增长** — 第一段由 Claude / GPT 工作流推动, 第二段由本地 CLI agent (Cursor / Codex / Aider) 普及推动。
+## 数据 (CSV)
+year,MAU_millions
+2018,12
+2019,28
+2020,58
+2021,90
+2022,140
+2023,210
+2024,310
+2025,468
+2026,640