Interaktív termékbemutatók

Következetes jelenetállapotokkal, kézi vezérléssel és őszinte szimulációjelöléssel készít összefüggő termékbemutatót.

interactive-product-demos

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha statikus kép helyett lejátszható lépések kellenek.

Miben segít neked?

Forgatókönyvbe rendezi a problémát, termékműveletet és létrejövő értéket.
Összehangolja az automatikus lejátszást a kézi lépésválasztással és tekeréssel.
Szűk képernyőhöz és csökkentett mozgásigényhez igazítja a jeleneteket.

Például ezt kérheted

Készíts háromlépéses jóváhagyási bemutatót kézi navigációval és jelölt szimulált ügyféladatokkal. Állítsd le az automatikus lejátszást, lépj vissza, majd folytasd billentyűzettel. Keskeny képernyőn is egyezzen a kiválasztott szakasz és magyarázata.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

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.

Csomagban lévő fájlok 1

SKILL.md