Update to Rendemo

{
  "name": "new-demo",
  "description": "This skill should be used when someone asks for a product demo, walkthrough, tutorial, onboarding flow or \"show how my product works\" and there is no Rendemo project yet — including \"make me a demo\", \"demo my app\", \"turn this into an interactive demo\", \"record a walkthrough of X\", or a bare product URL with a request to demo it. Read it BEFORE choosing how to capture (a user recording with the Rendemo Chrome extension beats a browser capture code, which beats a headless crawl) and before rendemo_crawl_site, rendemo_start_browser_crawl or rendemo_list_projects on an empty workspace. Covers the two questions to ask first, the intent-to-theme recipes, the extension handoff script to hand the user verbatim, the build pass from auto-directed draft to published link, and translating plain-words feedback into edits — so the user never has to open Rendemo at all.",
  "included_files": [],
  "skill_md_contents": "---\r\nname: new-demo\r\ndescription: This skill should be used when someone asks for a product demo, walkthrough, tutorial, onboarding flow or \"show how my product works\" and there is no Rendemo project yet — including \"make me a demo\", \"demo my app\", \"turn this into an interactive demo\", \"record a walkthrough of X\", or a bare product URL with a request to demo it. Read it BEFORE choosing how to capture (a user recording with the Rendemo Chrome extension beats a browser capture code, which beats a headless crawl) and before rendemo_crawl_site, rendemo_start_browser_crawl or rendemo_list_projects on an empty workspace. Covers the two questions to ask first, the intent-to-theme recipes, the extension handoff script to hand the user verbatim, the build pass from auto-directed draft to published link, and translating plain-words feedback into edits — so the user never has to open Rendemo at all.\r\nversion: 1.0.0\r\n---\r\n\r\n<!-- GENERATED by `npm run skills:generate` from lib/copilot/skills/new-demo/SKILL.md.\r\n     Edit that file, not this one. `npm run skills:check` fails the build if they have drifted. -->\r\n\r\n# Starting a demo from a conversation\r\n\r\nSomeone has asked you for a demo. They have not asked for a project, a capture, a sandbox, a theme\r\nor a publish step — those are our nouns, and every one you make them learn is a reason to give up.\r\nThe job is to get from \"I want a demo of X\" to a live link they can send someone, with the person\r\ndoing exactly one thing: showing you their product once.\r\n\r\nAssume they will never open Rendemo. Everything below exists to make that assumption true.\r\n\r\n**One rule before any of it: waiting is a tool call, not a turn.** Recording, crawling and building\r\nall take minutes, and every tool here that waits on one — `rendemo_watch_captures`,\r\n`rendemo_get_crawl_status` — holds the connection open and returns when something actually happens.\r\nWhen one comes back still-not-finished, call it again immediately. Do not summarise the wait, do not\r\nask the user to check, and do not end your turn: nothing on the other side will resume it, and the\r\nwork you were waiting on completes into an empty room. A result that says NOT A STOPPING POINT means\r\nexactly that.\r\n\r\n## Two questions, then get out of the way\r\n\r\nAsk both before any tool call. They are cheap, they are the only things you cannot infer, and each\r\none decides something you would otherwise get wrong.\r\n\r\n**1. What is this demo for?** Not \"what should it cover\" — what job it does. The answer picks the\r\nstory shape, the theme, the motion and the ending, all at once:\r\n\r\n| They want | The story is | Open on | End on | Theme candidates | Motion |\r\n|---|---|---|---|---|---|\r\n| To sell it — prospects, outbound, a website | the shortest path to the payoff | a title card naming the outcome | book a demo / talk to us | `atrium` `broadsheet` `kiosk` | `cinematic` |\r\n| To onboard new users | first-run order, nothing clever | wherever a new account actually lands | into the product itself | `vellum` `signal` | `calm` |\r\n| To teach one feature | one screen, deep | the screen the feature lives on | related docs, or back to the app | `signal` `console` | `calm` |\r\n| A launch or landing-page loop | a highlight reel that autoplays | the most striking moment in the product | sign up / join the waitlist | `marquee` `sticker` | `kinetic` |\r\n| To answer \"how do I…\" for support | the exact task, no detours | the task's entry point | back to support / the next task | `ledger` `vellum` | `calm` |\r\n\r\nA theme is not optional polish — **publishing refuses until one is set**, deliberately, so that no\r\ntwo demos default into looking alike. Intent is how you choose one well instead of guessing.\r\n\r\n**2. Does the demo need to show anything behind a login?** Their dashboard, their account, their\r\ndata. People rarely volunteer this, and the public marketing site is almost never the product they\r\nmeant. It decides the capture route below, and getting it wrong costs a whole crawl.\r\n\r\n**Suggest, don't interrogate.** Lead with your read so they can just say yes: \"Sounds like a sales\r\ndemo — I'd open on the outcome and end on a Calendly link, in `atrium` with cinematic motion. Want\r\nthat, or something calmer?\" Two questions is the budget. Anything else you would like to know\r\n(accent colour, step count, tone) you should decide, do, and offer to change afterwards.\r\n\r\n## The capture ladder — a recording first\r\n\r\nThree ways a product gets into Rendemo. They are not equivalent, and the order matters:\r\n\r\n1. **A recording** (Rendemo Chrome extension) — the person clicks through their own product and the\r\n   extension records the real thing: rrweb DOM stream plus video, real cursor, real transitions,\r\n   real data, pages behind a login included. Auto-direction runs the moment it uploads. **This is\r\n   the best demo Rendemo can make, and it should be your default ask for anything that is a\r\n   product.**\r\n   - *If they want YOU to do the walkthrough* rather than click through it themselves — \"make the\r\n     demo, I don't want to drive\" — that is **agent-driven recording**: they paste one code and you\r\n     rehearse the workflow unrecorded on their signed-in tab, propose the take as a plan they approve,\r\n     then record that plan as one clean take. Same real take, same auto-direction; you navigate it.\r\n     See `drive-and-record`. A person who knows their product still tells its story best, so offer\r\n     this as the alternative, not the default.\r\n2. **A browser capture code** (`rendemo_start_browser_crawl`) — the person pastes one code into the\r\n   extension, signed in as themselves, and **you** capture the pages through it with\r\n   `rendemo_capture_pages`. Static replica, no real interaction, but it reaches signed-in pages when\r\n   a recording is not on the table, and costs them one paste. See `sandbox-demos`.\r\n3. **A headless crawl** (`rendemo_crawl_site`) — no human involved at all, public pages only,\r\n   honours robots.txt. Right when the demo genuinely *is* the marketing site, or when nobody is\r\n   available to record.\r\n\r\nReach down the ladder only for a reason. \"They are in a chat and I have no browser\" is **not** a\r\nreason — the person has a browser, and every route here is one they drive. The reasons that count:\r\nthey do not have access to the product, nobody is at a keyboard, or the subject really is a public\r\nwebsite.\r\n\r\n### Handing off a recording — give them this, not a paraphrase\r\n\r\nDo not explain the extension. Give the steps:\r\n\r\n1. Install the Rendemo Chrome extension (https://www.rendemo.com/extension) and connect it to your\r\n   Rendemo account.\r\n2. Open your product in Chrome and sign in the way you normally would.\r\n3. Click the Rendemo extension icon and hit **Record this tab**.\r\n4. Click through what you would show someone — five to eight screens is the sweet spot. Do not\r\n   worry about being smooth or fast; dead air gets cut.\r\n5. Hit **Stop**, then **Send to Rendemo**. (Stop alone does not upload — the take stays in the\r\n   extension until Send.)\r\n6. That is everything — I am watching for it to land, so you do not need to tell me when you are\r\n   done.\r\n\r\nStep 5 is the one that gets dropped, and dropping it looks exactly like a broken product: they\r\nbelieve they have sent a recording and nothing ever arrives. Always name both buttons.\r\n\r\n### Then wait — with `rendemo_watch_captures`, not with the user\r\n\r\nThe moment you have given those steps, call `rendemo_watch_captures`. It **holds the connection\r\nopen** for up to two minutes and returns when a recording lands, so waiting is something you do\r\ninside a tool call rather than something you ask a person to announce. It also waits out the story\r\ndirector, so what comes back is a project with a plan already worth reading.\r\n\r\n**If it returns \"nothing yet\", call it again immediately with the `sinceIso` it gave you.** That\r\nresult is not news, and it is not a stopping point. This is the single most common way this whole\r\nflow fails: the agent reports \"I'll check back once you've finished recording\" and ends its turn —\r\nand nothing checks back, because a chat has no timer and no scheduler. The person finishes a\r\nperfectly good recording into silence. Two or three consecutive waits is a normal recording.\r\n\r\nThe tool tells you when the situation has genuinely changed: after about ten minutes it stops\r\ntelling you to keep waiting and starts telling you to ask whether they pressed **Send to Rendemo**,\r\nbecause at that point a slow take is no longer the likely explanation.\r\n\r\n### What is already happening while you wait\r\n\r\nRegistering a capture queues two jobs: a prewarm, and a **`direct` pass — the story director**. So\r\nby the time they say \"done\", the project usually already has steps, captions and a first cut of the\r\nnarrative. **Read it with `rendemo_get_plan` before you touch anything.** You are editing a draft,\r\nnot authoring from an empty file, and re-authoring what auto-direction already did is the most\r\ncommon way to make a demo worse and slower at the same time.\r\n\r\n### A capture-code session: they paste once, you capture\r\n\r\nOne route down the ladder the roles flip. The person pastes the capture code from\r\n`rendemo_start_browser_crawl` into the extension, signed in, on the site — and that paste is the\r\nwhole of their job. From then on **you** name the pages: `rendemo_capture_pages({ crawlId, url,\r\nurls })` opens each url in that signed-in tab, captures it, and holds the connection open while it\r\ndoes. Send the product's real screens (the dashboard, a list, a detail view, settings), not the\r\nmarketing site, and do not ask them to click anything per page.\r\n\r\nRead the result the way you read a watch. It says whether the extension has joined at all — \"nobody\r\nhas pasted the code yet\" is a different situation from \"working\", and the tool names which — then\r\nlists every url as captured, failed, or still in flight. In flight means call it again with no\r\n`urls`; that is not a stopping point. A url refused as a **login wall** means the tab is not signed\r\nin for that page: ask them to sign in there, then re-issue it. Pages they capture by hand with\r\n\"Capture this page\" land in the same crawl; `rendemo_watch_captures({ crawlId })` counts everything\r\nthat reached storage either way, and is the cross-check before you finish.\r\n\r\nThere is still no event meaning \"finished\" — the sandbox has enough when the story does. Call\r\n`rendemo_finish_browser_crawl` then; it verifies against storage rather than trusting the number you\r\npass. Do not wait for the code to expire.\r\n\r\n## The build pass\r\n\r\nIn order. Each step assumes the one before it.\r\n\r\n1. **`rendemo_get_plan`** — read the story that already exists. Decide what to cut before what to add.\r\n2. **Tighten the copy.** Auto-direction names screens accurately and generically. Rewrite titles to\r\n   say what the viewer is looking at in *their* words, and blurbs to carry the thing that is not\r\n   visible. If a blurb can be deleted without loss, delete the step.\r\n3. **`rendemo_set_demo_presentation_theme`** — `themeId`, `motionIntensity` and `accentMode` from\r\n   the intent table, confirmed by their answer. Required before publish.\r\n4. **`rendemo_set_title_card`** — the cover, which now renders as its own beat before step 1. Name\r\n   the outcome, not the product.\r\n5. **`rendemo_set_end_card`** — see below. Never skip this one.\r\n6. **Check it**: `rendemo_director_lint` for geometry, `rendemo_review_step_presentations` for\r\n   whether the cards can actually be read. Lint passing is not evidence a step looks right.\r\n7. **`rendemo_publish_demo`** — world-visible, so confirm once, at this moment, not in advance.\r\n8. **Look at it.** `rendemo_review_demo_frames` photographs the live demo step by step and hands you\r\n   the images. See below — this is the step that catches what the others cannot.\r\n9. **Hand back the URL** and say what you decided that they might want to veto.\r\n\r\n### Look at the demo before you call it done\r\n\r\nEverything up to here is blind. `rendemo_director_lint` reads geometry and passes while a card is\r\nunreadable, sits over a busy region, or covers the very thing it points at.\r\n`rendemo_render_step_card` draws the real card but over a stand-in shell, so it never sees the card\r\nagainst the real screen. Every card defect this product has shipped lived in exactly that gap.\r\n\r\n`rendemo_review_demo_frames` opens the published demo at each step, waits for the card to finish\r\narriving, and returns real screenshots as images. Look at them and fix what is actually wrong: copy\r\nyou cannot read, a card covering its target, emphasis that vanished into a light UI, text that\r\nclipped. Then republish — same link.\r\n\r\nTwo rules that decide whether this helps or hurts:\r\n\r\n- **The camera cannot see blur.** Headless Chrome drops `backdrop-filter`: the dim paints and the\r\n  blur does not, so a glassy theme photographs flatter and harder-edged than a viewer ever sees it.\r\n  Judge legibility and contrast; never \"the glass looks wrong\". The tool repeats this in every\r\n  result because it is the one way a visual check makes a demo worse.\r\n- **A step that reads well needs nothing.** The failure mode of a review pass is finding something\r\n  to do. If five frames are fine, say they are fine.\r\n\r\nIt photographs up to six steps per call and needs the demo published, because it photographs the\r\nreal artifact at its real URL. That is why publishing comes first: publish, look, fix, republish —\r\nthe slug is kept, so nobody is ever handed a link that breaks in between.\r\n\r\n### The end card is the difference between a demo and a video\r\n\r\nA demo that stops has spent the whole view and asked for nothing. Before you ask them what the CTA\r\nshould be, go and find it — then ask with the answer already filled in:\r\n\r\n- Grep the capture or sandbox for a booking or signup link: `calendly`, `cal.com`, `hubspot`,\r\n  `/demo`, `/signup`, `/get-started`, `/contact`, `/trial`.\r\n- Match it to the intent: sales ends on a meeting, onboarding ends *inside* the product, a launch\r\n  loop ends on signup.\r\n- Then: \"I found `calendly.com/them/demo` — using that for the button unless you say otherwise.\"\r\n\r\nOne question, already answered, is not the same as an interrogation. Publishing warns when a demo\r\nhas no ending; treat that advisory as a defect you caused, not a note.\r\n\r\n### Say what you chose\r\n\r\nWhen you hand back the link, name two or three decisions the person can reverse: a step you cut,\r\na mark you chose, the ending you wired. It reads as craft rather than automation, and it is how\r\nthey learn what is adjustable without reading a manual.\r\n\r\n## Iterating in their words\r\n\r\nThey will not say \"change `scene.mark` to `spotlight`\". Translate:\r\n\r\n| They say | It usually means | Reach for |\r\n|---|---|---|\r\n| \"step 2 is slow\" | an unearned step, or a camera move on a step that did not need one | delete the step, or `rendemo_direct_step` |\r\n| \"too corporate\" / \"too plain\" | the theme is wrong for who they are | `rendemo_set_demo_presentation_theme` |\r\n| \"I can't read that\" | a card over a busy region, or an emphasis that vanishes on a light UI | `scene` `scale`/`weight`, or `spotlight` over `ring` |\r\n| \"wrong order\" | the story, not the capture | `rendemo_reorder_steps` |\r\n| \"it just ends\" | no end card | `rendemo_set_end_card` |\r\n| \"it doesn't look like us\" | brand colour, not theme | `rendemo_design_brand_style` |\r\n\r\nThen republish. **The slug is kept across republish**, so the link they already sent to someone\r\nkeeps working and shows the new version — \"same link, already live\" is always true, and worth\r\nsaying, because everyone assumes otherwise.\r\n\r\n## Do not send them to the Studio to fix something you can fix\r\n\r\nThe Studio exists and is good, and needing it is a failure of this flow. Two exceptions worth\r\nnaming out loud: anything that needs their eyes on a frame (\"does this look right to you?\"), and\r\nanything that needs a credential. Everything else — copy, order, theme, camera, ending, publish,\r\nembed, tracking links — you can do from here.\r\n\r\nOne real hazard if they do open it: **opening `/projects/<id>` in the Studio while you are mid-pass\r\ncan revert your draft edits**, because the Studio autosaves the plan it loaded. Finish your pass,\r\npublish, then invite them in.\r\n\r\n## Where to go next\r\n\r\n- `demo-craft` — the step scene: cards, marks, ties, entrances, and the rules that silently discard\r\n  a change you thought you applied. Read before any styling pass.\r\n- `sandbox-demos` — everything specific to a crawl-backed sandbox: surveying pages, durable targets,\r\n  publish order.\r\n- `brand-and-look` — brand kits and colour.\r\n- `camera-direction` — zoom, framing and when a move is worth it.\r\n\r\n## Tools\r\n\r\n`rendemo_watch_captures` (until a recording lands and its direction finishes) → `rendemo_get_plan` →\r\n`rendemo_update_step` / `rendemo_reorder_steps` →\r\n`rendemo_set_demo_presentation_theme` → `rendemo_set_title_card` → `rendemo_set_end_card` →\r\n`rendemo_director_lint` / `rendemo_review_step_presentations` → `rendemo_publish_demo` →\r\n`rendemo_review_demo_frames` (look at it, fix, republish) →\r\n`rendemo_get_embed` / `rendemo_create_tracking_link` → `rendemo_get_demo_analytics`.\r\n\r\nNo recording available: `rendemo_start_browser_crawl` (signed-in pages, capture code) or\r\n`rendemo_crawl_site` (public site), then `sandbox-demos`.\r\n"
}