setup

# Setup The user is probably not a developer. You run every command; never ask them to type in a terminal. Say what's happening in plain words ("downloading the app code, about a minute"), not command output. ## 1. Get the repo onto the computer If you're **not** already inside a clone of `BuilderIO/agent-native-product-visuals` (no `package.json` named `agent-native-product-visuals` in the current folder), the user pasted the link from somewhere else: 1. Pick a home: `~/Documents/agent-native-product-visuals` unless the user names another place. If that folder exists and is already this repo, use it; if it exists and is something else, ask. 2. `git clone https://github.com/BuilderIO/agent-native-product-visuals ~/Documents/agent-native-product-visuals` - If git is missing, on a Mac run `xcode-select --install` and tell the user a system window will ask them to install developer tools; wait for them. - The repo is public, so no GitHub account is needed. If the clone fails, check the internet connection and try again. 3. Work from that folder for the rest of the session. In Claude Code, tell the user that next time they should open Claude Code **in that folder** so the skills load automatically. ## 2. Check the computer Run `node --version`. It must be 22 or newer. If Node is missing or older, explain that this needs a free tool called Node.js and point them to the "LTS" installer at https://nodejs.org. Wait, then check again. ## 3. Install Run `npm run setup`. It installs this repo's packages, downloads the agent-native code into `.agent-native/` (a few hundred MB, about a minute), and fetches the browser used for rendering. It's safe to run again. Never install packages inside `.agent-native/`. ## 4. Prove it works Run `npm run shot -- clips-meeting-summary`, open `out/screenshots/clips-meeting-summary/hero-light.png` and look at it. Show the user the folder (`open out/screenshots/clips-meeting-summary` on a Mac). ## 5. Tell them how to use it One short message: > You're set up. Ask me for things like: > - "A screenshot of the Analytics app showing a revenue dashboard, light and dark." > - "A square screenshot of Slides generating a pitch deck, for LinkedIn." > - "A 10-second video of Clips turning a meeting into notes." > > Images land in `out/screenshots/`, videos in `out/videos/`. The app code refreshes itself every two days. ## Done when `npm run setup` finished without errors, the test screenshot rendered and you looked at it, and the user knows what to ask for.