constellai 0.3.0

package/skills/design/riso/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: "riso"
+description: "A playful, joyful, two-color risograph print aesthetic built on a single warm off-white paper surface running through every section"
+metadata:
+  author: typeui.sh
+---
+
+<!-- TYPEUI_SH_MANAGED_START -->
+# Riso Design System Skill (Universal)
+
+## Mission
+You are an expert design-system guideline author for Riso.
+Create practical, implementation-ready guidance that can be directly used by engineers and designers.
+
+## Brand
+A playful, joyful, two-color risograph print aesthetic — built on a single warm off-white paper surface running through every section, a fluorescent brand pink reserved as the sole interaction driver, a deep federal-blue secondary carrying every heading and the signature offset print-shadow
+
+## Style Foundations
+- Visual style: clean, high-contrast
+- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Space Grotesk, display=Space Grotesk, mono=Overpass Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
+- Color palette: primary, secondary | Tokens: primary=#F237A1, secondary=#2C40A7, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
+- Spacing scale: 4/8/12/16/24/32
+
+## Accessibility
+WCAG 2.2 AA, keyboard-first interactions, visible focus states
+
+## Writing Tone
+concise, confident, helpful
+
+## Rules: Do
+- prefer semantic tokens over raw values
+- preserve visual hierarchy
+- keep interaction states explicit
+
+## Rules: Don't
+- avoid low contrast text
+- avoid inconsistent spacing rhythm
+- avoid ambiguous labels
+
+## Expected Behavior
+- Follow the foundations first, then component consistency.
+- When uncertain, prioritize accessibility and clarity over novelty.
+- Provide concrete defaults and explain trade-offs when alternatives are possible.
+- Keep guidance opinionated, concise, and implementation-focused.
+
+## Guideline Authoring Workflow
+1. Restate the design intent in one sentence before proposing rules.
+2. Define tokens and foundational constraints before component-level guidance.
+3. Specify component anatomy, states, variants, and interaction behavior.
+4. Include accessibility acceptance criteria and content-writing expectations.
+5. Add anti-patterns and migration notes for existing inconsistent UI.
+6. End with a QA checklist that can be executed in code review.
+
+## Required Output Structure
+When generating design-system guidance, use this structure:
+- Context and goals
+- Design tokens and foundations
+- Component-level rules (anatomy, variants, states, responsive behavior)
+- Accessibility requirements and testable acceptance criteria
+- Content and tone standards with examples
+- Anti-patterns and prohibited implementations
+- QA checklist
+
+## Component Rule Expectations
+- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
+- Describe interaction behavior for keyboard, pointer, and touch.
+- State spacing, typography, and color-token usage explicitly.
+- Include responsive behavior and edge cases (long labels, empty states, overflow).
+
+## Quality Gates
+- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
+- Every accessibility statement must be testable in implementation.
+- Prefer system consistency over one-off local optimizations.
+- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.
+
+## Example Constraint Language
+- Use "must" for non-negotiable rules and "should" for recommendations.
+- Pair every do-rule with at least one concrete don't-example.
+- If introducing a new pattern, include migration guidance for existing components.
+
+<!-- TYPEUI_SH_MANAGED_END -->

package/skills/design/scene-distortion-headline-playbook/SKILL.md

