capturing-readme-walkthroughslisted

# Capturing README walkthroughs and feature demos The full architecture + portable adaptation guide lives in [`docs/Screenshots.md`](../../docs/Screenshots.md). **Read that first** for the why and the reusable pattern. This skill covers the *agent workflow* — when to invoke the pipeline, how to add a demo, what can go wrong. ## When to use this skill - "Regenerate the README walkthroughs / videos / screenshots" - "The home dashboard demo is stale — re-record it" - "Add a per-feature demo for the new <X> flow" - "The tour video got a gray-space artifact after the layout change" - "I shipped a UI change — refresh the marketing assets" (proactive — flag this when you ship a feature whose UI surface area appears in the README assets) Skip for: smoke tests, visual regression, e2e flows. Those are the main `playwright.config.ts` suite under `e2e/` (everything outside `e2e/screenshots/`). ## The one-shot command ```bash npm run build && npm run screenshots:videos ``` - `npm run build` ensures the production server has the latest UI (the spec uses `npm run start`, not `npm run dev`, for stable visual frames). - `npm run screenshots:videos` runs both specs (per-page PNGs from `screenshots.spec.ts`, comprehensive tour from `tour.spec.ts`), then converts the tour's WebM into an animated WebP via ffmpeg. - Output lands in `docs/screenshots/` (PNGs) and `docs/videos/comprehensive-tour.{webm,webp}`. For PNGs only (faster — skip the video pass): ```bash npm run build && npm run scre