Build a Scrubbable HTML Demo

Create a sharp, scrubbable HTML demo that showcases your app.

Introduction

30 Second Summary

Screen recordings start going stale as soon as your app's interface changes. Resizing can make them look soft at the exact moment you want the details to shine.

In this project, you will replace a screen recording with a self-contained HTML demo of your own app using the html-demo skill. The finished demo loops through named steps while viewers control the timeline.

What You'll Build

You will watch your app's story play inside a crisp browser window with every named moment available on demand.

By the end of this project, you'll have:

A looping product walkthrough that plays 3 to 5 named moments inside a 1200 by 750 app window.
A scrubbable timeline that lets viewers drag to any point or jump directly to a named step.
A landing-page-ready demo that holds a clean still frame for reduced motion while keeping real text crisp when resized.
Secret Mission: An optional challenge to push your skills further.

Are there any prerequisites?

You need a coding agent already installed plus an app or mockup to demo. You also need a browser to preview the finished result.

The html-demo skill is a free download. Your only existing cost is the coding agent plan you already use.

Before We Start

A convincing HTML demo begins with a real interface that the coding agent can study. Your existing app repository provides the source files that keep every screen faithful to your product.

This step puts your source app within reach of your coding agent. It also confirms that your browser is ready to preview the demo later.

In this step, get ready to:

Choose the existing app repository you want to demonstrate.
Connect a coding agent that supports local skills.
Confirm that a modern web browser is ready for previews.

Choose the app you will demonstrate

The coding agent needs access to the interface it will recreate. Choose an app or mockup that you own so its screens can become the reference for your demo.

Locate your existing app repository in Finder on macOS or File Explorer on Windows.
Confirm that the repository contains the current interface files for your app.

You should now have an existing repository containing the app that will be demonstrated.

Connect your coding agent

Agent Skills are reusable instruction folders that extend what a coding agent can do. Your agent needs a local skills folder because the next step installs the demo skill there.

Start your coding agent with your app repository as its current project.
Confirm that its file list includes the interface files you identified.
Select the tab for your coding agent to identify its local skills folder.

Claude Code

Claude Code loads user-level skills from ~/.claude/skills.

Use ~/.claude/skills as the local skills folder in the next step.

Codex

Codex loads user-level skills from ~/.codex/skills.

Use ~/.codex/skills as the local skills folder in the next step.

Cursor

Cursor loads user-level skills from ~/.cursor/skills/.

Use ~/.cursor/skills/ as the local skills folder in the next step.

Good progress. Your coding agent now has the app context it needs for the build.

Confirm your browser is ready

The finished demo opens as a local HTML file. A modern browser gives you the preview surface for testing its playback later.

Before you launch it, do you expect your browser to open immediately or ask for more setup?

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type the name of your installed browser into the search field.
Press Enter to launch the browser.

You should see a browser window with an address bar. This confirms that your computer is ready to preview local HTML files.

Browser Missing or Not Opening?

Install a modern browser from its official website.
Repeat the launch check after the installation finishes.

help me install or launch a modern browser on my computer.

Your app repository is ready. Your coding agent knows where local skills belong. Next up, you will install the html-demo skill.

Install the HTML Demo Skill

A coding agent can only follow the demo workflow when the HTML Demo skill is available in its local skills folder. Without that skill, the agent lacks the instructions for creating a scrubbable HTML demo.

In this step, you will install the free skill from its official source. You will then confirm that your coding agent has discovered it.

In this step, get ready to:

Install the HTML Demo skill in your coding agent's local skills folder.
Confirm that HTML Demo appears in the agent's skill list.

Install the HTML Demo skill

The official installation page provides a request that your coding agent can carry out for you. The request downloads the skill package from Fil's website.

The request writes extracted files to a personal skills folder. Your agent may ask for permission to access the network or write outside the app repository.

Install the skill by sending this official request:

Install the HTML Demo skill from https://fil.design/skills/html-demo: unzip https://fil.design/skills/html-demo.zip into your skills folder (~/.claude/skills for Claude Code, ~/.codex/skills for Codex), then read its SKILL.md.

