Skip to content
Get packs

Guide · Agent skill

How to use the HTML Demo agent skill for live app windows

Updated · written with AI from the project's own documentation and checked against our catalogue data

The html-demo skill lets an AI agent build a Mac-style window on a web page that plays an app's workflow step by step. Everything is drawn in HTML and CSS from one clock rather than recorded as video, so it stays sharp at any size and its text is real. This guide explains what the skill does, how to install it, how to trigger it, what it needs, and the safety points to check before you use it.

HTML Demo WindowsMengTo/Skills · MIT

Quick start

  1. 1Download the skill. Download the html-demo ZIP from this page.
  2. 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
  3. 3Or upload it in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
  4. 4Install the tools you need. Install Node.js with npm, plus React or plain HTML and JavaScript depending on your stack. Vite, Playwright and ffmpeg are optional.
  5. 5Ask for a demo in plain words. Describe the app flow you want shown, its steps and where it will sit on the page.
  6. 6Check the frames. Compare the screenshots with the real product and fix wording, layout and sizes before polishing motion.

What the html-demo skill makes the agent do

The skill teaches an agent to 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 through a short series of steps, typically 3 to 5 steps of 4 to 8 seconds each, with a steps bar under the window.

Every frame is calculated from a single clock value, 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, the demo plays only while it is on screen, and reduced-motion visitors get designed end frames.

  • Looks like a screen recording but is live HTML, so text is selectable and stays crisp
  • Can loop, jump to a step, scrub, freeze, or be screenshotted from the same code
  • Skill is meant for hero sections, feature walkthroughs and interactive product tours

Install the html-demo skill

Download the ZIP of the html-demo skill from this page. Unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill available only in that project.

If you use the Claude apps instead of a folder, upload the skill under Settings → Capabilities → Skills.

  • Personal install: unzip into ~/.claude/skills/
  • Project install: unzip into the project's .claude/skills/ folder
  • Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with natural requests

You do not need to name the skill to use it. Describe the result you want in plain words and the agent should pick it up when the request matches the skill's use cases. You can also invoke it directly by name with $html-demo, as the skill's own prompt file does.

Good triggers mention a product demo, an animated app window, a feature walkthrough, an interactive tour on a landing or download page, or a wish to replace screen recordings, GIFs or MP4s of a UI with live HTML.

  • Make a product demo of our app's main flow as an animated window for the hero
  • Replace the GIF of our dashboard on the landing page with a live HTML window
  • Build an interactive product tour on our download page, 3 to 5 steps
  • Build several of these windows at once with helper agents
Use $html-demo to show our app's main flow on the landing page as a live HTML window, not a video: 3–5 steps, each drawn from t at 1200 × 750, with the real UI's words and pictures and a pointer that clicks like a person.

Work through the skill's build process

The skill asks the agent to pick one believable example you own and use it in every window. Before drawing anything, the agent gathers real screenshots or frames of the UI and copies labels, menu items and messages from the app's source rather than from memory. Frames from a video can be pulled with ffmpeg.

Next the agent writes each step as named times, draws the app from those states, and checks screenshots against the real product in at least three rounds. Phone widths of 390 px and 340 px, reduced-motion frames and a returning hidden tab are checked at the end.

  • Pick one example subject you own and use it across all windows
  • Gather references of the real UI and copy its exact wording
  • Script each step as named times with 0.3 to 1 s to see the start and at least 1 s on the result
  • Compare frames side by side with references and fix structure before motion
ffmpeg -ss 2 -i in.mp4 -frames:v 1 out.png

What you need before you start

The skill runs scripts, so you need Node.js with npm to run the preview and screenshot scripts. The main version of the window is written for React and uses the StepWindow.jsx file. If you do not use React, the skill includes a plain HTML and JavaScript version, step-window.js, with matching CSS.

Some tools are optional: Vite for the preview plugin, Playwright for the screenshot script, and ffmpeg if you want to pull reference frames from video.

  • Required: Node.js with npm
  • Required for the React version: React
  • Required for the plain version: HTML and JavaScript only
  • Optional: Vite (preview plugin), Playwright (screenshot script), ffmpeg (reference frames from video)

Safety notes on scripts and network access

The skill runs scripts, including the preview plugin and screenshot script, so review them before running them in a project you care about. According to the skill's listing, it does not use the network.

The window is a simulated imitation built from scripted states, not a live app. If your references are wrong, the demo can misrepresent your product, so verify every label and picture against the real app.

  • Review scripts/preview-plugin.mjs and scripts/shoot.mjs before running them
  • Listing states the skill runs scripts but uses no network
  • Do not show a client's, partner's or real person's canvas or data

Tips for better results

Give the agent a concrete subject and the real app's words. Results improve most when the agent can see actual screenshots of the product, because it can then match sizes, labels and layout instead of guessing.

For a whole page of demos, have a lead agent build the engine and one window first, then give the same brief to helpers for the other windows. Use the skill's references for the full API and the hero variant with camera and beats.

  • Supply real screenshots or recordings of the app before asking for a window
  • Keep each window to 18 to 30 seconds in total
  • Use the skill's contract reference for the full step API when you customise a window

What people use it for

  • A product demo of the main workflow in the hero of a landing page
  • A feature walkthrough that replaces a GIF of a dashboard
  • An interactive product tour on a download page
  • Several feature windows built at once by helper agents from a shared brief

Frequently asked questions

Is the html-demo skill free to use?

The skill is published under the MIT licence, as its listing states. The skill's listing does not mention any price, so check the licence text included with the download.

What do I need to install html-demo?

You need Node.js with npm to run the scripts, and React for the main version or plain HTML and JavaScript for the vanilla version. Vite, Playwright and ffmpeg are optional extras.

Where do I put the html-demo skill folder?

Unzip it into ~/.claude/skills/ for all your projects, or into a project's .claude/skills/ folder for one project. In the Claude apps, upload it under Settings → Capabilities → Skills.

Does html-demo record my screen or create an MP4?

No. It draws the app live in HTML and CSS, with no video, canvas, WebGL or screen recording. If you need a real recording of a real browser as an MP4, the skill's own guidance says to use the browser-video-recording skill instead.

Does the skill send my data over the network?

The listing says the skill uses no network, but it does run scripts. Read the scripts before running them.

How is this different from a GIF or screen recording?

A recording is fixed pixels. An html-demo window is computed from one clock, so it scales sharply to any size, keeps selectable text, can jump to a step and shows designed still frames for reduced motion.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Choose html-demo if you want a crisp, lightweight demo of your real app that looks like a screen recording on a web page, and you can supply accurate references. Pick a real screen recording or a different tool if you need footage of a live app, or if you cannot risk a simulated window misrepresenting your product.

Download the skill