fix(ve-presets): align preview motion and slideCount with example contracts

Review follow-up for #4127 (mrcfps):
- ve-midnight-editorial / ve-terminal-mono / ve-warm-signal set
  od.preview.motion to "deck" while their example.html files are
  vertical scroll-snap documents; switched to "scroll" so the
  marketplace hover clip traverses them correctly.
- ve-terminal-mono / ve-warm-signal advertised slideCount options
  (5-10 / 10-20 / 20+) that the locked prompt overrode with a hard
  8-11 requirement; the prompt now honors {{slideCount}}, and the
  SKILL.md slide-count rule is rephrased as a default that yields to
  the user's selection.
This commit is contained in:
qiongyu1999
2026-06-11 18:14:28 +08:00
parent ac2301894d
commit c2acb0c864
5 changed files with 10 additions and 8 deletions

View File

@@ -52,7 +52,7 @@
"preview": {
"type": "html",
"entry": "./example.html",
"motion": "deck"
"motion": "scroll"
},
"useCase": {
"query": {

View File

@@ -158,7 +158,8 @@ every deck.
- Single self-contained HTML file: all CSS and JS inline; only the Google
Fonts stylesheet may be external. No Chart.js, no mermaid, no CDN scripts,
no remote images; icons and diagram art are inline SVG or pure CSS.
- 8-11 slides for a standard deck; split content into more slides instead of
- Default 8-11 slides for a standard deck; honor the requested slide count
when the user picks one. Split content into more slides instead of
shrinking type or letting a slide scroll.
- Only the spec colors: the two greens (`#50fa7b` dark / `#0d7a3e` light),
the listed surfaces and text tones. No red/blue/yellow semantic colors —

View File

@@ -50,11 +50,11 @@
"preview": {
"type": "html",
"entry": "./example.html",
"motion": "deck"
"motion": "scroll"
},
"useCase": {
"query": {
"en": "Create a Terminal Mono deck about {{topic}} for {{audience}} ({{slideCount}}, {{density}}): a developer-native dark presentation in the locked Terminal Mono theme from visual-explainer. Output one self-contained single-file HTML deck with zero dependencies - all CSS/JS inline, no build step, no external JS libraries, no CDN scripts, no mermaid, no Chart.js; only the Google Fonts stylesheet may be linked. THEME IS LOCKED - reproduce exactly: (a) Dark-first tokens: --font-body/--font-mono 'Geist Mono','SF Mono',Consolas,monospace; --bg:#0a0e14; --surface:#12161e; --surface2:#1a1f2a; --surface-elevated:#222836; --border:rgba(80,250,123,0.06); --border-bright:rgba(80,250,123,0.12); --text:#c8d6e5; --text-dim:#5a6a7a; --accent:#50fa7b; --accent-dim:rgba(80,250,123,0.08); --code-bg:#060a10; --code-text:#c8d6e5; --dot:rgba(80,250,123,0.05). (b) Light theme via @media (prefers-color-scheme: light), MANDATORY (dual theme is the family signature): --bg:#f4f6f8; --surface:#ffffff; --surface2:#eaecf0; --surface-elevated:#f8f9fa; --border:rgba(0,80,40,0.08); --border-bright:rgba(0,80,40,0.16); --text:#1a2332; --text-dim:#5a6a7a; --accent:#0d7a3e; --accent-dim:rgba(13,122,62,0.08); --code-bg:#1a2332; --code-text:#c8d6e5; --dot:rgba(13,122,62,0.07). (c) Mono typographic discipline: ONE typeface - Geist Mono 400/500/600/700; titles are large weight-400 mono with negative letter-spacing (display clamp(36px,7vw,88px), headings clamp(24px,4vw,42px)) - NEVER bold display type; labels are small uppercase weight-600 letterspaced accent; numbers use tabular-nums. (d) Signature texture: every slide carries a faint dot grid background-image: radial-gradient(var(--dot) 1px, transparent 1px) at background-size 24px 24px - no radial glows, no gradients, no shadows. Zero skeuomorphism: no $-prompts, no terminal window chrome, no traffic-light dots, no CRT scanlines or vignettes. Square geometry: border-radius 0-2px, 7px square bullet ticks in accent, square nav dots, 1px green hairline borders only. Restrained corner-bracket SVG decor (two 1.5px accent lines, ~0.25 opacity) on title/closing slides only. (e) Deck engine: .deck is a 100dvh scroll-snap container; each page is one <section class=\"slide\"> at 100dvh; the SlideEngine script (keep verbatim from the seed) builds a 2px accent progress bar, a square dot rail, an n/N counter, and fading hints; keyboard arrows/Space/PageUp/PageDown/Home/End, touch swipe (50px), IntersectionObserver toggles .visible; hash routing mirrors the current slide to #/<n> with deep-link restore on load and hashchange; .reveal children stagger 0.1s per step animating only opacity/transform; prefers-reduced-motion disables all motion. (f) Layout masters to compose from (all present in example.html): centered title with corner brackets and accent display line; section divider with a giant ghost numeral at 0.05 opacity; 3fr/2fr content slide with square-tick bullets and a 1px line-art SVG aside; split before/after panels (surface vs surface2, 1px divider, before-label in text-dim, after-label in accent); pure CSS/SVG pipeline diagram built from hairline .pipe-node boxes joined by 1px connector lines with CSS-triangle arrowheads and uppercase edge labels (never mermaid); KPI dashboard grid with big tabular-nums values; hairline data table with uppercase mono headers, zebra rows, and accent-tint hover; dark code block with accent filename tab and .hl/.cm highlight spans (code stays dark in both themes); centered quote with an oversized accent > glyph at 0.08 opacity as the quote mark (no curly serif quotes); closing slide with one accent <em> word in the display heading. (g) Color discipline: ONLY the spec palette - no red/blue/yellow semantic colors; express before/risk/off with --text-dim and after/win/on with --accent. 8-11 slides; split content into more slides instead of shrinking type; no scrolling inside slides; icons and diagram art are inline SVG or pure CSS, no remote images. Start from the example.html seed shipped in this plugin: keep its :root token blocks (both themes), deck/slide CSS, dot-grid treatment, and the entire SlideEngine script verbatim; replace only the slide content. Do not introduce any color or font outside this specification and do not redesign the theme.",
"en": "Create a Terminal Mono deck about {{topic}} for {{audience}} ({{slideCount}}, {{density}}): a developer-native dark presentation in the locked Terminal Mono theme from visual-explainer. Output one self-contained single-file HTML deck with zero dependencies - all CSS/JS inline, no build step, no external JS libraries, no CDN scripts, no mermaid, no Chart.js; only the Google Fonts stylesheet may be linked. THEME IS LOCKED - reproduce exactly: (a) Dark-first tokens: --font-body/--font-mono 'Geist Mono','SF Mono',Consolas,monospace; --bg:#0a0e14; --surface:#12161e; --surface2:#1a1f2a; --surface-elevated:#222836; --border:rgba(80,250,123,0.06); --border-bright:rgba(80,250,123,0.12); --text:#c8d6e5; --text-dim:#5a6a7a; --accent:#50fa7b; --accent-dim:rgba(80,250,123,0.08); --code-bg:#060a10; --code-text:#c8d6e5; --dot:rgba(80,250,123,0.05). (b) Light theme via @media (prefers-color-scheme: light), MANDATORY (dual theme is the family signature): --bg:#f4f6f8; --surface:#ffffff; --surface2:#eaecf0; --surface-elevated:#f8f9fa; --border:rgba(0,80,40,0.08); --border-bright:rgba(0,80,40,0.16); --text:#1a2332; --text-dim:#5a6a7a; --accent:#0d7a3e; --accent-dim:rgba(13,122,62,0.08); --code-bg:#1a2332; --code-text:#c8d6e5; --dot:rgba(13,122,62,0.07). (c) Mono typographic discipline: ONE typeface - Geist Mono 400/500/600/700; titles are large weight-400 mono with negative letter-spacing (display clamp(36px,7vw,88px), headings clamp(24px,4vw,42px)) - NEVER bold display type; labels are small uppercase weight-600 letterspaced accent; numbers use tabular-nums. (d) Signature texture: every slide carries a faint dot grid background-image: radial-gradient(var(--dot) 1px, transparent 1px) at background-size 24px 24px - no radial glows, no gradients, no shadows. Zero skeuomorphism: no $-prompts, no terminal window chrome, no traffic-light dots, no CRT scanlines or vignettes. Square geometry: border-radius 0-2px, 7px square bullet ticks in accent, square nav dots, 1px green hairline borders only. Restrained corner-bracket SVG decor (two 1.5px accent lines, ~0.25 opacity) on title/closing slides only. (e) Deck engine: .deck is a 100dvh scroll-snap container; each page is one <section class=\"slide\"> at 100dvh; the SlideEngine script (keep verbatim from the seed) builds a 2px accent progress bar, a square dot rail, an n/N counter, and fading hints; keyboard arrows/Space/PageUp/PageDown/Home/End, touch swipe (50px), IntersectionObserver toggles .visible; hash routing mirrors the current slide to #/<n> with deep-link restore on load and hashchange; .reveal children stagger 0.1s per step animating only opacity/transform; prefers-reduced-motion disables all motion. (f) Layout masters to compose from (all present in example.html): centered title with corner brackets and accent display line; section divider with a giant ghost numeral at 0.05 opacity; 3fr/2fr content slide with square-tick bullets and a 1px line-art SVG aside; split before/after panels (surface vs surface2, 1px divider, before-label in text-dim, after-label in accent); pure CSS/SVG pipeline diagram built from hairline .pipe-node boxes joined by 1px connector lines with CSS-triangle arrowheads and uppercase edge labels (never mermaid); KPI dashboard grid with big tabular-nums values; hairline data table with uppercase mono headers, zebra rows, and accent-tint hover; dark code block with accent filename tab and .hl/.cm highlight spans (code stays dark in both themes); centered quote with an oversized accent > glyph at 0.08 opacity as the quote mark (no curly serif quotes); closing slide with one accent <em> word in the display heading. (g) Color discipline: ONLY the spec palette - no red/blue/yellow semantic colors; express before/risk/off with --text-dim and after/win/on with --accent. Match the requested slide count ({{slideCount}}); split content into more slides instead of shrinking type; no scrolling inside slides; icons and diagram art are inline SVG or pure CSS, no remote images. Start from the example.html seed shipped in this plugin: keep its :root token blocks (both themes), deck/slide CSS, dot-grid treatment, and the entire SlideEngine script verbatim; replace only the slide content. Do not introduce any color or font outside this specification and do not redesign the theme.",
"zh-CN": "用「等宽终端 Terminal Mono」主题为 {{audience}} 创作一套关于 {{topic}} 的演示({{slideCount}}{{density}}):开发者原生暗调风格——近黑 #0a0e14 底色、全 Geist Mono 等宽排印(标题大号 weight-400 而非粗体、Dracula 绿 #50fa7b 唯一点缀、每页微点阵背景、低透明度绿色描边、直角方点零圆角。零拟物零特效:没有 $ 提示符、没有窗口红绿灯、没有扫描线暗角。零依赖单文件 HTMLscroll-snap 全屏 section.slide、SlideEngine 键盘/触摸导航 + 进度条 + 方点导航 + #/<n> hash 路由、.reveal 错峰入场;必须保留 prefers-color-scheme 亮色主题(#f4f6f8 / #0d7a3e家族签名架构图用纯 CSS/SVG 管线节点图,禁用 mermaid 和一切外部 JS。从插件内 example.html 种子出发:保留两套主题 token、全部版式 CSS 和 SlideEngine 脚本,只替换内容;禁止引入规格之外的颜色和字体。完整硬性规格以英文 prompt 为准。"
},
"exampleOutputs": [

View File

@@ -101,8 +101,9 @@ purples, or teals. Cards use 16px border-radius; chips use pill radius.
- `.deck` is a `100dvh` scroll container with `scroll-snap-type: y mandatory`;
each page is one `<section class="slide">` at `100dvh`,
`scroll-snap-align: start`. 811 slides; split content into more slides
instead of shrinking type. No internal scrolling except `.table-scroll`.
`scroll-snap-align: start`. Default 811 slides; honor the requested slide
count when the user picks one. Split content into more slides instead of
shrinking type. No internal scrolling except `.table-scroll`.
- An `IntersectionObserver` (threshold 0.5) adds `.visible`; slides enter via
fade + `translateY(40px) scale(0.98)`; `.reveal` children stagger with
`transition-delay` steps of 0.1s. Only easing:

View File

@@ -49,11 +49,11 @@
"preview": {
"type": "html",
"entry": "./example.html",
"motion": "deck"
"motion": "scroll"
},
"useCase": {
"query": {
"en": "Create a Warm Signal deck about {{topic}} for {{audience}} ({{slideCount}}, {{density}}): a cream-paper, terracotta-accented presentation in the locked Warm Signal theme from visual-explainer. Output one self-contained single-file HTML deck with zero dependencies - all CSS/JS inline, no build step, no external JS libraries, no CDN scripts; only the Google Fonts stylesheet link is permitted. THEME IS LOCKED - reproduce exactly: (a) Light tokens (default, light-first): --bg:#faf6f0; --surface:#ffffff; --surface2:#f5ece0; --surface-elevated:#fffdf5; --border:rgba(60,40,20,0.08); --border-bright:rgba(60,40,20,0.16); --text:#2c2a25; --text-dim:#7c756a; --accent:#c2410c; --accent-dim:rgba(194,65,12,0.08); --code-bg:#2c2520; --code-text:#f5ece0; --green:#16a34a; --red:#dc2626; fonts --font-body:'Plus Jakarta Sans' (200/400/500/600/700/800, display at 800 with tight tracking) and --font-mono:'Azeret Mono' (400/500/600, uppercase letterspaced labels). (b) Dark tokens (warm charcoal): --bg:#1c1916; --surface:#262220; --surface2:#302b28; --surface-elevated:#3a3430; --border:rgba(200,180,160,0.08); --border-bright:rgba(200,180,160,0.16); --text:#f0e8dc; --text-dim:#a09888; --accent:#e85d2a; --accent-dim:rgba(232,93,42,0.1); --code-bg:#141210; --code-text:#f0e8dc; --green:#4ade80; --red:#f87171. Dark applies BOTH via @media (prefers-color-scheme: dark) guarded with :root:not([data-theme=\"light\"]) AND via an explicit :root[data-theme=\"dark\"] block placed last; a fixed round .theme-toggle button top-right (inline SVG sun/moon) flips data-theme on <html> - this dual-theme switch is the family signature and is mandatory. No other hues beyond these tokens; no blues, purples, or teals. Cards use 16px radius, chips use pill radius. (c) Signature devices on slides: a warm radial glow anchored bottom-left (radial-gradient ellipse at ~12% 92% in --accent-dim, vary position slightly per slide but keep the warm-corner bias); section dividers carry a giant ultra-light coral numeral (font-weight 200, color --accent, opacity 0.14, centered behind the heading); cards and KPIs are terracotta-edged (1px --border-bright frame plus a 3px --accent top edge; table headers underline with a 2px accent rule; the split layout's highlighted panel gets a 3px accent left edge); Azeret Mono uppercase labels frame every layout; thin accent SVG corner ticks on the cover. (d) Deck engine: .deck is a 100dvh scroll container with scroll-snap-type:y mandatory; each page is one <section class=\"slide\"> at 100dvh with scroll-snap-align:start; an IntersectionObserver (threshold 0.5) adds .visible; slides enter via fade + translateY(40px) scale(0.98); .reveal children stagger with transition-delay steps of 0.1s; the only easing is cubic-bezier(0.16,1,0.3,1); prefers-reduced-motion respected. (e) Chrome built by the SlideEngine script: 3px terracotta progress bar top, dot rail right in a backdrop-blur pill, mono page counter bottom-right, fading arrow hints bottom-center, theme toggle top-right. Keyboard arrows/Space/PageUp/PageDown/Home/End, touch swipe (50px threshold), native wheel snap scrolling, and #/<n> hash routing (1-based, history.replaceState mirror, hashchange + deep-link restore). (f) Layout masters to compose from (all present in example.html): centered cover with accent display title and corner ticks, numbered agenda list with hairline rules, ultra-light numeral divider, 3:2 content grid with dot bullets and an inline-SVG aside, before/after split panels, a pure CSS/SVG pipeline diagram page (terracotta-topped stage cards joined by SVG arrows with a branch rail to pill chips - NEVER mermaid, never Chart.js), a KPI dashboard grid with 800-weight numerals and trend lines, a rounded zebra data table, an oversized-quote page with a faded accent quote mark, and a full-bleed closing on a warm charcoal gradient with a coral glow. Icons are inline SVG only; all visuals are CSS/SVG-generated - no remote images. 8-11 slides; split content into more slides instead of shrinking type; no internal scrolling except the table's horizontal scroll. Keep the responsive height breakpoints (700/600/500px) and 768px single-column fallbacks. Start from the example.html seed shipped in this plugin: keep its two :root token blocks, engine CSS, slide-type CSS, and the entire SlideEngine script (including buildThemeToggle and hash routing) verbatim; replace only the slide content. Do not introduce any color or font outside this specification and do not redesign the theme.",
"en": "Create a Warm Signal deck about {{topic}} for {{audience}} ({{slideCount}}, {{density}}): a cream-paper, terracotta-accented presentation in the locked Warm Signal theme from visual-explainer. Output one self-contained single-file HTML deck with zero dependencies - all CSS/JS inline, no build step, no external JS libraries, no CDN scripts; only the Google Fonts stylesheet link is permitted. THEME IS LOCKED - reproduce exactly: (a) Light tokens (default, light-first): --bg:#faf6f0; --surface:#ffffff; --surface2:#f5ece0; --surface-elevated:#fffdf5; --border:rgba(60,40,20,0.08); --border-bright:rgba(60,40,20,0.16); --text:#2c2a25; --text-dim:#7c756a; --accent:#c2410c; --accent-dim:rgba(194,65,12,0.08); --code-bg:#2c2520; --code-text:#f5ece0; --green:#16a34a; --red:#dc2626; fonts --font-body:'Plus Jakarta Sans' (200/400/500/600/700/800, display at 800 with tight tracking) and --font-mono:'Azeret Mono' (400/500/600, uppercase letterspaced labels). (b) Dark tokens (warm charcoal): --bg:#1c1916; --surface:#262220; --surface2:#302b28; --surface-elevated:#3a3430; --border:rgba(200,180,160,0.08); --border-bright:rgba(200,180,160,0.16); --text:#f0e8dc; --text-dim:#a09888; --accent:#e85d2a; --accent-dim:rgba(232,93,42,0.1); --code-bg:#141210; --code-text:#f0e8dc; --green:#4ade80; --red:#f87171. Dark applies BOTH via @media (prefers-color-scheme: dark) guarded with :root:not([data-theme=\"light\"]) AND via an explicit :root[data-theme=\"dark\"] block placed last; a fixed round .theme-toggle button top-right (inline SVG sun/moon) flips data-theme on <html> - this dual-theme switch is the family signature and is mandatory. No other hues beyond these tokens; no blues, purples, or teals. Cards use 16px radius, chips use pill radius. (c) Signature devices on slides: a warm radial glow anchored bottom-left (radial-gradient ellipse at ~12% 92% in --accent-dim, vary position slightly per slide but keep the warm-corner bias); section dividers carry a giant ultra-light coral numeral (font-weight 200, color --accent, opacity 0.14, centered behind the heading); cards and KPIs are terracotta-edged (1px --border-bright frame plus a 3px --accent top edge; table headers underline with a 2px accent rule; the split layout's highlighted panel gets a 3px accent left edge); Azeret Mono uppercase labels frame every layout; thin accent SVG corner ticks on the cover. (d) Deck engine: .deck is a 100dvh scroll container with scroll-snap-type:y mandatory; each page is one <section class=\"slide\"> at 100dvh with scroll-snap-align:start; an IntersectionObserver (threshold 0.5) adds .visible; slides enter via fade + translateY(40px) scale(0.98); .reveal children stagger with transition-delay steps of 0.1s; the only easing is cubic-bezier(0.16,1,0.3,1); prefers-reduced-motion respected. (e) Chrome built by the SlideEngine script: 3px terracotta progress bar top, dot rail right in a backdrop-blur pill, mono page counter bottom-right, fading arrow hints bottom-center, theme toggle top-right. Keyboard arrows/Space/PageUp/PageDown/Home/End, touch swipe (50px threshold), native wheel snap scrolling, and #/<n> hash routing (1-based, history.replaceState mirror, hashchange + deep-link restore). (f) Layout masters to compose from (all present in example.html): centered cover with accent display title and corner ticks, numbered agenda list with hairline rules, ultra-light numeral divider, 3:2 content grid with dot bullets and an inline-SVG aside, before/after split panels, a pure CSS/SVG pipeline diagram page (terracotta-topped stage cards joined by SVG arrows with a branch rail to pill chips - NEVER mermaid, never Chart.js), a KPI dashboard grid with 800-weight numerals and trend lines, a rounded zebra data table, an oversized-quote page with a faded accent quote mark, and a full-bleed closing on a warm charcoal gradient with a coral glow. Icons are inline SVG only; all visuals are CSS/SVG-generated - no remote images. Match the requested slide count ({{slideCount}}); split content into more slides instead of shrinking type; no internal scrolling except the table's horizontal scroll. Keep the responsive height breakpoints (700/600/500px) and 768px single-column fallbacks. Start from the example.html seed shipped in this plugin: keep its two :root token blocks, engine CSS, slide-type CSS, and the entire SlideEngine script (including buildThemeToggle and hash routing) verbatim; replace only the slide content. Do not introduce any color or font outside this specification and do not redesign the theme.",
"zh-CN": "用「暖陶信号 Warm Signal」主题为 {{audience}} 创作一套关于 {{topic}} 的演示({{slideCount}}{{density}}):奶油纸暖调风格——#faf6f0 奶油底 + #c2410c 赤陶/珊瑚强调Plus Jakarta Sans 圆体现代无衬线display 800 字重)+ Azeret Mono 大写标签字左下暖光晕、超细珊瑚章节巨数200 字重、0.14 透明度、赤陶描边卡片3px accent 顶边。必须保留家族签名的明暗双主题prefers-color-scheme 默认 + 右上圆形切换按钮强制 data-theme暗色为 #1c1916 暖炭黑 / #e85d2a 珊瑚。零依赖单文件 HTMLscroll-snap 100dvh 翻页、IntersectionObserver .visible + .reveal 错峰入场、键盘/触摸导航、#/<n> hash 路由、顶部进度条 + 右侧圆点 + 页码。图解页必须用纯 CSS/SVG 管线图,禁止 mermaid / Chart.js / 远程图片。从插件内 example.html 种子出发:保留两套 :root token、引擎 CSS 和整个 SlideEngine 脚本,只替换内容;禁止引入规格之外的颜色和字体。完整硬性规格以英文 prompt 为准。"
},
"exampleOutputs": [