What Does This Request Do?

The ZIP package places the complete skill inside your personal skills folder.
The SKILL.md file teaches your agent when to use the workflow.
The request uses ~/.claude/skills for Claude Code.
The request uses ~/.codex/skills for Codex.

Cursor also discovers skills from these compatibility folders.

Approve network access if your coding agent asks for it.
Approve access to the existing local skills folder if your coding agent asks for it.

You should see the agent confirm that it downloaded the package and read SKILL.md.

That is the download handled. The skill files now sit where your agent can discover them.

Installation Did Not Finish?

Confirm that your coding agent can access the official Fil website.
Point the agent to the existing local skills folder if it cannot find the destination.
Confirm that the extracted html-demo folder contains SKILL.md.

help me find why HTML Demo did not install in my coding agent's skills folder.

Confirm the skill is available

Coding agents expose discovered skills in different places. Seeing HTML Demo in that list proves the installation is active.

Before you check, predict whether HTML Demo already appears in your agent's skill list.

Claude Code

Type / in the Claude Code chat input.
Locate HTML Demo among the available commands and skills.

You should see HTML Demo in the list. That entry confirms Claude Code discovered the installed skill.

Codex

Enter /skills in the Codex chat.
Locate HTML Demo in the skill picker.

You should see HTML Demo in the picker. That entry confirms Codex discovered the installed skill.

Cursor

Select Customize in the Cursor sidebar.
Select Skills.
Locate HTML Demo in the Agent Decides section.

You should see HTML Demo in the section. That entry confirms Cursor discovered the installed skill.

HTML Demo Missing From the List?

Restart your coding agent so it rescans the existing skills folder.
Confirm that the folder name is html-demo.
Confirm that SKILL.md sits directly inside the html-demo folder.

help me find why HTML Demo is missing from my skill list.

You have the key setup finished. Your coding agent can now reach the HTML Demo workflow whenever your project calls for it.

Your agent now has the workflow it needs. Next, you will choose the moments from your app that deserve a place in the demo.

Plan Your Demo Steps

The html-demo skill is ready in your coding agent. A demo that covers every click can bury your app's strongest moments.

In this step, you'll choose 3 to 5 app moments that sell the experience. Your coding agent will turn those choices into a timed plan for the HTML demo.

In this step, get ready to:

Choose 3 to 5 app moments that demonstrate the app's value.
Draft names and timings for each moment.
Verify the visible text and intended pointer movement.

Choose your strongest app moments

A named moment is one short beat in your app's story. Each moment should finish with a visible result that helps the viewer understand the app's value.

Switch back to the coding agent from earlier.
Ask it to inspect the app repository for moments that demonstrate your app's value.

You'll see a candidate list based on the real screens and interactions in your app.

Choose 3 to 5 candidates that show the clearest progression.
Tell the coding agent which candidates make the final cut.

The coding agent now has a focused sequence to shape into a demo plan.

Draft the timed step list

Timing gives every moment enough room to land without dragging. Real interface text keeps the demo faithful to the app that viewers would use.

What belongs in each plan entry?

Name: A short label that describes the app moment.
Duration: A window of 4 to 8 seconds.
Visible text: The exact heading or label shown in the app.
Pointer movement: The pointer's intended path to the control it selects.

Ask the coding agent to use the installed html-demo skill to turn your chosen moments into one plan with the four fields above.

You'll see 3 to 5 named entries. Each entry should include a duration plus the text and pointer movement that viewers will see.

Audit every planned moment

Agent drafts can replace real interface text with generic wording. They can also make pointer movement too vague to animate consistently.

Compare each visible text entry with the matching text in your app repository.
Ask the coding agent to correct every text mismatch.

The revised plan should now use only text that viewers can find in your app.

Trace each pointer movement from its starting position to its intended target.
Ask the coding agent to clarify every movement that lacks a clear target.

