Skill · Version 1.0.0

Interaktive Produktdemos

Erstellt zusammenhängende Produktvorführungen mit eindeutigen Szenenzuständen, manueller Steuerung und ehrlicher Simulationskennzeichnung.

interactive-product-demos

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze dies für abspielbare Produktschritte statt statischer Bildschirmbilder.

Wobei hilft er dir?

Plant Problem, Produktaktion und daraus entstehenden Nutzen als Geschichte.
Synchronisiert automatische Wiedergabe mit manueller Schrittauswahl und Zeitsteuerung.
Passt Szenen an schmale Ansichten und reduzierte Bewegung an.

Das könntest du fragen

Erstelle eine dreistufige Freigabedemo mit manueller Navigation und gekennzeichneten simulierten Kundendaten. Pausiere die Wiedergabe, springe zurück und fahre per Tastatur fort. Ausgewählte Phase und Erklärung bleiben auch auf schmalem Bildschirm synchron.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

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.

Enthaltene Dateien 1

SKILL.md