guided-demo
Guided Demo Pattern
Add a self-narrating walkthrough to any HTML/web application. A declarative step array drives a setTimeout loop that toggles CSS classes on DOM elements and writes text character-by-character into a fixed panel. The engine overlays the existing page without modifying its code. When the demo stops, all state resets.
About 100 lines of JS and 30 lines of CSS for the core. Interstitials, speed controls, keyboard shortcuts, and progress bar are optional layering.
Before implementing
Ask the user these questions (skip any already answered in conversation):
- What are the sections? Tabs, routes, scroll positions, slide indices? Determines how section switching works.
- Framework? Vanilla HTML works directly. React/Vue/Svelte need the engine as a conditional overlay component, and
querySelectormust run after render. - Presenter talking over it, or self-narrating? Talking over: shorter text, longer pauses. Self-narrating: detailed text, moderate pauses.
- Interactive elements to trigger? Map to step actions. Confirm CSS selectors are stable (not framework-generated hashes).
- Offline requirement? Keep everything in one file if so. No CDN dependencies without fallbacks.
- How many steps? Under 15 for a pitch, 20-30 for a detailed walkthrough. Over 40 loses attention.
- Touch device support needed? Most guided demos target desktop/laptop presentation contexts. The narrator panel has on-screen prev/play/next buttons that work on touch, but swipe gestures or mobile-specific layout are rarely needed.
Implementation
More from sammcj/agentic-coding
critical-thinking-logical-reasoning
Critical thinking and logical reasoning analysis skills for when you are explicitly asked to critically analyse written content such as articles, blogs, transcripts and reports (not code).
1.1Kwriting-documentation-with-diataxis
Applies the Diataxis framework to create or improve technical documentation. Use when being asked to write high quality tutorials, how-to guides, reference docs, or explanations, when reviewing documentation quality, or when deciding what type of documentation to create. Helps identify documentation types using the action/cognition and acquisition/application dimensions.
416creating-development-plans
Creates structured development plans with phased task breakdowns, requirements, and QA checklists. Use when the user explicitly asks to create a dev plan, development plan, or document development requirements.
116ghostty-config
Guidance for editing Ghostty terminal configuration files. You must use this skill when creating or modifying Ghostty config files.
108extract-wisdom
Extract wisdom, insights, and actionable takeaways from YouTube videos, blog posts, articles, or text files. Use when asked to analyse, summarise, or extract key insights from a given content source. Downloads YouTube transcripts, fetches web articles, reads local files, performs analysis, and saves structured markdown.
105prompt-enhancer
|
99