create-yss-spec 1.0.0

package/template/.claude/skills/web-video-presentation/templates/src/styles/base.css

@@ -0,0 +1,415 @@
+/* ─────────────────────────────────────────────────────────────────────
+ * base.css — design system for the web-video-presentation skill.
+ *
+ * Ownership split:
+ *   • Themes (themes/<id>/tokens.css) own COLOR, FONTS, and the
+ *     "personality knobs" that make themes recognizable
+ *     (--r-card / --rule-* / --hero-num-* / --card-shadow / decorative
+ *     pattern + vignette).
+ *   • Chapters use COLOR + FONT tokens (mandatory) and the personality
+ *     primitive classes (.hero-num / .rule / .card / .stage-frame).
+ *     Everything else — font sizes, spacing, motion timings, easings,
+ *     border widths, generic radii — chapters write freely (token OR
+ *     hard-coded value, whatever the content needs).
+ *
+ * The variables defined below are kept ONLY for the primitive classes
+ * in this file (.label-mono / .kicker / .corner-mark / .click-cue /
+ * .scene-pad / .badge-mono / .pull-quote / .card / .masthead). They are
+ * NOT a contract chapters must consume.
+ * ───────────────────────────────────────────────────────────────────── */
+
+/* ─── 0. Reset ─── */
+*, *::before, *::after { box-sizing: border-box; }
+html, body, #root { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+img, svg, video { display: block; max-width: 100%; }
+button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
+
+/* ─── 1. Body defaults (theme palette + features applied here) ─── */
+body {
+  font-family: var(--font-display-cn);
+  color: var(--text);
+  background: var(--shell);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: geometricPrecision;
+  text-wrap: pretty;
+  /* OpenType feature settings (themes can override the value) */
+  font-feature-settings: var(--font-features, "tnum", "ss01");
+  letter-spacing: var(--track-snug, -0.005em);
+  cursor: default;
+}
+::selection { background: var(--accent); color: var(--surface); }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * 2. Design tokens — defaults for things themes RARELY need to change.
+ *    A theme can override any of these in its tokens.css.
+ * ───────────────────────────────────────────────────────────────────── */
+:root {
+  /* ── Type scale (used by primitive classes below; chapters can use
+        these OR write hard-coded sizes — whatever the content needs) ── */
+  --t-display-1:   clamp(140px, 11vw, 200px);
+  --t-display-2:   clamp(80px, 7vw, 128px);
+  --t-h1:          clamp(56px, 5vw, 88px);
+  --t-h2:          clamp(40px, 3.6vw, 60px);
+  --t-body:        20px;
+  --t-micro:       12px;
+
+  /* ── Tracking presets (used by primitive classes) ── */
+  --track-tight:   -0.025em;   /* large serif display */
+  --track-snug:    -0.005em;   /* body */
+  --track-caps:     0.22em;    /* mono uppercase labels */
+
+  /* ── Spacing scale (used by primitive classes) ── */
+  --space-2:    8px;
+  --space-3:    12px;
+  --space-4:    16px;
+  --space-5:    24px;
+  --space-7:    48px;
+  --space-9:    96px;
+
+  /* ── Stage padding (theme can dial density) ── */
+  --stage-pad-x: 96px;
+  --stage-pad-y: 80px;
+
+  /* ── Radius scale (themes reference these via --r-card; chapters write
+        their own radii freely) ── */
+  --r-flat:    0;
+  --r-xs:      4px;
+  --r-sm:      8px;
+  --r-md:      16px;
+  --r-xl:      32px;
+  --r-pill:    999px;
+  /* "default card radius" — theme sets identity (sharp / soft / keynote) */
+  --r-card:    var(--r-md);
+
+  /* ── Border weights (used by primitive classes) ── */
+  --bw-1:      1px;
+  --bw-2:      2px;
+  --bw-4:      4px;
+  /* "default rule" — theme sets identity (hairline / thick / dashed) */
+  --rule-w:        1px;
+  --rule-style:    solid;
+
+  /* ── Motion (used by primitive class transitions; chapters time their
+        own motion freely, ideally guided by theme.json `mood`) ── */
+  --ease-quart:     cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-expo:      cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-soft:      cubic-bezier(0.4, 0, 0.1, 1);
+  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --dur-quick:      280ms;
+  --dur-base:       600ms;
+  --dur-slow:       900ms;
+  --dur-cinematic:  1400ms;
+
+  /* ── Hero number style (themes redefine for terminal / chunky / chalk) ── */
+  --hero-num-font:    var(--font-display-en);
+  --hero-num-style:   italic;
+  --hero-num-weight:  400;
+  --hero-num-track:   var(--track-tight);
+
+  /* ── Stage shadow (themes override for paper / glow / flat) ── */
+  --shadow-stage:
+    0 60px 160px rgba(0, 0, 0, 0.55),
+    0 0 0 1px rgba(255, 255, 255, 0.025);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * 3. Stage chrome — letterbox + 16:9 fitter + raw 1920×1080 frame.
+ *    The fitter is sized to ACTUAL visible px so flex-centering is exact.
+ * ───────────────────────────────────────────────────────────────────── */
+.app-shell {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--shell);
+}
+.stage-fitter {
+  position: relative;
+  /* width / height are set inline by Stage.tsx (1920*scale × 1080*scale) */
+  isolation: isolate;
+}
+.stage-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1920px;
+  height: 1080px;
+  transform-origin: top left;
+  background: var(--surface);
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: var(--shadow-stage);
+  border: var(--stage-border, none);
+  /* radius on the LIVE stage gives editorial / keynote softness;
+     theme can disable with --r-stage: 0 */
+  border-radius: var(--r-stage, 0);
+}
+
+/* OPTIONAL pattern layer drawn ON the stage so screen recordings catch it */
+.stage-frame::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: var(--surface-pattern, none);
+  background-size: var(--surface-pattern-size, auto);
+  mix-blend-mode: var(--surface-pattern-blend, normal);
+  opacity: var(--surface-pattern-opacity, 1);
+  z-index: 1;
+}
+/* OPTIONAL radial vignette overlay (chalkboard / cinematic edges) */
+.stage-frame::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: var(--surface-vignette, none);
+  z-index: 1;
+}
+
+/* every chapter root */
+.scene { position: absolute; inset: 0; z-index: 2; }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * 4. Type primitives — chapters compose with these instead of hard sizes.
+ * ───────────────────────────────────────────────────────────────────── */
+.serif-cn {
+  font-family: var(--font-display-cn);
+  font-weight: 700;
+  font-style: normal;          /* prevent inherited italic on CJK */
+  letter-spacing: var(--track-tight);
+  text-shadow: var(--text-shadow, none);
+}
+.serif-it {
+  font-family: var(--font-display-en);
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: var(--track-tight);
+  text-shadow: var(--text-shadow, none);
+}
+.display-en {
+  font-family: var(--font-display-en);
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: var(--track-tight);
+  text-shadow: var(--text-shadow, none);
+}
+.mono { font-family: var(--font-mono); }
+
+/* small uppercase mono label — the workhorse caption / kicker */
+.label-mono {
+  font-family: var(--font-mono);
+  font-size: var(--t-micro);
+  letter-spacing: var(--track-caps);
+  text-transform: uppercase;
+  color: var(--text-mute);
+  font-weight: 500;
+}
+.kicker {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-mute);
+}
+
+/* hero figure / hero number — theme controls font, style, weight */
+.hero-num {
+  font-family: var(--hero-num-font);
+  font-style: var(--hero-num-style);
+  font-weight: var(--hero-num-weight);
+  letter-spacing: var(--hero-num-track);
+  font-variant-numeric: tabular-nums;
+  line-height: 0.9;
+  color: var(--text);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * 5. Layout primitives.
+ * ───────────────────────────────────────────────────────────────────── */
+.scene-pad {
+  position: absolute;
+  inset: 0;
+  padding: var(--stage-pad-y) var(--stage-pad-x);
+  display: flex;
+  flex-direction: column;
+}
+.stack { display: flex; flex-direction: column; }
+.row   { display: flex; flex-direction: row; }
+.fill  { flex: 1; }
+.center { display: grid; place-items: center; }
+
+/* hairline divider — theme controls weight + style (solid / dashed) */
+.rule {
+  height: 0;
+  border: 0;
+  border-top: var(--rule-w) var(--rule-style) var(--rule);
+  width: 100%;
+  margin: 0;
+}
+.rule-accent {
+  height: 0;
+  border: 0;
+  border-top: var(--bw-2) solid var(--accent);
+  width: 100%;
+  margin: 0;
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * 6. Component primitives (reusable visual building blocks).
+ * ───────────────────────────────────────────────────────────────────── */
+
+/* status dot — theme can swap symbol via --accent-mark-content */
+.dot-accent {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 14px var(--accent-glow);
+  vertical-align: middle;
+}
+
+/* corner registration mark (top-left) — film leader / magazine folio */
+.corner-mark {
+  position: absolute;
+  top: var(--space-7);
+  left: var(--space-9);
+  z-index: 5;
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--t-micro);
+  letter-spacing: var(--track-caps);
+  text-transform: uppercase;
+  color: var(--text-mute);
+  pointer-events: none;
+}
+.corner-mark .ord {
+  font-family: var(--font-display-en);
+  font-style: italic;
+  font-size: 28px;
+  line-height: 1;
+  letter-spacing: 0;
+  color: var(--text);
+}
+.corner-mark .slash { opacity: 0.3; font-size: 16px; }
+
+/* bottom-right next-step hint — fades on first step */
+.click-cue {
+  position: absolute;
+  right: var(--space-9);
+  bottom: var(--space-7);
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--track-caps);
+  text-transform: uppercase;
+  color: var(--text-mute);
+  opacity: 0;
+  transition: opacity var(--dur-slow) var(--ease-quart);
+  pointer-events: none;
+}
+.click-cue.visible { opacity: 0.6; }
+.click-cue .arrow {
+  display: inline-block;
+  font-family: var(--font-display-en);
+  font-style: italic;
+  font-size: 20px;
+  letter-spacing: 0;
+  animation: nudge 2.4s var(--ease-soft) infinite;
+}
+@keyframes nudge {
+  0%, 100% { transform: translateX(0); }
+  50%      { transform: translateX(6px); }
+}
+
+/* mono badge / pill */
+.badge-mono {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 4px 10px;
+  border: var(--bw-1) solid var(--rule);
+  border-radius: var(--r-pill);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--track-caps);
+  text-transform: uppercase;
+  color: var(--text-mute);
+}
+.badge-mono.is-accent { color: var(--accent); border-color: var(--accent); }
+
+/* pull-quote — left-bordered editorial block */
+.pull-quote {
+  border-left: var(--bw-4) solid var(--accent);
+  padding: var(--space-3) 0 var(--space-3) var(--space-5);
+  font-family: var(--font-display-cn);
+  font-weight: 700;
+  font-size: var(--t-h2);
+  line-height: 1.3;
+  color: var(--text);
+}
+
+/* card surfaces — theme decides if they're paper-lifted, glass, or flat */
+.card {
+  background: var(--surface-2);
+  border: var(--bw-1) solid var(--rule);
+  border-radius: var(--r-card);
+  box-shadow: var(--card-shadow, none);
+}
+.card-glass {
+  background: var(--card-glass-bg, rgba(255, 255, 255, 0.06));
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: var(--bw-1) solid var(--card-glass-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--r-card);
+}
+
+/* table-row hairline */
+.tr-rule {
+  border-top: var(--rule-w) var(--rule-style) var(--rule);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * 7. Magazine-masthead helpers (used heavily by editorial themes).
+ * ───────────────────────────────────────────────────────────────────── */
+.masthead {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-5);
+  width: 100%;
+}
+.masthead .brand {
+  font-family: var(--font-display-en);
+  font-style: italic;
+  font-size: 22px;
+  color: var(--text);
+  letter-spacing: 0;
+}
+.masthead .issue {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--track-caps);
+  text-transform: uppercase;
+  color: var(--text-mute);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * 8. State helpers.
+ *
+ * `.no-advance` / `[data-no-advance]` — interactive elements inside a
+ * chapter mark themselves with this so a click on them does NOT advance
+ * the global step. The marker is consumed by Stage.tsx; no styles needed.
+ * ───────────────────────────────────────────────────────────────────── */
+.fade-in { animation: fade-in var(--dur-base) var(--ease-quart) both; }
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}

