demo-app-prep

Prepares applications for deterministic demo video recording with seeded data and frozen state.

3|1|Updated Nov 19, 2025
One-click install
npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill demo-app-prep-lukaskellerstein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: demo-app-prep
Source: https://github.com/lukaskellerstein/claude-my-marketplace/tree/main/plugins/demo-video-plugin/skills/demo-app-prep
Command: npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill demo-app-prep-lukaskellerstein

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Demo recordings fail when the app shows empty tables, dev banners, placeholder data, or timestamps that change between takes. This Skill gets a project into a demo-worthy, reproducible state before any capture begins, so every take looks identical and the app appears genuinely used. ## Core Features & Use Cases - Deterministic state control: Freezes clocks, fixes random values, hides dev-only UI, and suppresses toasts and third-party widgets so re-recorded sections match their neighbours. - Realistic data seeding: Guides seeding through the project's own seed scripts, the app's API, or direct database inserts, with domain-shaped names, realistic magnitudes, and time-relative dates anchored to a frozen instant. - Auth and reset handling: Sets up seeded demo accounts, injected session state, or dev bypass flags, plus idempotent reset scripts for sections that mutate data. - Use Case: Before recording a product walkthrough, you boot the app, seed 200 plausible invoices dated relative to a frozen "now", inject a demo session, hide the Intercom widget, and verify two dry runs produce identical screenshots. ## Quick Start Prepare my app for demo recording by seeding realistic data, freezing the clock, and hiding all dev-only UI before capture.

Frequently Asked Questions about demo-app-prep

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I seed realistic demo data for an app recording?▼

Check for the project's own seed script first (prisma/seed.ts, rails db:seed, fixtures), then extend it with demo-specific volume. For derived state, write through the app's API; use direct database inserts only for bulk padding rows.

How do I make demo video takes reproducible and deterministic?▼

Freeze the clock and seed dates relative to that fixed instant, fix random values, block analytics and third-party domains, and hide timer-based UI like toasts. Verify with two dry runs whose screenshots must be visually identical.

Should I record demos against the dev server or a production build?▼

Prefer a production-mode build (npm run build && npm run preview) over the dev server. It avoids HMR overlays, dev warnings, and React StrictMode double-renders, giving faster and steadier paints during capture.

Can I record a demo using real production or customer data?▼

No. A demo video is a distributable artifact, so real customer or personal data must never appear, even redacted copies. Generate synthetic data with plausible names, realistic magnitudes, and a few edge cases instead.

How do I handle login and authentication in a recorded demo?▼

Prefer a seeded demo account with a known password logged in during an early section. Alternatives are injecting session state via cookies or localStorage before navigation, or a dev bypass flag the app already supports.

Why do re-recorded demo sections not match the rest of the video?▼

Mismatches come from leftover non-determinism: relative timestamps, random avatars, unseeded sort tie-breaks, or mutations from a previous take. Mark mutating sections resetBefore and run an idempotent reset script between takes.