html-product-showcase SKILL.md skillA
html-product-showcase from shenrui-ma/video-regen-recipes is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add shenrui-ma/video-regen-recipes/html-product-showcase@v0.1.0Pins v0.1.0 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- shenrui-ma/video-regen-recipes
- Path
templates/product-demo/html-product-showcase/SKILL.md- Versions recorded
- 2
- Latest version
- v0.1.0, committed Sep 16, 2026
- First version recorded
- Sep 11, 2026
- Size
- 5,600 bytes
- Repository stars
- 9
- License
- MIT
根据产品特点、目标用户与真实功能证据设计 HTML/CSS/SVG 产品展示动画，选择合适的动效与分镜，交付可 seek 的网页、MP4 和可复用项目；支持横竖屏重新编排与配音字幕。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# HTML 产品展示动画 交付目标：围绕产品实际价值的一支展示动画，以及可编辑 HTML、时间线、资产清单和视频。先理解产品，再选择动画手法；示例只演示技术，不作为固定片头、布局或分镜。 ## 1. 理解产品与任务 从用户描述、提供的产品文档、可访问页面或代码中确认：面向谁、解决什么问题、最值得展示的 1–3 个特点、可以展示的证据。只查与当前产品有关的资料。缺少产品本身或核心信息时补问；其他可选参数用合理默认并记录。 默认中文、1920×1080、30fps、约 20–30 秒、无声，无固定角色贴纸。用户指定平台时按其比例与观看场景重排；3:4、9:16 和16:9分别设计。新建版本目录，保存需求、素材来源与哈希，保留已接受版本。 区分真实界面录制、演示状态和概念解释。演示数值不能冒充性能测试；未确认功能不编成卖点。实体产品没有可用照片/模型时，提供清晰标注的示意结构，不能把 CSS 假3D说成精确产品建模。 ## 2. 把特点变成分镜 读[产品叙事方法](references/product-design.md)，为每个候选镜头写： `观众的问题 → 产品主张 → 可见证据 → 状态怎样变化 → 最终应读懂什么`。 选择能证明当前卖点的手法，见[动画技巧库](references/motion-patterns.md)。可以直接展示成果、用前后对比、跟随一次任务或拆解结构；无需固定“痛点→功能→安装→远程”顺序，也不为凑页数加无关镜头。 用 [storyboard.json](examples/storyboard.json) 记录镜头与节拍。每镜留出稳定阅读时间，主体转移才移动视线。先按最终最大信息量布置标题、演示区和可选字幕安全区，再添加动效。空间不够就拆段或分时，不先缩小所有字。 ## 3. 编写确定性 HTML 动画 读[制作契约](references/production.md)，参考 [技术骨架](examples/film.html) 与 [纯时间函数](scripts/motion.js)。根据本次分镜重新编写 `film.html`，不只替换示例标题。 - CSS 负责排版，SVG 负责路径、矢量部件和标注，JavaScript 只按叙事时间设置状态。UI 文本用真实 DOM，复杂照片保比例作为资产。 - 暴露 `window.setShotTime(seconds)`；每次完整重算文本、变换、颜色、进度、可见性。先跳后再退必须恢复相同状态，不依赖调用顺序。 - 一份 HTML 可以容纳整支影片；场景起点来自编译时间线。局部时间为 `t-global_start`，重叠期明确绘制相邻场景并设置各自透明度。 …
Read the whole file at its exact version.
How to install
mdr add shenrui-ma/video-regen-recipes/html-product-showcase@sha256:611971575bf271f8The line at the top of this page pins the label v0.1.0, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_46ewcdmcyglinvos)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 2 versions of this file, between Sep 11, 2026 and Sep 16, 2026, about one every 5 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| v0.1.0 latest | 2026-09-16 | 1d6c844 | 5,600 B | A | view · diff |
| git:20260911.f1983ef | 2026-09-11 | f1983ef | 5,472 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (5600 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
shenrui-ma/video-regen-recipes · 9 stars · license MIT · pushed 2026-09-18 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_46ewcdmcyglinvos GET https://markdownregistry.com/api/v1/resolve?ref=shenrui-ma/video-regen-recipes/html-product-showcase GET https://markdownregistry.com/api/v1/blob/611971575bf271f88baca6a374674c11cf0f4faa5a8cff2ff1c4c07e2b205293
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.