What is swiss-shot-demos?

A skill for making video storyboard animations as standalone HTML scenes in a Swiss graphic-design style. Each scene uses a content-matched chart or diagram, such as a timeline, flow, comparison, or matrix.

It is for turning scripts, tutorials, product presentations, security explanations, and other narratives into chart-led animated scenes.

It gives narrated or instructional material a visual structure instead of presenting a wall of text. The scenes can be shown full screen and recorded as video.

swiss-shot-demos — Skill for Claude Code and Codex by Unclecheng-li

About the project

AI Animation Skills is a collection of agent instructions and templates for generating single-file HTML animations, including presentations, diagrams, protocol visualizations, phone interfaces, and video-style scenes. People use the skills with AI coding agents to create animated web pages from descriptions or templates. The catalogue entries are the collection's individual generation workflows.

Unclecheng-li/AI_Animation · 1,542 stars · on GitHub

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 Unclecheng-li/AI_Animation --skill swiss-shot-demos

Clone the repo

git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation

Made for: Claude Code, 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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/unclecheng-li/ai_animation/swiss-shot-demos/github.svg)](https://agentmods.dev/skills/unclecheng-li/ai_animation/swiss-shot-demos)

Your own site

<a href="https://agentmods.dev/skills/unclecheng-li/ai_animation/swiss-shot-demos"><img src="https://agentmods.dev/badge/skills/unclecheng-li/ai_animation/swiss-shot-demos/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.

Your own site · 80×15

<a href="https://agentmods.dev/skills/unclecheng-li/ai_animation/swiss-shot-demos"><img src="https://agentmods.dev/badge/skills/unclecheng-li/ai_animation/swiss-shot-demos.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 256 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,999 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.

Model	Per session	Once invoked
Fable 5.1	$0.00256	$0.01999
Opus 5.5	$0.00102	$0.00800
Sonnet 5.5	$0.00051	$0.00400
Haiku 4.5	$0.00026	$0.00200

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

Security

Grade A, and why

swiss-shot-demos 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 10d ago.

The scan reads SKILL.md. This mod also ships 27 executable files (assets/chart-skills/archify/bin/archify.mjs, assets/chart-skills/archify/bin/open-artifact.mjs, assets/chart-skills/archify/bin/preview.mjs, …), 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.

skills/swiss-shot-demos/SKILL.md · 56 lines

How it starts

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

瑞士风格图表驱动演示动画（Swiss Style · 一镜一 HTML）

把视频分镜做成编辑部级排版 + 可视化图表的演示动画：纸灰底、炭黑墨、发丝线、灰阶明度阶梯、每页唯一强调橙；每个镜头的主体是一张与内容匹配的"图表"（时间线、循环环、流程链、双列对照、点阵计数、热力矩阵、泳道、嵌套剖视……），而不是文字堆砌。一镜一 HTML，电影化底盘（黑场起手/虚拟时钟/镜头推拉/WebAudio 音效），全屏录屏即成片。

反模式就是本 Skill 的诞生理由：AI 默认生成的演示页永远是"乌漆墨黑+油光锃亮"（黑底+霓虹发光+渐变光斑）——本系统全面禁用，改用瑞士国际主义的平面克制：白纸、墨字、一根发丝线、一点橙。

创作哲学

图表优先：拿到任何一段口播，先问"这是什么图"——流程→链/泳道，循环→环，对比→双列/slopegraph，数量→点阵/计数，时间→时间线，结构→嵌套/分层，分布→热力矩阵。文字只做标题/标签/结论条，主体图形区 ≥55% 面积。
明度即数据：灰阶阶梯 L1-L7 承载全部层级（重要=最黑），彩色只留一个橙 #F5572F 标"本页唯一主角"（最大数字/结论/焦点节点/警示）。
排版即力量：Inter 大字排版（主标题 64-120px、断言数字 120-260px·800-900、eyebrow 15px uppercase tracking .14em）+ 88px 页边距 + 12 列网格 + 非对称布局（左重右轻）。
克制是美德：禁 glow/霓虹 text-shadow、径向光斑、光泽渐变、vignette、扫描线、颗粒、大模糊阴影。允许：平面色块、1-2px 发丝线、虚线、反白（墨底纸字）、细网格。
动画快进快停：quarticOut/cubicOut 缓动；入场三式 pop/fade/draw；禁弹跳闪烁发光。节拍动画一律 cue+tws（可暂停可冻结），纯装饰才用 CSS animation。
每镜头 15-45s；口播不上屏（cue 注释对齐时间戳）；数字不许编（白名单纪律）。

Token 纪律（硬性）

禁止通读 assets/template.html 与 assets/examples/ 下任何成片页。模板 cp 复制后 grep -n "改这里\|DUR=" 拿行号，只读标记区；成片页卡壳时 grep 定位后窗口读 ≤80 行。
知识优先取 references/ 四份浓缩文档（swiss-system 设计正本 / chart-skill-bridge 三技能融合选型 / chart-vocabulary 内建图表词汇 / production-spec 生产纪律）。

工作流

第 0 步 · 分镜表：通读素材（口播稿带时间戳/大纲/分镜脚本），拆成 镜头|时长|图表主视觉(选型)|页面分类(A 信息动效 / B 拟真仿真) 分配表给用户确认。页面分类决定策略：A 类全瑞士+图表最大化；B 类（真机/软件界面仿真）保留仿真本体、只把舞台底/页头/标注/角注/结论条瑞士化。素材复制（勿读内容）：

cp -r "assets/examples/vulnclaw-tutorial/Shark-GIF" <输出目录>/    # 大肥鱼 GIF（角色位）

第 1 步 · 逐页实现：cp assets/template.html <输出目录>/shot-x-x_名称.html → grep 定位 → 只改【改这里】区：eyebrow+大标题+主图表（从 chart-vocabulary 选型）+ cue 表。底盘/瑞士 tokens/组件库不动。

图表技能桥接（主视觉选型时优先查 references/chart-skill-bridge.md）：内置 diagram-design（14 型概念示意图，MIT）与 archify（5 型工程图，MIT）于 assets/chart-skills/，lieflat-charts（63 型数据图表法典，NC 许可需自行安装）——按"有数字→lieflat / 讲关系→diagram-design / 讲系统→archify / 轻量示意→内建"匹配选择，外部图并入时按桥接文档做 Swiss 换肤（tokens 覆盖/去交互/cue 驱动）。读型文档按需单读，勿通读 gallery。

第 2 步 · 质检：底盘自带 QA 钩子——URL 加 #auto,t=毫秒 起播后冻结在该时刻，直接无头截图（无需改文件）：

Read the full file on GitHub · 56 lines

Files

What ships with it

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

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.

10d ago First seen · 56 lines · 256 tokens per session scan A 32f77f62c2f1

Subscribe to this mod's changes

swiss-shot-demos is a skill published in the GitHub repository Unclecheng-li/AI_Animation (1,542 stars, last pushed 11d ago), licensed MIT. It adds 256 tokens to every session and 1,999 once invoked, about $0.0010 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-06.

Creative and media Design and UX ai css front-end html5 javascript ppt

preline-mcp

Add, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions "preline", says "/preline", asks to add a UI component, or requests a Preline block (a ready-made page section) using Preline UI.

htmlstreamofficial/preline · 66 tokens

preline-theme-generator

Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, match a brand color, translate a mood into a theme, generate light and dark theme CSS, preview theme output without writing files, or review and fix generated…

htmlstreamofficial/preline · 89 tokens

swiss-shot-demos