Interactive product demos

Creates a coherent product demonstration with deterministic scene states, manual control and honest simulation labels.

interactive-product-demos

See how it helps

When is it useful?

Use when a product story needs playable steps rather than a static screenshot.

What does it help you do?

Storyboards the problem, product action and resulting value.
Synchronizes automatic playback with manual step selection and scrubbing.
Adapts scenes to narrow screens and reduced-motion preferences.

Try asking this

Create a three-step approval demo with manual navigation and clearly labeled simulated customer data. Pause automatic playback, jump back a step and continue by keyboard. The selected stage and explanatory text should stay synchronized on a narrow screen.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Interactive Product Demos

An effective interactive product demo turns a complex workflow into a crisp, self-explanatory visual story built from real UI primitives—where every step reveals cause $\rightarrow$ system action $\rightarrow$ user value without overwhelming the viewer with full-app chrome.

Storyboard First: The Three-Act Scene Structure

Before animating a single pixel, define the narrative arc across 3–5 discrete, user-controllable scenes:

Beat	What Happens on Stage	Visual Focus & Restraint
1. Context & Trigger	The user sees a recognizable starting state (e.g., an incoming request, a code diff, a task card) and a clear focal action (simulated cursor click, command press, or user-clicked step pill).	Dim or crop unrelated navigation chrome; spotlight the active control.
2. System Transformation	Real UI components assemble or transition step by step (e.g., pipeline nodes light up, validation badges resolve, panels slide into alignment with staggered `60ms` rhythm).	Guide the eye along a single directional vector (left-to-right or top-to-bottom); never animate 5 unrelated corners simultaneously.
3. Outcome & Proof	The final state settles cleanly with readable metrics, status confirmation, and a pause (`1.5s–2.5s`) so the viewer can absorb the result before any loop or next step.	Keep final text, numbers, and interactive inspection states crisp and legible.

Hybrid Playback: Auto-Play + User Scrubbing

Never trap the viewer in a passive video-like loop they cannot control:

Synchronized Step Controller:
- Pair the stage with interactive step tabs/pills (1. Plan $\rightarrow$ 2. Execute $\rightarrow$ 3. Verify) and a visual progress indicator.
- Auto-advance gently when in the viewport, pause immediately on user hover, focus, or manual step click, and jump cleanly to any clicked step without replaying intermediate transitions at normal speed.
Deterministic Scene State Machine:
- Drive the demo from a single explicit state (activeStepIndex, isPlaying, isReducedMotion) and deterministic fixture data (DEMO_SCENES[step]).
- Switching from Step 3 directly to Step 1 (or clicking rapidly through 1 $\rightarrow$ 4 $\rightarrow$ 2) must cancel in-flight timers/tweens immediately and transition cleanly to the target step's canonical state.
Honest Representation vs. Simulation:
- Build demo stages using the product's actual design tokens, typography, and component styles so the showcase never looks like a disconnected marketing video.
- Keep fixture data realistic and internally consistent, and clearly distinguish interactive demo sandboxes from live user data or production actions.

Responsive & Reduced-Motion Adaptation

Viewport scaling without tiny unreadable text: Instead of shrinking a 1200px desktop app window down to scale(0.3) on mobile (which makes text illegible), crop the stage around the focal component card on narrow viewports so typography remains at readable 13px–16px scale.
Reduced motion: When prefers-reduced-motion: reduce is active, disable automatic step cycling and simulated cursor movement; let the user step through each completed scene state via keyboard-accessible tabs with instant or gentle fade swaps.

Included files 1

SKILL.md