Every entry should now identify what the pointer does during that moment.

Before the final check, consider whether every entry will meet all four planning requirements.

Confirm that the plan contains 3 to 5 named moments.
Confirm that every duration falls between 4 and 8 seconds.
Confirm that every entry includes real visible text from the app.
Confirm that every entry includes intended pointer movement.

You should see a complete 3-to-5-step plan with a name, a 4-to-8-second duration, visible app text, and intended pointer movement for every moment.

That planning work pays off: your demo now has a clear sequence for the agent to build. Next up, you'll turn the first planned moment into an animated browser preview.

Build the First Demo Step

Your demo plan now captures the moments that make your app worth showing. The next goal is to turn its first moment into a working HTML demo.

Your coding agent will use the installed html-demo skill to build that first slice. One time value will keep every visual change synchronized.

In this step, get ready to:

Give the coding agent the requirements for the first named moment.
Create demo.html as a self-contained animated scene.
Preview the first-step animation in your browser.

Give the agent the first-step brief

The first scene becomes the visual baseline for the rest of your demo. A focused brief keeps later moments out of this build.

What must the first build include?

One self-contained file named demo.html inside your app repository.
Only the first named moment from your demo step plan.
The duration already recorded for that moment.
A 1200 by 750 app window.
The real app text listed in your plan.
The planned pointer movement.
Every visible state derived from one elapsed time value.

Switch back to the coding agent session for your app repository.
Paste the demo step plan from earlier into the agent chat.
Ask the agent to use the installed html-demo skill for this task.
Ask the agent to create demo.html from the requirements above.

A repository edit can feel risky. This task only needs a new demo.html file inside your existing app repository.

Review the agent's proposed file changes.
Approve the creation of demo.html.
Let the agent finish writing the first scene.
Confirm demo.html appears in the agent's file list for your repository.

Solid progress. demo.html now holds the first app moment as a browser-ready animation.

File missing from the repository?

Check the agent's changed-files list for demo.html.
Ask the agent to save demo.html inside the existing app repository if it created the file elsewhere.
Ask the agent to confirm that it used the installed html-demo skill.

help me get demo.html created in the correct repository.

Watch the first animation play

A browser preview turns the generated file into a result you can inspect. This check proves that the first scene can render without your app running.

Before you open the file, which planned screen should appear first? Picture where the pointer should finish.

Ask the coding agent to open demo.html in your installed browser.
Approve the browser launch if your agent requests permission.
Start the animation with its visible playback control if playback does not begin automatically.
Watch the first step from beginning to end.

You should see your first named step inside a 1200 by 750 app window. The scene should use the real text from your plan.

As the step plays, the pointer should follow its planned route. The visual changes should stay aligned with the same timeline.

Demo blank or motion missing?

Switch back to the coding agent.
Ask the agent to inspect demo.html for browser errors.
Ask the agent to compare the pointer path with the first moment in your plan.
Reload demo.html in your browser after the correction.

help me diagnose a blank or motionless demo.

Check the scene against your plan

A generated scene can look polished while missing the moment you intended to show. Your demo plan provides the acceptance check for this first build.

Return to the demo step plan from earlier.
Find the first named moment in the plan.
Read its planned duration.
Review its visible text.
Review its intended pointer movement.

Before the final replay, do you expect every detail to match the plan? Hold that prediction while you test the scene.

Replay the first step in your browser.

Confirm the displayed step name matches the first planned moment.
Confirm the playback duration matches the planned duration.
Confirm every planned text string is readable.
Confirm the pointer follows the planned route.

When all four checks match, your first demo step is complete. You now have a working visual slice that plays directly in the browser.

First step does not match the plan?

Switch back to the coding agent.
Tell the agent which check differed from your plan.
Ask the agent to update only the first planned step in demo.html.
Reload demo.html in your browser.
Replay the animation to confirm the correction.

help me align the first demo step with my plan.

Your first app moment now plays as a self-contained browser demo. Next, you will add the remaining moments and check the full timeline.