@@ -0,0 +1,52 @@
+---
+name: scene-distortion-headline-playbook
+description: |
+  Use this skill when Codex needs digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes. Recast from the original frame-glitch-title/SKILL.md material as the scene-distortion-headline-playbook procedure.
+---
+
+# Scene Distortion Headline Playbook
+
+## Role
+
+Use this skill when Codex needs digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes. Recast from the original frame-glitch-title/SKILL.md material as the scene-distortion-headline-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `frame-glitch-title/SKILL.md`
+- Reformulated skill name: `scene-distortion-headline-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.
+
+【模板: 故障艺术标题帧 (Glitch Title)】
+【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。
+
+【画布】1920×1080, 背景 `#070708` 近黑或 CRT 暗灰 `#0d0e10`; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。
+
+【主标题】
+- 居中, 6-9vw, weight 800/900, 字体 `Space Grotesk Bold` / `Inter Tight Black` / `JetBrains Mono Bold`。
+- 颜色: 主层 `#f5f5f7`; 后面套 2 层伪影:
+  - cyan `#00f0ff` translate(`-3px`, `1px`)。
+  - magenta `#ff2bd6` translate(`3px`, `-1px`)。
+- 整层加 clip-path 切片 5-8 段, 每段 `@keyframes` 随机 translateX -10px → 10px, 持续 80-160ms, 错峰播放, 营造 "data corruption" 像散。
+- 每隔 1.5s 触发一次"重故障" — 整个标题被 horizontal smear 1 frame, 用 `filter: url(#displacementFilter)` 或简单 CSS 平移。
+
+【附加层】
+- 顶部一行 caption (uppercase mono, 11px, opacity 0.6): `>> SIGNAL_LOST · CH-04 · 14:32:08`。
+- 标题下面 1 行副标 (24-28px, mono, opacity 0.7), 偶发被 ` ̶▒̶` 字符替换 (假乱码)。
+- 角落随机点缀 `█▓▒░` ASCII 噪点 chunks。
+- 底部 timecode (mono, opacity 0.4)。
+- 整画面叠 noise grain 层 `background-image: url("data:image/svg+xml,...turbulence...")`, opacity 6%, mix-blend-mode overlay。
+
+【SVG 滤镜 (可选)】
+- 定义 `<filter id="rgbShift">` 用 `feColorMatrix` + `feOffset` + `feMerge` 把 R/G/B 三通道偏移; 整层 `filter: url(#rgbShift)` 在故障瞬间应用。
+
+【设计细节】
+- 颜色仅用: 黑 / 白 / cyan / magenta / 一点 amber 警告色; 严禁全彩虹。
+- 字体: 西文 `Space Grotesk` 或 `JetBrains Mono` Bold; 中文 `Noto Sans Mono CJK SC` 或 `Noto Sans SC` Bold。
+- 严禁 lorem ipsum; 必须用用户的标题 + 副标。
+- 动效用 `@keyframes`, 可被 `prefers-reduced-motion` 关闭 (退回静态 chromatic split)。
+- 单文件 HTML。