package/template/.claude/skills/web-video-presentation/templates/src/styles/fonts.css

@@ -0,0 +1,20 @@
+/* ─────────────────────────────────────────────────────────────────────
+ * fonts.css — Google Fonts referenced by the built-in themes.
+ *
+ * Loaded via @import (not <link>) for portability across Vite versions.
+ * If you author a new theme that uses a different family, append it
+ * here and to the THEMES.md "fonts loaded by default" list.
+ * ───────────────────────────────────────────────────────────────────── */
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");

package/template/.claude/skills/web-video-presentation/templates/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5174,
+    fs: { allow: [".."] },
+  },
+});

package/template/.claude/skills/web-video-presentation/themes/bauhaus-bold/theme.json

@@ -0,0 +1,27 @@
+{
+  "id": "bauhaus-bold",
+  "name": "Bauhaus Bold",
+  "nameZh": "包豪斯",
+  "description": "Pure off-white surface, primary-blue accent, and chunky Archivo Black display type. Bauhaus / brutalist modernist — best for opinionated manifestos and bold product pitches.",
+  "descriptionZh": "净色底 + 主色蓝强调色 + Archivo Black 黑体. 包豪斯 / 布鲁塔利风格, 适合观点鲜明的演讲与产品发布.",
+  "mood": [
+    "light",
+    "modernist",
+    "bauhaus",
+    "geometric",
+    "bold",
+    "manifesto"
+  ],
+  "bestFor": [
+    "产品发布",
+    "观点宣言",
+    "设计演讲",
+    "品牌主张"
+  ],
+  "preview": {
+    "shell": "#f0eee8",
+    "surface": "#fafaf7",
+    "text": "#0a0a0a",
+    "accent": "#1a4cdb"
+  }
+}

