html-demo
Show an app working on a web page by drawing it live in HTML instead of recording it. A Mac-style window plays the app step by step, and every frame is a pure function of one clock, View(t), drawn on a fixed 1200 × 750 stage that one CSS scale fits to any width. The pointer is scripted, labels and pictures come from the real app, a steps bar sits under the window, it plays only while on screen, and reduced motion gets designed end frames. Use when someone wants a product demo, an animated app window or hero, a feature walkthrough, "the UI animated and simulated in HTML", "like a screen recording but HTML", an interactive product tour on a landing or download page, or wants to replace screen recordings, GIFs or MP4s of their UI with crisp live HTML. Also use to build many such windows at once with helper agents, or to scrub, freeze and screenshot them.
Pinned to revision 1d0160d52c41, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/html-demo/SKILL.md
- skills/html-demo/agents/openai.yaml
- skills/html-demo/demo/PROMPT.md
- skills/html-demo/demo/avatar.webp
- skills/html-demo/demo/cathedral.webp
- skills/html-demo/demo/index.html
- skills/html-demo/demo/knight.webp
- skills/html-demo/demo/preview.jpg
- skills/html-demo/references/brief.md
- skills/html-demo/references/contract.md
- skills/html-demo/references/film.md
- skills/html-demo/scripts/StepWindow.jsx
- skills/html-demo/scripts/example-steps.jsx
- skills/html-demo/scripts/preview-plugin.mjs
- skills/html-demo/scripts/shoot.mjs
- skills/html-demo/scripts/step-window.css
- skills/html-demo/scripts/step-window.js
Every link opens the file at its source, pinned to the revision this page describes.