package/skills/design/scene-distortion-headline-playbook/example.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Glitch Title · SIGNAL_LOST</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
+<style>
+  body { font-family:'Space Grotesk',sans-serif; background:#0d0e10; color:#f5f5f7; margin:0; min-height:100vh; overflow:hidden; position:relative; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+  /* scanlines */
+  body::before {
+    content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
+    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
+    mix-blend-mode: multiply; opacity:0.6;
+  }
+  /* grid */
+  body::after {
+    content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
+    background-image: linear-gradient(rgba(0,255,180,0.04) 1px, transparent 1px), linear-gradient(90deg,rgba(0,255,180,0.04) 1px, transparent 1px);
+    background-size: 56px 56px;
+  }
+  /* grain */
+  .grain { position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; z-index:4; pointer-events:none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
+  @keyframes glitch {
+    0%, 92%, 100% { transform: translate(0,0); filter: none }
+    93% { transform: translate(-6px, 1px); filter: url(#rgb) }
+    94% { transform: translate(8px, -2px); filter: url(#rgb) }
+    95% { transform: translate(-4px, 2px); }
+    96% { transform: translate(4px, -1px); filter: url(#rgb) }
+    97% { transform: translate(0,0) }
+  }
+  .glitch-host { position:relative; animation: glitch 4s infinite; }
+  .layer { position:absolute; inset:0; mix-blend-mode:screen; }
+  .layer-c { color:#00f0ff; transform: translate(-3px, 1px); }
+  .layer-m { color:#ff2bd6; transform: translate(3px, -1px); }
+  .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.7) 100%); z-index:5; pointer-events:none; }
+  .ascii { font-family:'JetBrains Mono',monospace; letter-spacing:2px; line-height:1; }
+  @media (prefers-reduced-motion: reduce) { .glitch-host { animation: none } }
+</style>
+</head>
+<body class="flex flex-col items-center justify-center relative">
+
+  <svg width="0" height="0" style="position:absolute">
+    <defs>
+      <filter id="rgb">
+        <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+        <feOffset in="SourceGraphic" dx="3" dy="0" result="r"/>
+        <feOffset in="SourceGraphic" dx="-3" dy="0" result="b"/>
+        <feMerge><feMergeNode in="r"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+      </filter>
+    </defs>
+  </svg>
+
+  <header class="absolute top-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-70 z-10 tracking-[0.16em]">
+    <span>&gt;&gt; SIGNAL_LOST · CH-04 · 14:32:08</span>
+    <span>FRAME · GLITCH-TITLE</span>
+    <span>REC ●</span>
+  </header>
+
+  <!-- ASCII chunks corners -->
+  <pre class="ascii absolute top-24 left-12 text-[12px] opacity-30 z-10">█▓▒░ █▓▒░
+▒▓█▓ ░▒▓
+░▒▓█ ▓▒░░
+▓▒░░ ▒▓█▓</pre>
+  <pre class="ascii absolute bottom-24 right-12 text-[12px] opacity-30 z-10 text-right">█▓▒░ ▓▒░█
+▒░░▓ ░▒▓█
+▓▒░░ █▓▒░
+░▒▓█ ▒░░▓</pre>
+
+  <main class="relative z-10 text-center px-12">
+    <div class="mono text-[14px] opacity-60 tracking-[0.22em] mb-6 uppercase">— Transmission Halted —</div>
+    <div class="glitch-host relative inline-block">
+      <h1 class="font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
+        SIGNAL<br/>_LOST
+      </h1>
+      <h1 class="layer layer-c font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
+        SIGNAL<br/>_LOST
+      </h1>
+      <h1 class="layer layer-m font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
+        SIGNAL<br/>_LOST
+      </h1>
+    </div>
+    <p class="mt-10 mono text-[16px] opacity-70 tracking-[0.16em]">
+      04 · DATA_CORRUPTION · <span style="color:#ffb547">w̶̶a̷i̶t̶i̶n̶g̶ ̷f̷o̶r̶ ̶r̷e̶c̶o̶v̷e̶r̶y̶</span>
+    </p>
+  </main>
+
+  <div class="grain"></div>
+  <div class="vignette"></div>
+
+  <footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-50 z-10 tracking-[0.16em]">
+    <span>HTML-ANYTHING / VFX</span>
+    <span style="color:#ff2bd6">CHROMATIC · CYAN × MAGENTA</span>
+    <span class="mono">⏵ 00:14:32:08</span>
+  </footer>
+</body>
+</html>

package/skills/design/scene-distortion-headline-sample-worked-sample/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: scene-distortion-headline-sample-worked-sample
+description: |
+  Use this skill when Codex needs procedural guidance derived from frame-glitch-title/example.md. Recast from the original frame-glitch-title/example.md material as the scene-distortion-headline-sample-worked-sample procedure.
+---
+
+# Scene Distortion Headline Sample Worked Sample
+
+## Role
+
+Use this skill when Codex needs procedural guidance derived from frame-glitch-title/example.md. Recast from the original frame-glitch-title/example.md material as the scene-distortion-headline-sample-worked-sample procedure.
+
+## Source Trace
+
+- Original Markdown: `frame-glitch-title/example.md`
+- Reformulated skill name: `scene-distortion-headline-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.
+
+> Cyan / magenta 像散, CRT 扫描线 + ASCII 噪点
+
+## 标题
+SIGNAL_LOST
+
+## 副标
+04 · DATA CORRUPTION · 14:32:08
+
+## 章节标识
+CH-04 / SIGNAL CORRUPTED — 数据失真重组

package/skills/design/scene-distortion-headline-sample-worked-sample/example.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Glitch Title · SIGNAL_LOST</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
+<style>
+  body { font-family:'Space Grotesk',sans-serif; background:#0d0e10; color:#f5f5f7; margin:0; min-height:100vh; overflow:hidden; position:relative; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+  /* scanlines */
+  body::before {
+    content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
+    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
+    mix-blend-mode: multiply; opacity:0.6;
+  }
+  /* grid */
+  body::after {
+    content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
+    background-image: linear-gradient(rgba(0,255,180,0.04) 1px, transparent 1px), linear-gradient(90deg,rgba(0,255,180,0.04) 1px, transparent 1px);
+    background-size: 56px 56px;
+  }
+  /* grain */
+  .grain { position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; z-index:4; pointer-events:none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
+  @keyframes glitch {
+    0%, 92%, 100% { transform: translate(0,0); filter: none }
+    93% { transform: translate(-6px, 1px); filter: url(#rgb) }
+    94% { transform: translate(8px, -2px); filter: url(#rgb) }
+    95% { transform: translate(-4px, 2px); }
+    96% { transform: translate(4px, -1px); filter: url(#rgb) }
+    97% { transform: translate(0,0) }
+  }
+  .glitch-host { position:relative; animation: glitch 4s infinite; }
+  .layer { position:absolute; inset:0; mix-blend-mode:screen; }
+  .layer-c { color:#00f0ff; transform: translate(-3px, 1px); }
+  .layer-m { color:#ff2bd6; transform: translate(3px, -1px); }
+  .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.7) 100%); z-index:5; pointer-events:none; }
+  .ascii { font-family:'JetBrains Mono',monospace; letter-spacing:2px; line-height:1; }
+  @media (prefers-reduced-motion: reduce) { .glitch-host { animation: none } }
+</style>
+</head>
+<body class="flex flex-col items-center justify-center relative">
+
+  <svg width="0" height="0" style="position:absolute">
+    <defs>
+      <filter id="rgb">
+        <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+        <feOffset in="SourceGraphic" dx="3" dy="0" result="r"/>
+        <feOffset in="SourceGraphic" dx="-3" dy="0" result="b"/>
+        <feMerge><feMergeNode in="r"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+      </filter>
+    </defs>
+  </svg>
+
+  <header class="absolute top-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-70 z-10 tracking-[0.16em]">
+    <span>&gt;&gt; SIGNAL_LOST · CH-04 · 14:32:08</span>
+    <span>FRAME · GLITCH-TITLE</span>
+    <span>REC ●</span>
+  </header>
+
+  <!-- ASCII chunks corners -->
+  <pre class="ascii absolute top-24 left-12 text-[12px] opacity-30 z-10">█▓▒░ █▓▒░
+▒▓█▓ ░▒▓
+░▒▓█ ▓▒░░
+▓▒░░ ▒▓█▓</pre>
+  <pre class="ascii absolute bottom-24 right-12 text-[12px] opacity-30 z-10 text-right">█▓▒░ ▓▒░█
+▒░░▓ ░▒▓█
+▓▒░░ █▓▒░
+░▒▓█ ▒░░▓</pre>
+
+  <main class="relative z-10 text-center px-12">
+    <div class="mono text-[14px] opacity-60 tracking-[0.22em] mb-6 uppercase">— Transmission Halted —</div>
+    <div class="glitch-host relative inline-block">
+      <h1 class="font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
+        SIGNAL<br/>_LOST
+      </h1>
+      <h1 class="layer layer-c font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
+        SIGNAL<br/>_LOST
+      </h1>
+      <h1 class="layer layer-m font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
+        SIGNAL<br/>_LOST
+      </h1>
+    </div>
+    <p class="mt-10 mono text-[16px] opacity-70 tracking-[0.16em]">
+      04 · DATA_CORRUPTION · <span style="color:#ffb547">w̶̶a̷i̶t̶i̶n̶g̶ ̷f̷o̶r̶ ̶r̷e̶c̶o̶v̷e̶r̶y̶</span>
+    </p>
+  </main>
+
+  <div class="grain"></div>
+  <div class="vignette"></div>
+
+  <footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-50 z-10 tracking-[0.16em]">
+    <span>HTML-ANYTHING / VFX</span>
+    <span style="color:#ff2bd6">CHROMATIC · CYAN × MAGENTA</span>
+    <span class="mono">⏵ 00:14:32:08</span>
+  </footer>
+</body>
+</html>

package/skills/design/scene-flow-notes/SKILL.md

@@ -0,0 +1,51 @@
+---
+name: scene-flow-notes
+description: |
+  Use this skill when Codex needs sVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel. Recast from the original frame-flowchart-sticky/SKILL.md material as the scene-flow-notes procedure.
+---
+
+# Scene Flow Notes
+
+## Role
+
+Use this skill when Codex needs sVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel. Recast from the original frame-flowchart-sticky/SKILL.md material as the scene-flow-notes procedure.
+
+## Source Trace
+
+- Original Markdown: `frame-flowchart-sticky/SKILL.md`
+- Reformulated skill name: `scene-flow-notes`
+- 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.
+
+【模板: 便利贴流程图帧 (Sticky Flowchart)】
+【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。
+
+【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4`; 加非常浅的 hex grid `rgba(0,0,0,0.04)` 让它有白板感。
+
+【节点 (Sticky Notes)】
+- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` / 桃 `#fca5a5` / 薄荷 `#a7f3d0` / 天 `#a5b4fc`。
+- 便利贴有轻微旋转 `transform: rotate(±2deg)` 不一致, 投影 `drop-shadow(0 6px 14px rgba(0,0,0,0.12))`, 顶部胶带 `linear-gradient(...)` 装饰。
+- 节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。
+- 节点字体: `Kalam` / `Caveat` / `Patrick Hand` 手写感字体 (中文用 `霞鹜文楷` 或 `LXGW WenKai Screen`)。
+
+【连接线 (SVG)】
+- 用 `<path>` Bezier 曲线连接节点, stroke `#2a2a2a`, width 2.5, `stroke-linecap: round`, `stroke-dasharray: 0` (实线) 或 `8 6` (虚线 = 条件分支)。
+- 箭头终端用 `marker-end`, 黑色三角小箭头。
+- 复杂节点可有循环或分支: 同一节点连出 2 条 (分叉) 或 2 条进入一节点 (合并)。
+
+【可选交互】
+- 顶部 caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026"。
+- 鼠标 hover 节点: 抬起阴影 + scale 1.05, 用 CSS transition。
+- 一个"光标"装饰 (`<svg>` arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。
+
+【设计细节】
+- 至少 5 个节点, 最多 12 个。
+- 节点排布不要全部居中对齐, 要有一点白板风的"随手贴"感, 但保证连接线清晰不交叉。
+- 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。
+- 字体不能用 Inter / 衬线, 必须手写感。
+- 单文件 HTML, 不要外部图标库 (用 inline SVG)。
+- 必须用用户的真实流程内容; 节点文字直接来自用户输入。

package/skills/design/scene-flow-notes/example.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>Sticky Flowchart · HTML Anything Onboarding</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Patrick+Hand&family=Inter:wght@400;500;600&family=IBM+Plex+Mono&display=swap" rel="stylesheet" />
+<style>
+  body {
+    font-family:'Patrick Hand','Caveat',cursive;
+    background:
+      linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px),
+      #f4ede1;
+    background-size: 40px 40px;
+    color:#2a2a2a;
+    min-height:100vh;
+    margin:0;
+  }
+  .sticky {
+    width:200px; min-height:150px;
+    padding:14px 16px;
+    box-shadow: 0 6px 14px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
+    position:absolute;
+    border-radius: 2px 2px 4px 4px;
+  }
+  .sticky::before {
+    content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg);
+    width:80px; height:18px; background:rgba(255,255,255,0.6);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  }
+  .yellow { background:#fcd34d; transform: rotate(-1.5deg); }
+  .peach { background:#fca5a5; transform: rotate(1.2deg); }
+  .mint { background:#a7f3d0; transform: rotate(-0.8deg); }
+  .sky { background:#a5b4fc; transform: rotate(2deg); }
+  .sticky h3 { font-family:'Caveat',cursive; font-size:22px; font-weight:700; line-height:1.1; }
+  .sticky p { font-family:'Patrick Hand',cursive; font-size:14px; line-height:1.3; margin-top:6px; opacity:0.85; }
+  .num { font-family:'Caveat',cursive; font-weight:700; font-size:28px; line-height:1; }
+  .mono { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
+  .cursor-tag {
+    position:absolute; transform: translate(-50%,-100%);
+    background:#1a1a1a; color:#fff; font-family:'Inter',sans-serif; font-size:10px;
+    padding:2px 8px; border-radius:10px; font-weight:600;
+  }
+</style>
+</head>
+<body class="relative overflow-hidden">
+  <!-- header -->
+  <header class="px-12 pt-10 flex items-baseline justify-between">
+    <div class="mono opacity-70">FLOW · ONBOARDING · 2026</div>
+    <h1 style="font-family:'Caveat',cursive;font-size:36px;font-weight:700">HTML Anything · 新用户上手</h1>
+    <div class="mono opacity-70">FRAME-FLOWCHART-STICKY</div>
+  </header>
+
+  <!-- canvas -->
+  <div class="relative" style="height:780px">
+
+    <!-- SVG connectors layer -->
+    <svg class="absolute inset-0 w-full h-full" viewBox="0 0 1500 780" preserveAspectRatio="none" style="pointer-events:none">
+      <defs>
+        <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+          <path d="M0,0 L10,5 L0,10 z" fill="#2a2a2a"/>
+        </marker>
+      </defs>
+      <!-- 1 → 2 -->
+      <path d="M 240 240 C 320 240, 360 240, 420 240" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
+      <!-- 2 → 3 -->
+      <path d="M 620 240 C 700 240, 740 240, 800 240" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
+      <!-- 3 → 4 -->
+      <path d="M 1000 240 C 1100 240, 1140 290, 1100 360 S 980 480, 880 480" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
+      <!-- 4 → 5 -->
+      <path d="M 680 480 C 580 480, 540 480, 480 480" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
+      <!-- 5 → 6 -->
+      <path d="M 280 480 C 200 480, 160 540, 180 600 S 280 700, 380 700" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
+      <!-- branch: 2 → installer (dashed) -->
+      <path d="M 520 320 C 520 400, 560 440, 700 440" fill="none" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-dasharray="8 6" marker-end="url(#arrow)"/>
+    </svg>
+
+    <!-- node 1: 打开 -->
+    <div class="sticky yellow" style="top:160px; left:60px">
+      <div class="num">01</div>
+      <h3 class="mt-1">打开 localhost:3456</h3>
+      <p>浏览器进入主界面</p>
+    </div>
+
+    <!-- node 2: 扫 agent -->
+    <div class="sticky peach" style="top:160px; left:420px">
+      <div class="num">02</div>
+      <h3 class="mt-1">扫描本地 Agent</h3>
+      <p>列出 17 个 CLI 中已登录的那几个</p>
+    </div>
+
+    <!-- node 3: 选模板 -->
+    <div class="sticky mint" style="top:160px; left:800px">
+      <div class="num">03</div>
+      <h3 class="mt-1">选 75 个模板之一</h3>
+      <p>按场景 / 关键字搜</p>
+    </div>
+
+    <!-- node 4: 粘内容 -->
+    <div class="sticky sky" style="top:400px; left:680px">
+      <div class="num">04</div>
+      <h3 class="mt-1">粘 MD / CSV / 图</h3>
+      <p>自动识别格式</p>
+    </div>
+
+    <!-- node 5: 转换 -->
+    <div class="sticky yellow" style="top:400px; left:280px">
+      <div class="num">05</div>
+      <h3 class="mt-1">⌘+Enter 转换</h3>
+      <p>SSE 流式刷新预览</p>
+    </div>
+
+    <!-- node 6: 复制 -->
+    <div class="sticky mint" style="top:620px; left:380px">
+      <div class="num">06</div>
+      <h3 class="mt-1">一键复制 / 下载</h3>
+      <p>公众号 / 推特 / PNG / HTML</p>
+    </div>
+
+    <!-- branch: 安装 agent -->
+    <div class="sticky peach" style="top:400px; left:700px; transform:rotate(3deg); width:200px">
+      <div class="num">⤳</div>
+      <h3 class="mt-1">分支: 装个 CLI</h3>
+      <p>没有? brew install claude</p>
+    </div>
+
+    <!-- cursor tag -->
+    <div class="cursor-tag" style="top:280px; left:520px;">🟠 you</div>
+  </div>
+
+  <footer class="px-12 pb-6 flex items-baseline justify-between mono opacity-60">
+    <span>FLOWCHART · WHITEBOARD STYLE · 6 NODES + 1 BRANCH</span>
+    <span>html-anything.dev/onboarding</span>
+  </footer>
+</body>
+</html>

package/skills/design/scene-flow-notes-sample-worked-sample/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: scene-flow-notes-sample-worked-sample
+description: |
+  Use this skill when Codex needs procedural guidance derived from frame-flowchart-sticky/example.md. Recast from the original frame-flowchart-sticky/example.md material as the scene-flow-notes-sample-worked-sample procedure.
+---
+
+# Scene Flow Notes Sample Worked Sample
+
+## Role
+
+Use this skill when Codex needs procedural guidance derived from frame-flowchart-sticky/example.md. Recast from the original frame-flowchart-sticky/example.md material as the scene-flow-notes-sample-worked-sample procedure.
+
+## Source Trace
+
+- Original Markdown: `frame-flowchart-sticky/example.md`
+- Reformulated skill name: `scene-flow-notes-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.
+
+> 白板风便利贴流程图, 6 节点, 1 个分支
+
+## 流程
+1. **打开 localhost:3456** — 浏览器进入主界面
+2. **自动识别本地 agent** — 扫描 PATH, 列出已登录的 CLI
+3. **选模板** — 75 个模板按场景分类
+4. **粘贴内容 / 上传文件** — Markdown / CSV / Excel 都支持
+5. **⌘+Enter 转换** — 流式调用 agent → SSE → 实时刷新预览
+6. **一键复制 / 下载** — 公众号 / 推特 / 知乎 / PNG / HTML
+
+分支: 若无本地 agent → 引导安装 (Claude / Cursor / Codex)