Let visitors try your app
before they sign up.
PreviewForge is a Claude Code skill that turns any React or Next.js codebase into an interactive, theme-matched “try it before you sign up” demo — a guided product tour on mock data, auto-generated from your own UI. No backend, no secrets, leaks nothing.
One command · works in any React / Next.js repo · MIT licensed
A real demo, not a screenshot
Static screenshots tell. A video shows. An interactive preview lets the visitor do the thing — generated automatically from your codebase and matched to your exact theme.
Looks identical to your app
Extracts your real design tokens — Tailwind config, CSS vars, CSS-in-JS, or UI kit — so the demo is pixel-close to production.
Guided, hands-on tour
A spotlight highlights the next step and waits for the visitor to actually click or type it, then rewards them with a toast.
Soft rails, not cages
Click off-target and the spotlight gently re-pulses with a hint — guidance without frustration.
Leaks nothing
Presentational replicas on in-memory mock data. No fetch, no API clients, no auth, no secrets — and a bundled auditor enforces it.
Reusable engine
Ships a dependency-free React tour engine (just react) — spotlight, soft-rails, toasts, and CTA. Drop it in any project.
Editable by data
The whole journey is a declarative flow config. Change copy, steps, or mock data without touching engine code.
A 7-phase workflow
Point the skill at a repo and it does the rest — orient, extract, propose, reconstruct, wire, deliver, and self-check.
Orient
Detect framework, router, styling system, TS/JS, and your landing + post-signup screens.
scripts/detect_stack.mjsExtract tokens
Pull your real colors, fonts, radii, and shadows into one theme.tokens file.
Propose a flow
Infer candidate user journeys, rank them, and propose the single most compelling “aha” for your approval.
Reconstruct
Rebuild only the screens that flow touches as isolated, presentational replicas on mock data.
Wire the tour
Author a declarative flow config; the bundled engine handles spotlight, soft-rails, toasts, and the CTA.
Deliver
Add a /preview route and inject a reversible, theme-matched launch button on your landing page.
Self-check
Run the leak auditor and verify the flow end-to-end.
scripts/audit_preview.mjsPick your method
All four install the same skill into Claude Code. Then just ask Claude in any React/Next.js project.
# global install → ~/.claude/skills/ npx interactive-preview-skill # this project only → ./.claude/skills/ npx interactive-preview-skill --project
claude plugin marketplace add NI3singh/interactive-preview-skill claude plugin install interactive-preview@preview-forge
git clone https://github.com/NI3singh/interactive-preview-skill cp -r interactive-preview-skill/skills/interactive-preview ~/.claude/skills/
Show your product, don’t describe it.
Add an interactive “try it before you sign up” demo to your landing page in minutes.
⭐ Star it on GitHub