Skip to content
Get packs

HTML Demo Windows

Builds live, animated HTML app windows that replay a product walkthrough instead of a screen recording

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
11 files

What it does

When installed, the agent can build a Mac-style browser window on a web page that plays an app's workflow step by step, drawn in HTML and CSS rather than recorded as video. Every frame is calculated from one clock, so the result stays sharp at any size, its text is real and selectable, and it can loop, jump to a step, or show a still frame for reduced-motion visitors. The skill guides the agent through gathering real UI references, scripting timed steps, drawing the app, and checking screenshots against the real product.

Great for

  • Product teams who want a hero or landing-page demo that looks like a screen recording but stays crisp and lightweight
  • Front-end developers building interactive product tours on marketing or download pages
  • Designers replacing GIFs or MP4s of an interface with live HTML

Skip it if

  • Anyone who needs a real recording of a real browser as an MP4; the skill itself says to use a different skill for that
  • Projects that must show a real live app rather than a simulated, scripted imitation, since the window is a fake built from scripted states and can misrepresent the product if the references are wrong

Try asking

  • “Make an animated HTML demo window of my app showing the sign-up flow in four steps”
  • “Build a hero window for our landing page that plays the editing workflow and holds a still frame for reduced motion”
  • “Replace the GIF of our dashboard on the download page with a live HTML walkthrough”
Step-by-step guide: how to use HTML Demo WindowsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 11 original files, the MIT licence and an attribution note.

    html-demo.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip html-demo.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip html-demo.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Use one example subject you own for every window and never show a client's or real person's data
  • Copy every label and menu item from the real app source rather than from memory, so viewers who know the app are not misled
  • Run the screenshot and preview scripts to compare frames against real references before publishing

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.md
  • references/brief.md
  • references/contract.md
  • references/film.md
  • scripts/preview-plugin.mjs
  • scripts/shoot.mjs
  • scripts/step-window.css
  • scripts/step-window.js
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.