package/template/.claude/skills/web-video-presentation/themes/bauhaus-bold/tokens.css

@@ -0,0 +1,60 @@
+/* ─────────────────────────────────────────────────────────────────────
+ * Theme · bauhaus-bold
+ *   Modernist / brutalist manifesto. Off-white canvas, pure ink black,
+ *   primary-blue accent. Archivo Black display, Inter body. SHARP
+ *   corners (0 radius), THICK borders (4-8px), no decoration. Motion
+ *   is sharp & quick — no overshoot, no easing tricks.
+ *
+ *   character knobs:
+ *     • hero numbers   — Archivo Black, near-zero tracking, MASSIVE
+ *     • rule           — 4px solid black (geometric heavy)
+ *     • card           — 0 radius, 4px black border
+ *     • surface        — clean (no pattern)
+ *     • motion         — quick, sharp ease-out only
+ * ───────────────────────────────────────────────────────────────────── */
+:root {
+  /* ─── palette ─── */
+  --shell:        #1a1a1a;
+  --surface:      #f4f1ea;
+  --surface-2:    #ffffff;
+  --surface-3:    #e8e3d4;
+  --text:         #0a0a0a;
+  --text-2:       #1f1f1f;
+  --text-mute:    #5a5a5a;
+  --text-faint:   #8c8c8c;
+  --rule:         #0a0a0a;
+  --accent:       #2541ee;
+  --accent-soft:  rgba(37, 65, 238, 0.12);
+  --accent-glow:  rgba(37, 65, 238, 0.40);
+
+  /* ─── fonts ─── */
+  --font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
+  --font-display-en: "Archivo Black", "Inter", "Helvetica Neue", sans-serif;
+  --font-body:       "Inter", "Noto Sans SC", -apple-system, sans-serif;
+  --font-mono:       "JetBrains Mono", "SF Mono", ui-monospace, monospace;
+  --font-features:   "tnum", "ss01";
+
+  /* ─── motion: sharp & fast ─── */
+  --ease-overshoot: cubic-bezier(0.4, 0, 0.2, 1);     /* no overshoot in bauhaus */
+  --dur-quick:     180ms;
+  --dur-base:      400ms;
+  --dur-slow:      650ms;
+  --dur-cinematic: 1000ms;
+
+  /* ─── design identity: heavy geometry ─── */
+  --r-card:        var(--r-flat);     /* SIGNATURE — pure rectangles */
+  --r-stage:       0;
+  --rule-w:        4px;                /* SIGNATURE — heavy lines */
+  --rule-style:    solid;
+  --hero-num-font:    var(--font-display-en);
+  --hero-num-style:   normal;
+  --hero-num-weight:  900;
+  --hero-num-track:   -0.05em;
+  --stage-pad-x:   80px;
+  --stage-pad-y:   60px;
+  --card-shadow:   8px 8px 0 var(--text);   /* SIGNATURE — offset solid shadow */
+  --shadow-stage:
+    0 60px 160px rgba(0, 0, 0, 0.55),
+    0 0 0 4px var(--text);                  /* thick black frame around stage */
+  --stage-border:  4px solid var(--text);
+}

