agentmods.dev

win11-ui-demos

win11-ui-demos is a skill for Claude Code, Codex from Unclecheng-li/AI_Animation. It costs 209 tokens per session (1,404 once invoked), scanned A, original, MIT.

A toolkit for creating realistic, animated web pages that imitate a Windows 11 computer screen. It can show desktops, menus, file windows, alerts, cursor movements, and teaching labels as a narrated demonstration.

In plain words
What is it for?
Use it to make Windows-style demonstrations of computer tasks, software instructions, system concepts, or security lessons. It is intended for HTML scenes assembled into short, cinematic recordings.
Why use it?
It avoids building each operating-system-style screen and interaction from scratch. The result can be recorded as a guided computer lesson or software tutorial.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

not rated 1.5krepo +65 11d ago A scan 209 tokens original MIT

Good fit Use it to make Windows-style demonstrations of computer tasks, software instructions, system concepts, or security lessons. It is intended for HTML scenes assembled into short, cinematic recordings.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/unclecheng-li/ai_animation/win11-ui-demos
View source ↗ Unclecheng-li/AI_Animation
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 win11-ui-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.

agentmods badge for win11-ui-demos

README.md
[![agentmods](https://agentmods.dev/badge/skills/unclecheng-li/ai_animation/win11-ui-demos/github.svg)](https://agentmods.dev/skills/unclecheng-li/ai_animation/win11-ui-demos)
Your own site
<a href="https://agentmods.dev/skills/unclecheng-li/ai_animation/win11-ui-demos"><img src="https://agentmods.dev/badge/skills/unclecheng-li/ai_animation/win11-ui-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.

agentmods 80×15 button for win11-ui-demos

Your own site · 80×15
<a href="https://agentmods.dev/skills/unclecheng-li/ai_animation/win11-ui-demos"><img src="https://agentmods.dev/badge/skills/unclecheng-li/ai_animation/win11-ui-demos.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 209 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,404 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.00209 $0.01404
Opus 5.5 $0.00084 $0.00562
Sonnet 5.5 $0.00042 $0.00281
Haiku 4.5 $0.00021 $0.00140

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

Security

Grade A, and why

win11-ui-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 14d 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.

skills/win11-ui-demos/SKILL.md · 48 lines

What it actually says

仿 Win11 系统仿真演示动画（1:1 还原 · 光标演出）

观众看到的是一台真 Win11 电脑在"自己操作"：Bloom 壁纸桌面、亚克力任务栏、资源管理器逐层打开、系统弹窗报错、蓝屏自动修复——一支会自己操作的鼠标引导观众看完全程，教学标记（问号徽章/警告牌/红圈）在还原界面上叠加解释。每镜头一个独立 HTML，电影化播放器底盘，全屏录屏即成片。

创作哲学

  1. 像素级还原是生命线：窗底 #f3f6fb、accent #0067c0、圆角 10px、双层阴影、亚克力任务栏 rgba(238,244,252,.82)+blur(18px)——观众潜意识信了这台电脑，演示才有说服力。宁可少做一屏，不可做歪一像素。
  2. 光标是主角：一支全程可见的鼠标（移动→悬停→单击→双击）就是叙事者，观众跟着它走。没有光标演出的系统演示=截图集。
  3. 教学标记层与还原层分离：界面归界面（1:1），讲解归讲解（问号徽章、警告牌、容量爆红、占比浮层——都是"老师的手"搭在真界面上）。
  4. 真实系统文案：错误码（0xc0000142）、"存储空间不足"、面包屑路径、状态栏项目数——细节真实感来自真文案。
  5. 因果链叙事：乱删 → 报错 → 蓝屏修复，系统界面的"剧情感"天然适合问题→恶化→解决弧线。
  6. 每镜头 15–45s，一次完整交互；口播对齐只写 cue 注释（无字幕条）。

Token 纪律（硬性）

  • 禁止通读 assets/template.html 与 assets/examples/ 下任何成片页（单个 20–50KB）。
  • 模板 cp 复制后 grep -n "改这里\|DUR=" 拿行号，只读标记区改写；成片页仅卡壳时 grep 定位后窗口读 ≤80 行。
  • 组件规格与手法优先查 references/ 两份浓缩文档。

工作流

第 0 步 · 分镜表：通读素材（口播稿/操作流程/知识点），拆成 镜头|时长|系统场景(桌面/资源管理器/对话框/蓝屏…)|交互动作(光标走位)|教学标记 分配表，给用户确认。需要壁纸与角色时：

cp -r "assets/examples/wukong-c-clean/material" <输出目录>/     # Bloom 壁纸（或用模板 CSS 渐变兜底）
cp "assets/examples/wukong-c-clean/Shark-GIF/<编号_情绪>.gif" <输出目录>/Shark-GIF/   # 按需 GIF

第 1 步 · 逐页实现：cp assets/template.html 输出目录/shot-xx_名称.html → grep 定位 → 只改【改这里】区（桌面图标/窗口内容/弹窗/cue）。底盘与 WIN11 仿真套件 CSS 不动。cue 注释引用口播节拍（// (0:07) 想自己清理一下）。

第 2 步 · 质检：node ../video-shot-demos/scripts/shot.js 页面.html <毫秒> _t.png 多时间点截图，查：还原度（像 Win11 吗）/ 光标轨迹合理 / 重叠遮挡 / 中间态穿帮 / 状态栏·地址栏与视图同步。

第 3 步 · index 总览：按章节分组的导航卡（编号/时长/系统场景标签），并保留"界面为演示还原"声明。

交付标准

  • 黑场「启动播放」起手；1920×1080 自适应；HUD 底部唤出；可暂停重播；DUR 准确
  • Win11 Light Fluent 关键色/圆角/阴影/亚克力精确（见 win11-kit.md）；系统字体栈零 webfont
  • 光标演出贯穿：移动有 fly 轨迹、点击有缩放反馈、双击进二级界面
  • 视图切换三同步（标签页/地址栏面包屑/状态栏项目数）；真实系统文案
  • 教学标记不越位（叠在界面上但保持"手"的轻盈）；角色 GIF 吐槽在情绪锚点
  • 角注含"界面为演示还原 · Windows 11 版式"；截图验证无遮挡穿帮
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.

  1. 14d ago First seen · 48 lines · 209 tokens per session scan A 6c847ffbb343

Subscribe to this mod's changes

win11-ui-demos is a skill published in the GitHub repository Unclecheng-li/AI_Animation (1,542 stars, last pushed 11d ago), licensed MIT. It adds 209 tokens to every session and 1,404 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-02.

Creative and mediaLearning and teachingaicssfront-endhtml5javascriptppt
Related

Other skills, from other repositories

fund-holding-viewer

A deployment guide for a Chinese fund-holdings analysis web app. It covers running the app on Alibaba Cloud ECS, a virtual server service, with HTTPS through either a subdomain or a path on an existing domain.

whjin/fundscope · 77 tokens

frontmcp-guides

Tutorials, end-to-end walkthroughs, and complete reference projects for FrontMCP. Use when you want a getting-started guide, a full worked example, or to learn best practices by following a step-by-step build rather than a single API reference. Includes a beginner weather-API server (tool plus static resource, Zod…

agentfront/frontmcp · 157 tokens

create-skill

Create instruction-only skills that package knowledge and workflow guides for AI clients.

agentfront/frontmcp · 17 tokens

mqc-legal-courseware-master

A legal-courseware tool that combines legal charts, explanations, source text, and case notes into editable presentation pages. It uses a fixed grid and can export pages for copying into a lawyer's presentation.

MiaoQichuan/new-litigation-visualization · 414 tokens

pdf-press

Teaches agents how to generate Markdown, HTML (with embedded SVG), and Mermaid content that renders beautifully to multi-page PDF via writepdf, with proper page breaks, compact professional layouts, brand and domain-adaptive color schemes, multi-column support for scientific papers, magazine-style editorial documents…

kdcube/kdcube · 74 tokens

netsuite-suitescript-learning

Interactive learning system for NetSuite SDF development. Features six modes (learn, review, explain, annotate, quiz, and final) with SAFE Guide integration. Produces compliance-reviewed learning documentation. Learn topics like governance, N/cache, and security directly from SAFE Guide principles. Generate quizzes…

oracle/netsuite-suitecloud-sdk · 71 tokens