cs-code-video

cs-code-video is a skill for Codex from ChenShuo2004/cs-skills. It costs 191 tokens per session (4,524 once invoked), scanned A, original, MIT.

A workflow for creating animated videos from code. It draws scenes in a web page, captures them frame by frame, and combines the frames into an MP4 with optional music, sound effects, or text-to-speech narration.

In plain words
What is it for?
Use it for coded explainers, motion graphics, tutorials, title sequences, pixel animations, or videos based on user-provided assets.
Why use it?
It makes the production steps repeatable and asks for approval before committing to the visual style, storyboard, and key frames.

Skill for Codex

Written for Codex: agents/openai.yaml present. Also seen: $skill-name invocation.

Good fit Use it for coded explainers, motion graphics, tutorials, title sequences, pixel animations, or videos based on user-provided assets.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/chenshuo2004/cs-skills/cs-code-video
Install

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.

Any agent
npx skills add ChenShuo2004/cs-skills --skill cs-code-video
Clone the repo
git clone --depth 1 https://github.com/ChenShuo2004/cs-skills

Made for: Codex.

Wrote 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.

agentmods badge for cs-code-video

README.md
[![agentmods](https://agentmods.dev/badge/skills/chenshuo2004/cs-skills/cs-code-video/github.svg)](https://agentmods.dev/skills/chenshuo2004/cs-skills/cs-code-video)
Your own site
<a href="https://agentmods.dev/skills/chenshuo2004/cs-skills/cs-code-video"><img src="https://agentmods.dev/badge/skills/chenshuo2004/cs-skills/cs-code-video/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.

agentmods 80×15 button for cs-code-video

Your own site · 80×15
<a href="https://agentmods.dev/skills/chenshuo2004/cs-skills/cs-code-video"><img src="https://agentmods.dev/badge/skills/chenshuo2004/cs-skills/cs-code-video.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 191 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,524 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00191 $0.04524
Opus 5.5 $0.00076 $0.01810
Sonnet 5.5 $0.00038 $0.00905
Haiku 4.5 $0.00019 $0.00452

Measured 18d ago against content hash 99cd5c31aba5, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

cs-code-video 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 18d ago.

The scan reads SKILL.md. This mod also ships 12 executable files (assets/crt.js, assets/kai-boy-3d.js, assets/kai-cat-3d.js, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

cs-code-video/SKILL.md · 170 lines

How it starts

The opening of the file, as written. The whole thing — 170 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CS 代码视频

模型不直接生成视频。它写一个网页,网页暴露 window.render(t) 画出第 t 秒,脚本逐帧截图,再用 FFmpeg 合成 mp4。配乐和音效用 numpy 合成,配音用 edge-tts。

一句话提示词做视频是抽卡,效果不可控,也复现不了。本 skill 的做法:先把规划摆到用户面前,确认了再动手。5 项输入 → 导演层 → 三张风格卡 → 分镜表(等确认) → 3 张关键帧(等确认) → brief.md → 逐镜头制作 → 自评 ≥8 分 → 交付。

用户明确要 Vibe 知识大赏或来源可核查的代码科普片时,按 references/vibe-knowledge.md 的六步模式执行。它在研究、真实素材、输入默认值、KAI 角色和 10 秒样片上的规则优先于下文通用模式;渲染和 QA 仍用本 skill 的工具。

管线固定,画面不固定。 渲染、配音、混音、QA 每次一样;画面语言每次从选题里长出来,再套上陈硕的签名层。不要先拿模板再塞内容。

交付边界

  • 默认值(只在用户明确说「你定」或无人值守时才用,并写进风格卡让用户改):单个 HTML 工程 + 一支 mp4,1920×1080、30fps、30 秒、代码合成配乐、不配音。
  • 通用模式的画面由代码生成,或由 GPT 按资产清单出图后代码做动画(见 hybrid.md);不从网上下载图片或视频素材。Vibe 知识模式可使用来源和许可可追溯的真实证据图,按对应参考文件记录。
  • GPT 出图要花钱:真正出图前先 gen_image.py --dry-run 把张数和模型给用户看,确认后再出。
  • 通用模式的事实来自用户给的原材料,不确定的不写;Vibe 知识模式必须主动联网核对,建立逐条来源表。
  • 参考视频只学结构、节奏和手法,不照搬别人的素材、外观和文案;学到的手法记进 signature.md 的吸收清单。
  • 不上传、不发布。
  • 路由:真实网页演示片 → $cs-web-promo-film;电商对标复刻、Seedance/Flow 生成包 → $cs-auto-videl;剪辑已有素材、ChatCut 策划 → $cs-chatcut。教程类视频默认做成 KAI 教程片(见 tutorial.md)。像素解说(cs-pixel-explainer)和暗夜知识片(cs-knowledge-film)是系列皮肤,只在用户确认是该系列续集时使用,见 director.md ⑥。

导演铁律(每支片都适用,写进 brief 的 <direction>)

  1. 整片一套风格、一套配色;同一个角色或元素在每个镜头里长得一样。
  2. 每个镜头只讲一件事;画面上的字少而大,每段文字至少停 2.5 秒。
  3. 动画用缓动或弹簧,不用匀速。
  4. 转场从画面内容里长出来(一条线变成下一个场景的地平线、一个点放大成下一场的月亮),不用默认淡入淡出。
  5. 镜头跟着内容动:推近、拉远、跟随,主体在画面里足够大(至少三分之一)。
  6. 禁止:居中大字 + 渐变背景的默认风格、所有元素同时淡入、满屏小字、任何看起来像模板的东西;每支片再按情况补充。

先读什么

按阶段读最少的资料:

Read the full file on GitHub · 170 lines

Changes

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.

  1. 18d ago Changed · -6 lines 99cd5c31aba5
  2. 20d ago Changed · +3 lines · -123 tokens per session 48d8f22b0d3d
  3. 22d ago First seen · 173 lines · 314 tokens per session scan A 18909b62eaed

Subscribe to this mod's changes

cs-code-video is a skill published in the GitHub repository ChenShuo2004/cs-skills (204 stars, last pushed 17d ago), licensed MIT. It adds 191 tokens to every session and 4,524 once invoked, about $0.0008 per session on Opus 5.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-10-03.

Related

Other skills, from other repositories

local-ai-agents

Build local-first AI agents that run entirely on a developer workstation with Microsoft Foundry Local and Qwen function-calling models. Covers Small Language Models (SLMs), the OpenAI-compatible local endpoint, sandboxed local tools, local RAG with Chroma, local MCP servers, hybrid cloud/local routing, and the…

microsoft/ai-agents-for-beginners · 200 tokens

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.

obra/superpowers · 21 tokens

next-cache-components-adoption

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…

vercel/next.js · 95 tokens

chronicle

Analyze Copilot session history for standup reports, usage tips, session search, and session reindexing. Use when the user asks for a standup, daily summary, usage tips, workflow recommendations, wants to search or find past sessions by keyword/file/PR, wants to reindex their session store, or asks about deleting…

microsoft/vscode · 72 tokens

chat-pet-sprite-creation

Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.

microsoft/vscode · 53 tokens

component-fixtures

Use when creating or updating component fixtures for screenshot testing or their shared infrastructure, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, validation, and common pitfalls.

microsoft/vscode · 53 tokens