Add and Scrub Every Step

Your first app moment already plays inside the demo. The html-demo skill from earlier has turned that interface into a time-driven scene.

A single moment cannot tell the full product story. This step extends the same clock across every planned moment. Viewers can then scrub the full story. They can also jump straight to a named moment.

In this step, get ready to:

Add every remaining planned moment to demo.html from one shared time value.
Scrub the complete timeline to inspect every intended frame.
Jump between named steps to confirm each one lands correctly.

Add every planned step

Every scene must read from the same timeline. That shared clock keeps every playback control in sync.

Switch back to the coding agent session from the previous step.
Ask the agent to read the demo step plan from earlier.
Ask it to inspect the current demo.html before making changes.
Tell it to preserve the first planned step.
Tell it to use the installed html-demo skill for this update.

What Does the Finished File Need?

The finished demo.html remains self-contained. Its app window remains 1200 by 750.

Playback loops through all 3 to 5 planned steps. The timeline supports scrubbing across the complete demo.

Step navigation uses every planned name. Selecting a name jumps directly to that moment.

Tell the agent to retain each 4 to 8 second duration from the plan.
Tell it to derive every rendered frame from the shared time value.
Tell it to keep the real app text in each planned step.
Tell it to reproduce the planned pointer movement in each step.
Ask it to add looping playback across the complete sequence.
Ask it to add a timeline that supports direct scrubbing.
Ask it to add navigation for every named step.
Ask it to apply the changes to demo.html.

Edit permission can feel broader than the change you want. This update only needs access to demo.html.

Review any edit permission request before approving it.
Limit your approval to demo.html.

Return to the browser tab from earlier after the agent finishes.
Refresh the page.

You should see every planned step name in the navigation. The timeline should now span the complete demo.

That is the full story assembled. Your original scene now shares one timeline with every planned moment.

Missing a Planned Step?

Refresh the browser again to rule out a stale local file.
Ask the agent to compare demo.html with the complete step plan if a name is missing.
Ask it to preserve every planned name exactly.

help me find why a planned step is missing from my demo navigation.

Scrub the complete timeline

Normal playback can hide awkward frames because they pass quickly. Scrubbing lets you inspect the exact state rendered at any time.

Pause playback using the demo's playback control.
Drag the timeline playhead slowly across the first named step.

You should see the interface update continuously as the playhead moves. The pointer should follow the action planned for that moment.

Continue dragging the playhead through every remaining step.
Stop the playhead at the midpoint of each step.
Compare the displayed app state with the intended moment in your plan.

At every midpoint, the app window should show the intended real text. The pointer should support the action shown in that step.

Does a Scrubbed Frame Look Wrong?

Tell the coding agent which named step shows the mismatch.
Describe the timeline position where the mismatch appears.
Ask the agent to adjust only that planned step.
Return to the browser after the edit.
Refresh the page.
Scrub through the corrected step again.

help me correct a frame that does not match my demo step plan.

Jump to every named moment

Scrubbing tests continuity across the timeline. Named navigation tests whether viewers can reach a specific selling moment immediately.

Before your final pass, which planned moment do you expect to see when you choose its name?

Select the first named step from the demo's step navigation.

You should see the first planned app moment at its intended landing frame.

Select every remaining named step one at a time.

Each selection should jump directly to the matching planned moment. The visible frame should match the selected name.

Return to the first named step through the same navigation.
Start playback using the demo's playback control.
Watch one complete loop.

You should see all 3 to 5 named steps before the demo returns to the first one. Real text should remain visible throughout the sequence.

Scrub to the intended landing frame within each named step.

Each step should land on the app state defined in your plan. The pointer should finish in the intended position.

That is the hard part complete: your full product story now plays as one controllable demo.

Your complete demo now plays from one timeline. Next, you will check how it behaves when your system reduces motion.

Verify Reduced Motion

Your demo already plays through every named moment from one timeline. Now you need to make sure it respects viewers who ask their devices for less movement.