package/template/.claude/skills/web-video-presentation/themes/blueprint/theme.json

@@ -0,0 +1,28 @@
+{
+  "id": "blueprint",
+  "name": "Blueprint",
+  "nameZh": "蓝图",
+  "description": "Deep navy backdrop with cyan accent and IBM Plex Mono. Engineering blueprint / industrial schematic vibe — best for system architecture and technical breakdowns.",
+  "descriptionZh": "深藏青底 + 青色强调色 + IBM Plex Mono. 工程蓝图 / 工业图纸气质, 适合系统架构与技术拆解.",
+  "mood": [
+    "dark",
+    "engineering",
+    "blueprint",
+    "industrial",
+    "technical",
+    "navy"
+  ],
+  "bestFor": [
+    "技术架构",
+    "系统拆解",
+    "技术评测",
+    "工程教程",
+    "API / SDK 介绍"
+  ],
+  "preview": {
+    "shell": "#0a121f",
+    "surface": "#0e1830",
+    "text": "#e6f0ff",
+    "accent": "#5fc7e8"
+  }
+}

package/template/.claude/skills/web-video-presentation/themes/blueprint/tokens.css

@@ -0,0 +1,65 @@
+/* ─────────────────────────────────────────────────────────────────────
+ * Theme · blueprint
+ *   Engineering schematic / architect's drafting board. Deep navy with
+ *   drafting-cyan accent, IBM Plex Mono everywhere, signature DASHED
+ *   2px rules + 60px drafting grid baked into the stage. Hero numbers
+ *   are mono cyan with ticks.
+ *
+ *   character knobs:
+ *     • hero numbers   — mono cyan, 0 letter-spacing
+ *     • rule           — 2px DASHED cyan (drafting line)
+ *     • card           — 2px solid border, 0 radius
+ *     • surface        — 60px drafting grid
+ *     • motion         — measured (precise drafting tools)
+ * ───────────────────────────────────────────────────────────────────── */
+:root {
+  /* ─── palette ─── */
+  --shell:        #0a1224;
+  --surface:      #0e1a2e;
+  --surface-2:    #142441;
+  --surface-3:    #1c2f54;
+  --text:         #d6e5ff;
+  --text-2:       #a8c2f0;
+  --text-mute:    #6c89b8;
+  --text-faint:   #3e5680;
+  --rule:         rgba(120, 200, 255, 0.30);
+  --accent:       #4dd2ff;
+  --accent-soft:  rgba(77, 210, 255, 0.10);
+  --accent-glow:  rgba(77, 210, 255, 0.55);
+
+  /* ─── fonts (mono pairing) ─── */
+  --font-display-cn: "IBM Plex Sans", "Noto Sans SC", sans-serif;
+  --font-display-en: "IBM Plex Mono", "JetBrains Mono", monospace;
+  --font-body:       "IBM Plex Sans", "Noto Sans SC", sans-serif;
+  --font-mono:       "IBM Plex Mono", "JetBrains Mono", monospace;
+  --font-features:   "tnum", "zero", "ss01";
+
+  /* ─── motion: drafting-precise ─── */
+  --dur-base:       500ms;
+  --dur-slow:       800ms;
+  --dur-cinematic:  1200ms;
+
+  /* ─── design identity: drafting board ─── */
+  --r-card:        var(--r-flat);    /* SIGNATURE — engineering, not branding */
+  --r-stage:       0;
+  --rule-w:        2px;
+  --rule-style:    dashed;            /* SIGNATURE — drafting line */
+  --hero-num-font:    var(--font-mono);
+  --hero-num-style:   normal;
+  --hero-num-weight:  500;
+  --hero-num-track:   -0.02em;
+  --stage-pad-x:   96px;
+  --stage-pad-y:   72px;
+  --card-shadow:   inset 0 0 0 2px var(--rule);
+  --shadow-stage:
+    0 60px 160px rgba(0, 20, 60, 0.55),
+    0 0 0 1px rgba(120, 200, 255, 0.10);
+
+  /* ─── decoration: 60px drafting grid ─── */
+  --surface-pattern:
+    linear-gradient(rgba(120, 200, 255, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(120, 200, 255, 0.08) 1px, transparent 1px),
+    linear-gradient(rgba(120, 200, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(120, 200, 255, 0.04) 1px, transparent 1px);
+  --surface-pattern-size: 240px 240px, 240px 240px, 60px 60px, 60px 60px;
+}

package/template/.claude/skills/web-video-presentation/themes/bold-signal/theme.json

@@ -0,0 +1,28 @@
+{
+  "id": "bold-signal",
+  "name": "Bold Signal",
+  "nameZh": "焦点信号",
+  "description": "Dark gradient backdrop with a hot orange focal card and Archivo Black / Space Grotesk typography. Signature: oversized orange focal card as the stage's anchor + tabular section numbers. Built for pitch decks, product launches and statement chapters.",
+  "descriptionZh": "暗渐变底 + 大橙色焦点色卡 + Archivo Black / Space Grotesk 字体。签名：占位主角色卡 + 大编号制表数。适合 pitch deck、产品发布、宣言型章节。",
+  "mood": [
+    "dark",
+    "bold",
+    "signal",
+    "hero",
+    "modern",
+    "pitch"
+  ],
+  "bestFor": [
+    "pitch deck / 投资人路演",
+    "产品发布 / 新品宣传",
+    "营销片头 / brand keynote",
+    "大字宣言 / 标题片",
+    "season hero / 主题营销"
+  ],
+  "preview": {
+    "shell": "#0c0c0c",
+    "surface": "#1a1a1a",
+    "text": "#f5f5f5",
+    "accent": "#ff5722"
+  }
+}