scroll-web

name	scroll-web
description	Use when turning a brand URL, approved brand kit, product story, or value chain into a scroll-controlled video webpage.

Scroll Web / 滚动视频网页

Create a 5–7 scene brand journey whose scroll position scrubs alternating scene and connector videos. Use the included five-scene/four-connector template by default. Keep the Skill repository minimal and the generated project separate.

把品牌故事做成 5–7 幕滚动视频旅程，默认使用五幕/四连接模板；播放顺序必须在场景片段与连接片段之间交替。Skill 仓库保持最小化，生成项目放在仓库之外。

Required workflow / 必须遵循

1. Start from a first-party public URL or a user-supplied brand kit. Label every claim as observed fact or inference; never invent unavailable evidence. Ask the user to approve the brand kit.

2. Propose 5–7 ordered scenes from the brand value chain. Each scene needs a visual subject, eyebrow, title, body, and optional tags. Default to five scenes and get approval before generation.

3. Use Codex ImageGen for every 16:9 still with one byte-identical locked preamble from prompts.md. Treat stills as generation guides only—never use them as final playback clips.

4. Show the paid-job plan: N Dreamina image2video scene jobs plus N-1 adjacent frames2video connector jobs, with any re-roll allowance. The default five-scene build is five scene jobs plus four connectors. Run live CLI help and obtain explicit approval before submitting paid work.

5. Extract exact first and last frames from the rendered scene videos with FFmpeg. Build connector i only from scene i's rendered last frame and scene i+1's rendered first frame.

6. Encode all nine clips as short-GOP H.264, yuv420p, faststart, and no audio. Configure playback as scene 1 → connector 1 → … → scene 5. Follow pipeline.md.

7. Copy index-template.html and scrub-engine.js. Preserve relative MP4 paths for file://, Blob-backed loading over HTTP(S), first-frame posters, mobile video priming, seek throttling, accessible logo alt text, and optional brand.logo. Retain the cleanup function returned by mountScrollWorld and invoke it when a framework component unmounts.

8. Preview and inspect every seam in both scroll directions before publishing.

9. 仅使用第一方公开网页或用户提供的品牌资料；明确区分“观察事实”和“推断”，并先让用户确认。

10. 从价值链提出 5–7 个有序场景，默认五幕；生成前确认场景与文案。

11. 每张 16:9 场景图都使用 Codex ImageGen 与逐字锁定的风格前缀；场景图只是生成引导，不是最终播放素材。

12. 明确说明 N 个场景视频任务、N-1 个相邻连接任务及重试余量；默认五幕即 5 个场景任务与 4 个连接任务。付费提交前查看实时帮助并获得批准。

13. 只从成片提取精确边界帧，依次生成四个相邻连接片段。

14. 九段视频统一编码为短 GOP、无音频 H.264，并按“场景—连接—场景”交替播放。

15. 复制 index-template.html 与 scrub-engine.js 组装前端；保留 file:// 相对 MP4、HTTP(S) Blob 加载、视频首帧海报、移动端预热、seek 节流、可选 brand.logo 和无障碍替代文本。保存 mountScrollWorld 返回的清理函数，并在框架组件卸载时调用。

16. 发布前预览，并在正反两个滚动方向逐一检查所有接缝。

Privacy and repository boundary / 隐私与仓库边界

Never place secrets or private operational artifacts in the Skill: API keys, tokens, cookies, passwords, authorization headers, task JSON, submit IDs, account data, job logs, absolute user paths, usernames, Downloads paths, browser history, machine configuration, .env, caches, media, temporary files, brand assets, research captures, or generated/final outputs. Use neutral variables in examples.

Skill 中不得出现密钥、Token、Cookie、密码、认证头、任务 JSON、提交 ID、账号数据、任务日志、用户绝对路径、用户名、下载目录、浏览器历史、机器配置、.env、缓存、媒体、临时文件、品牌资产、调研抓取或生成/最终输出。示例只使用中性变量。

Track only the nine files enforced by scripts/preflight.sh. Keep README.md as the sole repository-facing overview; do not add AGENTS, .gitignore, package manifests, tests, extra docs, media, logs, generated brand assets, or private metadata. Run the preflight before sharing.

只跟踪 scripts/preflight.sh 允许的九个文件；README.md 是唯一面向仓库访客的说明文档，不要新增 AGENTS、.gitignore、包清单、测试、额外文档、媒体、日志、生成品牌素材或私有元数据。分享前执行预检。