Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add ChenShuo2004/cs-skills --skill cs-web-promo-filmgit clone --depth 1 https://github.com/ChenShuo2004/cs-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/chenshuo2004/cs-skills/cs-web-promo-film)<a href="https://agentmods.dev/skills/chenshuo2004/cs-skills/cs-web-promo-film"><img src="https://agentmods.dev/badge/skills/chenshuo2004/cs-skills/cs-web-promo-film/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/chenshuo2004/cs-skills/cs-web-promo-film"><img src="https://agentmods.dev/badge/skills/chenshuo2004/cs-skills/cs-web-promo-film.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00145 | $0.02598 |
| Opus 5 | $0.00072 | $0.01299 |
| Sonnet 5 | $0.00029 | $0.00520 |
| Haiku 4.5 | $0.00015 | $0.00260 |
Grade A, and why
cs-web-promo-film scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CS 网页宣传片
把真实页面做成有「产品演示」质感的短片。核心主张：不重绘产品界面，只决定镜头怎么看它。片中每一个像素都是页面上真实存在的东西，可信度全部来自这一点。
交付边界
- 默认交付一个 Remotion 工程 + 一支 mp4：1920×1080、60fps、30–60 秒、H.264。
- 默认无音轨（留给后期配 BGM）。用户要 BGM 或口播时才加，且口播稿单独出
VO.md。 - 页面内容一律来自 Playwright 采集的长截图，禁止用 HTML/CSS 重画产品界面、禁止手打页面上的文案当作截图内容。
- 只拍匿名访客能真实打开的公开页面。付费浮层、cookie 条、站方广告可以在采集时隐藏，产品功能区不得改动。
- 调色（整体曝光）允许，改内容不允许。
- 不部署、不上传、不发布。仅在用户明确要求后导出其他规格或分发。
- 网页幻灯片不是本 skill。电商对标复刻交给
$cs-auto-videl。ChatCut 策划与剪辑交给$cs-chatcut。
先读什么
按当前阶段读最少的资料：
- 采集页面、量元素坐标：references/capture.md
- 设计运镜、写分镜、搭工程：references/camera.md
- 渲染、抽帧验收、修接黑、去音轨：references/render-qa.md
- 写口播稿：references/voiceover.md
- 交付前自检：references/quality-checklist.md
把 scripts/ 拷到工程根；把 assets/promo-starter/src/ 拷到工程 src/；采集配置从 assets/capture.config.example.json 复制为工程根的 capture.config.json。不要从零手写窗口和动画工具。PromoFilm.tsx 是每个片子唯一需要真正手写的文件。
工作方式
1. 先问清三件事，其余自己定
只有这三件会改变片子的骨架，缺了必须问：
- 时长与用途（15/30/40/60 秒；投放在哪、给谁看）
- 叙事顺序（先讲什么后讲什么；哪个是主入口）
- 色调气质（暖深色 / 冷深色 / 明亮 / 跟随品牌页）
页面上能查到的（有几个板块、工具叫什么、链接指向哪）自己去页面上看，不要问用户。
2. 打开页面，摸清真实结构
动工前必须先采一轮截图并实际看图。常见的意外，早发现比返工便宜：
- 用户给的链接不是他以为的那一页（分享链接常指向子页）。
- 关键板块未登录不渲染（书架、收藏、个人数据），片子不能靠它承担叙事。
- 页面在内层容器里滚动，
fullPage: true只截到一屏。 - 浅色页面和深色页面混排，直接切会闪。
结构和用户的预期不一致时，带着截图说明现状，给出可行的替代取材，再继续。
3. 采集：一次采全，采准
运行 node scripts/capture.mjs，把目标写在工程根的 capture.config.json。要点见 capture.md，最关键的两条：
- 先滚到底触发懒加载，再把 viewport 撑到
scrollHeight高度截图，不要指望fullPage。 deviceScaleFactor: 2，逻辑宽度固定 1440，之后所有坐标都用这套逻辑单位。
采完把每张图的真实像素高度填进 tokens.ts 的 PAGES，运镜全靠它换算。
4. 量坐标，不要目测
运行 node scripts/measure.mjs 产出 boxes.json，拿到每个关键元素的页面坐标。所有推进落点、平移目标、点击位置都从实测坐标算。目测的运镜一定会把四列网格裁成三列半，或者把指针点在链接旁边的空白上。
5. 写分镜，再搭片子
What ships with it
19 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- agents/openai.yaml 402 B
- assets/capture.config.example.json 577 B
- assets/promo-starter/src/index.ts 109 B runs code
- assets/promo-starter/src/promo/anim.ts 1.8 KB runs code
- assets/promo-starter/src/promo/fonts.ts 750 B runs code
- assets/promo-starter/src/promo/PromoFilm.tsx 11 KB
- assets/promo-starter/src/promo/tokens.ts 1.5 KB runs code
- assets/promo-starter/src/promo/ui.tsx 2.7 KB
- assets/promo-starter/src/promo/Window.tsx 5.2 KB
- assets/promo-starter/src/Root.tsx 504 B
- references/camera.md 6.2 KB
- references/capture.md 4.8 KB
- references/quality-checklist.md 2.7 KB
- references/render-qa.md 4.2 KB
- references/voiceover.md 3.4 KB
- scripts/capture.mjs 4.1 KB runs code
- scripts/find-region.mjs 4.0 KB runs code
- scripts/luma-sweep.mjs 2.6 KB runs code
- scripts/measure.mjs 4.1 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 130 lines · 145 tokens per session scan A ac32231fcafd
cs-web-promo-film is a skill published in the GitHub repository ChenShuo2004/cs-skills (143 stars, last pushed 9d ago), licensed MIT. It adds 145 tokens to every session and 2,598 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
debug-optimize-lcp
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions…
opencli-sitemap-author
Use when creating or maintaining OpenCLI site sitemaps: agent-facing navigation, page-state, action, workflow, API-reference, pitfall, and fallback knowledge for a website. Use after browser exploration discovers durable site context, when a sitemap is stale, or when promoting local site knowledge into the repo.
interactive-login
How to complete browser/interactive logins (aws / gh / glab / gcloud). The platform backgrounds the login poller so it survives the human's browser round-trip — and when that does NOT work.
pinchtab-mcp
Use this skill when a task requires browser automation through PinchTab's MCP server connected to a remote browser instance. Covers navigation, element interaction, data extraction, form filling, multi-step flows, and session management via MCP tools.
azure-messaging-webpubsub-java
Build real-time web applications with Azure Web PubSub SDK for Java. Use when implementing WebSocket-based messaging, live updates, chat applications, or server-to-client push notifications.
google-safe-browsing
Prevent and fix Google Safe Browsing "Dangerous site" flags. Use when launching a public web app, buying/picking a domain, building a login or signup page, or when any site shows a red "Dangerous site" / "Deceptive site" warning in Chrome, Brave, Safari, Firefox, or Edge. Triggers on "dangerous site", "deceptive…