By jezweb
Add a Walkabout to an app: a guided voice tour that walks the real pages with a narration-synced moving spotlight, an ask-the-app AI guide that logs every question, and one-command narrated demo videos.
Your app demos itself.
Walkabout is a pattern (not a library) for giving any web app three connected capabilities:
Born on FieldProof (Jezweb, 2026) because the founder didn't want to give demos anymore. Now the app gives them.
Tour libraries fight your router and your styles, and none of them do the
thing that matters: voice synced to a moving spotlight. The trick that
makes Walkabout work is that nothing is hand-timed — narration is generated
through ElevenLabs' with-timestamps endpoint, so the exact second each
sentence starts is known. The spotlight moves on the audio's own clock
(ontimeupdate), demo-video actions fire at narration offsets, and
re-recording the voice regenerates every timing. Sync is correct by
construction, not by validation.
| Path | What |
|---|---|
templates/Tour.tsx | The tour component: navigate → narrate → moving spotlight → auto-advance, pause-on-wander, keyboard, ?tour=N deep links |
templates/steps.ts | Steps config + localStorage helpers |
templates/halo.css | The spotlight halo (3 rules, incl. reduced-motion) |
templates/gen-tour-audio.py | Segmented scripts → ElevenLabs with-timestamps → MP3s + generated cue timings |
templates/record-tour.mjs | Tour → narrated MP4, fully headless (lossless CDP screencast + ffmpeg muxes the source MP3s at measured offsets) |
templates/record-demo.mjs | Scripted feature demos: {say, do} segments — the harness types/clicks on narration cue |
templates/Assist.tsx + assist-routes.ts + assist-knowledge.ts + questions.sql | The ask-the-app guide: widget, endpoint, app-guide content, question log schema |
skills/walkabout/SKILL.md | A Claude Code skill that walks an AI agent through adopting the whole pattern |
docs/pattern.md | The deep reference: design rationale and every gotcha earned in production |
.claude-plugin/ | Plugin + marketplace manifests so this repo installs via /plugin |
The templates are real production files, not scaffolds — copy them into
your app and adapt names, styling, and the auth bootstrap. The gotchas in
docs/pattern.md are the hard-won part: the React effect-dependency trap
that replays audio on every click, the z-index war with Leaflet, why
getDisplayMedia tab-capture is the wrong way to record, and a dozen more.
ELEVENLABS_API_KEY)ffmpeg/ffprobeOne engine, three script lengths:
| Tier | Length | Audience |
|---|---|---|
| Quick highlights | 30–45s | socials, home page |
| Promo tour | 2–3 min | first-time users, prospects |
| Training demos | 30–60s each | users learning a feature |
Install it as a plugin (recommended) — this repo is its own marketplace:
/plugin marketplace add jezweb/walkabout
/plugin install walkabout@walkabout
Then ask Claude Code to "add a walkabout to this app" (or run
/walkabout:walkabout). The skill carries the build order, the verification
gates ("test by wandering, not by watching"), and the traps; templates/ and
docs/pattern.md ride along in the plugin.
Prefer a manual skill install? Copy the skill folder instead:
cp -R skills/walkabout ~/.claude/skills/walkabout # then restart Claude Code
MIT © Jezweb
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub jezweb/walkabout --plugin walkaboutScaffold Cloudflare Workers, Hono APIs, D1/Drizzle schemas, D1 migration workflows, full-stack Vite+Workers apps, and TanStack Start SSR dashboards.
Social media content creation — platform-formatted posts for LinkedIn, Facebook, Instagram, and Reddit with character limits, hashtag strategies, and image specs.
Manage Shopify stores: product creation, bulk imports, content pages, blog posts, and SEO metadata.
Local business SEO setup with JSON-LD schema, meta tags, robots.txt, and sitemap.
Generate colour palettes, favicon packages, custom SVG icon sets, and image processing (resize, convert, optimise).
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Frontend design skill for UI/UX implementation
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Memory compression system for Claude Code - persist context across sessions
Marketing skills for AI agents — conversion optimization, copywriting, SEO, paid ads, ad creative, and growth
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.