# Goal

Set up this computer so an AI coding assistant can build a scroll-animated website: a short video is cut into still frames, and the website shows those frames one by one as the visitor scrolls. When you finish, the human has FFmpeg working, the free frontend-design skill from Anthropic available, and an empty project folder ready for their video.

# Rules for you (the AI)

- Detect the operating system first (macOS, Windows or Linux) and use only the commands for that system.
- Check whether each tool is already installed before installing it. If it is, say so and skip that step.
- Never overwrite existing files, folders or settings without asking the human first.
- Everything in this setup is free. If anything you are about to do would cost money, stop and ask.
- Ask the human only for things only they can do (for example, approving an install prompt or typing their computer password).
- If a step fails, stop and explain the error in plain words. Do not guess or try random fixes.

# Steps

## 1. FFmpeg (free tool that cuts video into pictures)

Check:

```
ffmpeg -version
```

If it is missing, install it:

- macOS (needs Homebrew; if `brew` is missing, ask the human before installing Homebrew from https://brew.sh):
  ```
  brew install ffmpeg
  ```
- Windows:
  ```
  winget install --id Gyan.FFmpeg -e
  ```
  Then tell the human to close and reopen the terminal so `ffmpeg` is found.
- Linux (Debian or Ubuntu):
  ```
  sudo apt-get update && sudo apt-get install -y ffmpeg
  ```

Verify: `ffmpeg -version` prints a version number.

## 2. The frontend-design skill (free, from Anthropic)

This skill gives design guidance so the website does not look like a basic template.

- If you are Claude Code: download the skill file into your skills folder. If `SKILL.md` already exists there, ask before replacing it. This command also creates the folder:
  - macOS or Linux:
    ```
    curl -fsSL --create-dirs https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md -o ~/.claude/skills/frontend-design/SKILL.md
    ```
  - Windows (PowerShell; type `curl.exe`, not `curl`):
    ```
    curl.exe -fsSL --create-dirs https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md -o "$HOME\.claude\skills\frontend-design\SKILL.md"
    ```
  Then tell the human to restart Claude Code once, so it picks up the new skill.
- If you are a different AI assistant: download the same file into the project folder (step 3) as `design-guidelines.md`, and read it before building any web page there.

Verify: the file exists and its first lines include `name: frontend-design`.

## 3. Project folder

Ask the human where to create the project. If they have no preference, create a folder called `my-animated-site` on their Desktop. Tell them to put their video inside it, named exactly `video.mp4` (or tell you the real file name).

# Final check

Make a 5-second test video, cut it into frames, and confirm the frames exist, then delete the test files. First create an empty folder called `test-frames` (use the right command for this system), then run:

```
ffmpeg -y -f lavfi -i testsrc=duration=5:size=1280x720:rate=24 test.mp4
ffmpeg -y -i test.mp4 -vf "fps=24" -q:v 5 test-frames/frame_%03d.jpg
```

Count the files in `test-frames` (there should be about 120). If they are there, say "Setup is complete", delete `test.mp4` and `test-frames`, and tell the human: put your video in the project folder, open your AI assistant inside that folder, and paste the build prompt from the resource page.

# Cost

- FFmpeg: free.
- frontend-design skill: free.
- Google Flow (for the product photos and video): a clean video usually takes several tries, so a paid plan helps.
- Netlify (to put the site online): free for small sites like this.
- The AI assistant itself: Claude Code needs a paid Claude plan. Free alternatives exist, with usage limits.