satva-guide-giflisted

# Satva guide + GIF pipeline Three artefacts from one run against a **locally running** app: 1. `shots/s<NN>-<slug>.png` — full-viewport screenshots with numbered callout rings 2. `<Name>-Demo.gif` — narrated, cursor-animated walkthrough, start to finish (+ `storyboard.png`) 3. `<Name>-Setup-Guide.pdf` — Satva house format, screenshots inline, GIF storyboard at the end `SKILL` below means **the folder that contains this file** (usually `~/.claude/skills/satva-guide-gif`). The scripts in `starter/` find it there automatically; set `SATVA_SKILL=/path/to/satva-guide-gif` if it lives elsewhere. ## Which document skill am I? | Skill | Produces | For whom | |---|---|---| | **`satva-guide-gif`** (this) | Guide `.pdf` + annotated shots + narrated GIF | End user operating a shipped feature | | `satva-doc` | Brief all-black Word `.doc` | Internal team: handover, "how we built it" | | `feature-launch-video` | Marketing / launch video (MP4) | Prospects and customers | Rule of thumb: this skill documents what the software **does** (after it works). If the feature does not run locally yet, you are in the wrong skill. ## Rules that matter - **Never film a third party's UI.** OAuth consent screens, vendor dashboards, editors: ripple the cursor over the button, then cut to a neutral illustration page (`examples/approve.html`, `examples/editor.html`) that says it is an illustration. - **Never put a real secret in a shot.** Use a seeded demo tenant with fake tokens — never productio