A motion-safe preview should settle on a clean frame when the reduced motion preference is active. Testing the real system setting catches behavior that a visual review cannot.

In this step, get ready to:

Enable the reduced-motion preference in your system settings.
Reload the browser preview to confirm every named step holds still.

Enable reduced motion in your system

Both macOS and Windows provide a system preference for limiting animation. Changing that preference gives your browser a real accessibility request to pass to the demo.

macOS

Click the Apple menu in the top-left corner of your screen.
Select System Settings.
Click Accessibility in the sidebar.
Click Motion on the right.
Turn on Reduce motion.

You should now see Reduce motion switched on.

Windows

Press Windows+I to open Settings.
Click Accessibility in the left pane.
Select Visual effects on the right.
Turn off Animation effects.

You should now see Animation effects switched off.

Test the demo's still frame

Before you reload the preview, do you think the demo will keep playing or settle on one frame?

Switch back to the browser tab showing demo.html.
Reload the preview using the reload control in your browser toolbar.

You should see one clean frame from the current step. The app content should remain readable while the pointer stays in place.

Select each named step once.
Watch every selected frame for 8 seconds.

Each selected step should hold a clean still frame for the full 8 seconds. The pointer should stay fixed while the app interface remains unchanged.

Demo Still Animating?

Confirm that Reduce motion is on in macOS or Animation effects is off in Windows.
Switch back to the coding agent from earlier.
Ask it to inspect the reduced-motion handling in demo.html.
Ask it to keep one clean still frame whenever the system requests reduced motion.
Return to the browser preview from earlier.
Reload demo.html.
Watch the selected frame for another 8 seconds.

Help me debug a demo that keeps animating with reduced motion enabled.

You have nailed an important accessibility detail: your demo holds steady when reduced motion is requested. Next, you will test its sharpness at different sizes before embedding it.

Embed the Responsive Demo

Your named steps now scrub cleanly through the whole app story. The reduced-motion view also holds on a useful still frame.

First, you will confirm that responsive scaling keeps the HTML demo crisp at different sizes. Then you will make the demo reachable from your landing page or README.

In this step, get ready to:

Test the demo at a narrow browser width.
Confirm that real text stays crisp at higher zoom.
Embed or link the demo from the app landing page or README.

Confirm the demo scales cleanly

The 1200 by 750 composition provides one coordinate system for every step. Responsive scaling fits that composition into the available space while preserving real text.

Before you resize the preview, which parts of the demo do you expect to feel cramped first?

Switch back to the browser preview from the previous step.
Drag one side of the browser inward until the preview is narrower than the 1200-pixel stage.
Inspect the outer edges for clipping.
Open your browser's main menu.
Increase the zoom with the browser's zoom control.
Inspect the letter edges for blurring.

At the narrow width you should still see the entire composition. The playback controls should remain reachable.

At higher zoom the letter edges should stay clean. Real text should remain readable without turning fuzzy.

What makes the demo responsive?

The 1200 by 750 composition keeps its proportions at narrow widths.
The playback controls remain reachable.
Real text keeps clean letter edges at higher zoom.

Your coding agent can inspect the scaling behavior against these three checks. If the current file already passes, the agent may leave it unchanged.

Switch back to the coding agent from earlier.
Ask the coding agent to update demo.html until all three responsive review criteria pass.
Review the proposed diff for changes limited to responsive presentation.
Accept any focused changes the agent proposes.
Switch back to the browser preview.
Refresh the preview.
Repeat the narrow-width check.
Repeat the higher-zoom check.

The refreshed demo should fit inside the narrow browser without clipping. The zoomed text should still have clean edges.

Text still clipped or blurry?

Describe the failing browser width to the coding agent. Ask it to preserve the 1200 by 750 coordinate system while changing only the outer scaling.

If text becomes fuzzy, ask the agent to confirm that demo.html still renders real text at the new size.

Help me fix the responsive demo.

Embed the demo in the repository

A self-contained demo becomes useful when readers can reach it from the app's normal entry point. Your existing landing page or README provides that route.

Embed or link?

An embed keeps the demo on the page when the chosen surface supports local HTML.

A relative link gives readers a direct route to demo.html when the surface cannot display it interactively.

Return to the coding agent.
Ask it to identify the repository's existing reader-facing landing page or README.

The agent should point to an existing file in the repository. This keeps the demo attached to the app's normal entry point.

Ask the agent to make demo.html reachable from that file through a supported interactive embed or relative link.
Review the proposed diff.
Confirm that the changed file references demo.html with a relative path.
Accept the focused changes.
Confirm that the changed file is saved in the repository.

Before you open the updated surface, do you expect the demo to stay usable at the same narrow width?

Load the chosen landing page or rendered README with the repository's usual preview.
Use the new demo embed or link.
Resize this view to the same narrow width.
Increase the browser zoom again.

You should reach the same named-step demo from the app's reader-facing surface. The 1200 by 750 composition should remain fully available at the narrow width.

The real text should remain crisp at higher zoom. Because reduced motion is still enabled, the demo should hold the clean still frame you verified earlier.

Demo missing from the page?

Confirm that the changed landing page or README points to demo.html inside the same repository.
Reload the chosen surface after the agent saves its changes.
Check that the filename matches demo.html exactly.

Help me connect the demo to my app page.

That closes the loop. Your app now carries a responsive HTML demo that viewers can open directly from the repository.

Secret mission

Run a Silent Clarity Test

A polished HTML demo still needs to communicate with no explanation from you. Test one loop with a new viewer. Then use their feedback to clarify the weakest named step without breaking the demo's existing controls.

Clean Up Your Resources

Your interactive HTML demo is a local repository file with no ongoing project-specific cloud costs. Choose whether to keep the demo available, pause your local preview, or remove the demo files.

Resources you used:

A self-contained demo.html file inside your app repository.
A demo embed or link on your app landing page or README.
A system reduced-motion preference enabled for the accessibility check.

Keep everything running

No action is required. Choose this option if you want the interactive demo to remain available beside your app.

Keep demo.html inside your app repository.
Keep the demo embed or link on your landing page or README.
Leave the html-demo skill available in your coding agent for future updates.
Return your system's reduced-motion preference to the setting you normally use.

Pause - I'll come back to this later

Close the local preview to pause your work. No background service or cloud resource needs to be stopped.

Close the browser tab that is previewing demo.html.
Keep demo.html inside your app repository.
Leave the demo embed or link in place for your next session.
Return your system's reduced-motion preference to the setting you normally use.

Delete - I don't want to use this again

This deletion is contained to the demo, so your original app stays in the repository. You remove demo.html plus the landing-page or README reference to it.

macOS

Use Finder to locate the app repository that contains demo.html.
Delete demo.html from the app repository.
Confirm that demo.html is no longer listed in the repository.

Windows

Use File Explorer to locate the app repository that contains demo.html.
Delete demo.html from the app repository.
Confirm that demo.html is no longer listed in the repository.

Return to the landing page or README from earlier.
Remove the embed or link that points to demo.html.
Save the updated landing page or README.
Preview the landing page or README.
Return your system's reduced-motion preference to the setting you normally use.

You should no longer see the interactive demo or a link to demo.html.

You have cleared the demo cleanly. Your original app remains untouched.

Nice Work!

You did it! You turned your app into a self-contained HTML demo that viewers can explore at their own pace. The finished demo now sits in your repository ready for your landing page or README.

You've learned how to:

Use the html-demo skill to turn 3 to 5 app moments into named steps. Each step has a focused duration of 4 to 8 seconds.
Build a self-contained time-driven demo with real app text plus pointer movement. The animation plays inside a 1200 by 750 window.
Verify timeline controls through looping playback plus scrubbing. Confirm reduced motion holds a clean still frame. Embed the crisp demo on a landing page or README.
Secret Mission: Complete an optional challenge that extends your interactive app demo beyond the core project.

Ready to quiz yourself?