# Les 2 — OpenCode Pro: Rules, Worktrees & Scroll Animations
## Docenttekst + Docenthandleiding (Klas B — 2 uur, online)

**Les:** 2 van 18
**Duur:** 120 minuten online
**Vorige les:** Les 1 — Introductie AI Developer leerlijn

---

## Leerdoelen
- Begrijpen waarom we OpenCode kiezen i.p.v. Cursor (multi-provider, open source, alternatieven)
- OpenCode Desktop kunnen draaien met Plan/Build/@explore/init
- `AGENTS.md` regelbestand schrijven (officieel format)
- `opencode.json` config met permissions
- `opencode-worktree` plugin via `ocx` installeren
- Parallel agents via Sessions sidebar
- Live: Next.js 16 + GSAP + Lenis scroll-site opzetten

---

## Lesflow

**Geen heen-en-weer switchen.** De les is opgedeeld in:
- **Theorie 1** — uninterrupted uitleg (slides 4-6)
- **Live Demo 1** — alle features tonen achter elkaar (slide 7)
- **Theorie 2** — uninterrupted uitleg (slides 8-12)
- **Live Demo 2** — setup + bouw SmoothScroll (slide 13)
- Pauze
- Lesopdracht

---

# DEEL 1 — Docenthandleiding (volg dit live tijdens de les)

## VÓÓR DE LES — Setup (30 min)

### 1. OpenCode Desktop

- Download van https://opencode.ai/download
- Installeer
- Log in met OpenAI key (uit Brightspace)

### 2. `ocx` + worktree plugin

```bash
curl -fsSL https://kdco.dev/ocx/install.sh | sh
ocx add kdco/worktree --from https://registry.kdco.dev
```

Sluit en open OpenCode opnieuw zodat plugin geladen wordt.

### 3. Demo-repo aanmaken

```bash
cd ~
npx create-next-app@latest scroll-demo \
  --typescript --tailwind --app --eslint --no-src-dir --turbopack
cd scroll-demo
npm install gsap @gsap/react lenis
git init
git add .
git commit -m "init: next 16 + gsap + lenis"
```

### 4. Test je setup

- Open OpenCode Desktop → File → Open Folder → `~/scroll-demo`
- Type in chat: `Wat is de stack?` → moet Next.js 16 + Tailwind herkennen
- Type `/init` en abort (Esc) — alleen testen dat 't werkt
- Maak test-worktree om plugin te valideren:
  ```
  Maak een testworktree feature-test
  ```
- Klik **+ New Session** linksboven, open folder van die worktree
- Sluit Session, verwijder worktree:
  ```bash
  git worktree remove ~/.local/share/opencode/worktree/scroll-demo/feature-test
  ```

### 5. Browser tabs open

- https://opencode.ai/download
- https://opencode.ai/docs/rules/
- https://gsap.com/resources/React/
- https://github.com/kdcokenny/opencode-worktree

### 6. Backup plan

Als plugin live faalt:
```bash
git worktree add ../scroll-demo-hero -b feature-hero
```
Dan handmatig nieuwe Session → Open Folder.

---

## TIJDENS DE LES

### Blok 1 — Welkom + Terugblik (10 min)

**Slides 1, 2, 3.**

- Start meeting
- Slide 2: vraag in chat: "Wie heeft tot nu toe alleen met chat (ChatGPT/Claude) gewerkt?"
- Slide 3: planning langslopen. **Benadruk** dat we eerst theorie geven, dan demo, dan weer theorie, dan demo. Geen heen-en-weer.

**Geen demo nodig in dit blok.**

---

### Blok 2 — THEORIE 1: Waarom OpenCode + Kern features (20 min)

**Slides 4, 5, 6. Achter elkaar, zonder switchen.**

#### Slide 4 — Waarom OpenCode (en niet Cursor) — 6 min

**Vertel:**
"Iedereen kent Cursor. Sommigen gebruiken het al. Goede tool. Waarom beginnen we dan met OpenCode?

Drie redenen.

**Eén — alternatieven kennen is professioneel.** Wie alleen Cursor kent, zit vast aan één tool. Een goede dev kent meerdere coding-assistenten en kiest per project.

**Twee — provider-keuze.** Cursor heeft eigen routing — jij hebt niet vol overzicht welk model wanneer wordt gebruikt. OpenCode is provider-agnostisch: OpenAI vandaag, Anthropic morgen, lokaal met Ollama als je dat wilt. Jij beslist.

**Drie — open source = geen lock-in.** Voor je eindopdracht en je carrière is dit relevant. Tools veranderen, abonnementen veranderen. Open source blijft beschikbaar.

Belangrijk: dit is **geen Cursor-bashing**. Cursor is uitstekend. We komen er later in de leerlijn op terug. Vandaag de open variant — dan kun je daarna zelf kiezen."

Loop tabel langs.

#### Slide 5 — Wat is OpenCode — 7 min

**Vertel:**
"OpenCode is een AI coding-IDE. 60.000+ GitHub stars. Gemaakt door SST. Werkt met elke provider — OpenAI, Anthropic, Google, Groq, of lokaal met Ollama.

Twee smaken: Desktop en TUI. Wij gebruiken Desktop. Waarom?
- Visuele diff-viewer (klik accept/reject)
- File tree links, Sessions sidebar
- Multiple sessies naast elkaar
- Sneller leren als je begint

De TUI bestaat ook. Goed voor SSH-servers, scripts, CI/CD. Ik laat 'm 1 minuut zien in de demo — daarna 100% Desktop."

Loop tabel langs.

#### Slide 6 — Plan/Build/@explore + /init — 7 min

**Vertel:**
"Vier dingen die je echt moet kennen.

**Modes** — twee modes, Tab om te wisselen:
- **plan** is read-only. Denkt mee, leest files, wijzigt niks. Goed voor verkenning en brainstorm.
- **build** is default. Schrijft code, voert commands uit.

**Sub-agents** — drie ingebouwde:
- `@explore` is read-only verkenning. Eigen context, spaart tokens.
- `@general` is brede taak.
- `@scout` is gerichte zoek.

**`/init` commando** — eerste actie in elk nieuw project. Scant je repo, stelt vragen, schrijft je `AGENTS.md`.

**Best practice:** plan eerst, lees mee, geef feedback, dan Tab → build. Dit voorkomt rommel.

Dat was de theorie. Nu zien jullie het live."

---

### Blok 3 — LIVE DEMO 1: Desktop Tour (10 min)

**Slide 7.**

**Setup vooraf:** OpenCode Desktop open op `~/scroll-demo`. Systeem-terminal open naast OpenCode voor de TUI-demo.

#### Stap 1 — TUI in 1 minuut (1 min)

- Switch naar systeem-terminal
- Type: `opencode`
- Toon kort de TUI met chat onderaan
- Type: `wat is de stack van dit project?` → krijg antwoord
- Druk **Tab** → switch naar plan mode → tab terug
- **Ctrl+D** om te sluiten

**Zeg:** "Dat was de TUI. Werkt prima. Vandaag verder met Desktop."

#### Stap 2 — Desktop UI tour (2 min)

- Switch naar Desktop
- Wijs aan:
  - **File tree** links (klik op `app/page.tsx` om te tonen)
  - **Chat panel** onderaan
  - **Diff viewer** in midden
  - **Sessions sidebar** (toon dat 't er is, leeg op één session na)
  - **Model selector** + **mode indicator** bovenin

**Zeg:** "Alles op één scherm. File tree, chat, diff. Veel makkelijker dan switchen tussen terminals."

#### Stap 3 — Plan mode demo (2 min)

- Onder in chat, check dat mode-badge op `build` staat
- Druk **Tab** → wisselt naar `plan`
- Type in chat: `analyseer dit project en stel verbeteringen voor`
- Wacht op antwoord
- **Zeg:** "Zie? Concrete voorstellen. Geen file wijzigingen. Veilig om los te laten."

#### Stap 4 — Build mode demo (2 min)

- Druk **Tab** → terug naar `build`
- Type: `voeg een comment bovenaan app/page.tsx toe met de tekst "scroll demo"`
- Toon diff in viewer — klik **Accept**
- Open `app/page.tsx` in file tree — comment staat er

**Zeg:** "Plan is denken, build is doen."

#### Stap 5 — @explore demo (1.5 min)

- Type in chat: `@explore wat is de folder structuur van dit project?`
- Toon dat het in eigen context werkt
- **Zeg:** "Read-only sub-agent. Spaart tokens, kan niks kapot maken."

#### Stap 6 — /init demo (1.5 min)

- Type: `/init`
- Beantwoord de vragen die OpenCode stelt (Next.js 16, GSAP, scroll-animaties)
- Wacht tot AGENTS.md gegenereerd is
- Open `AGENTS.md` in file tree — toon wat 't gegenereerd heeft
- **Zeg:** "Dit is een goede basis. Volgende blok: hoe we 'm aanvullen met onze regels."

---

### Blok 4 — THEORIE 2: AGENTS.md + opencode.json + plugin + stack (15 min)

**Slides 8, 9, 10, 11, 12. Achter elkaar, zonder switchen.**

#### Slide 8 — AGENTS.md — 3 min

**Vertel:**
"Belangrijkste concept van vandaag. `AGENTS.md` is **dé** manier om OpenCode jouw regels te geven. Officieel format, automatisch in elke context.

Twee locaties:
- `./AGENTS.md` in je repo — versioned, deelt met team
- `~/.config/opencode/AGENTS.md` — globaal, jouw persoonlijke voorkeuren

Externe regels mag je referencen met `@rules/styling.md` — agent laadt 'm lazy.

Tip: schrijf je AGENTS.md zoals je 'm aan een junior dev zou geven. Concreet, controleerbaar."

#### Slide 9 — opencode.json — 3 min

**Vertel:**
"Naast regels heb je config. Welk model, welke permissies, welke plugins.

`$schema` geeft autocomplete in je editor.
`model` is `provider/model-id`.

Belangrijkste is **permissions**. Drie levels: `allow`, `ask`, `deny`. Glob patterns voor bash én files.

Voor student-project: `bash.*` op `ask` is veilig — je reviewed elke shell command. Productie: alleen specifieke folders editable."

#### Slide 10 — Worktree plugin — 3 min

**Vertel:**
"Plugin van **kdcokenny** — community lid, ook achter `ocx` extension manager. Twee tools voor de agent:
- `worktree_create` — branch + worktree
- `worktree_delete` — commit + cleanup

Installatie via `ocx`. Restart na install.

Verschil TUI vs Desktop:
- TUI: plugin spawnt automatisch nieuw terminal venster
- Desktop: plugin maakt de worktree, jij opent 'm in nieuwe Sessions tab

Klein verschil, zelfde resultaat: parallel agents."

#### Slide 11 — Demo stack — 3 min

**Vertel:**
"De stack waarmee we vandaag bouwen — en waarom dit dé combinatie is voor scroll storytelling.

**Next.js 16** — uit oktober 2025. Belangrijkste verandering t.o.v. 15: `cookies()`, `headers()`, `params`, `searchParams` zijn allemaal async. Altijd `await`. Turbopack is default — snellere builds.

**GSAP 3.15** — sinds januari 2025 100% gratis, incl. ScrollTrigger en SplitText. Hét animatie-pakket op pro-niveau. Apple product pages, Stripe homepage, OpenAI marketing — allemaal GSAP. Award-winning sites op Awwwards en FWA: vrijwel altijd GSAP.

**Lenis 1.3** — door **Darkroom Engineering** (voorheen Studio Freight, een award-winning studio uit Brooklyn die zelf onder andere voor Studio Freight, Activision en Riot werkt). Beste smooth scroll lib. Integreert naadloos met GSAP ScrollTrigger.

**`@gsap/react`** — geeft je de officiele `useGSAP` hook. Drop-in voor useEffect met auto cleanup.

**Waarom niet Framer Motion?**
Framer Motion is uitstekend — voor app UI. Modals, page transitions, micro-interacties. Maar voor scroll storytelling (zoals jij gaat bouwen) wil je timing-precisie en GPU-optimalisaties die GSAP biedt en Framer Motion niet matcht. Pro-studios zoals **Active Theory**, **Locomotive**, **Resn**, **Darkroom Engineering** — allemaal GSAP-based.

Daarom staat in onze AGENTS.md: 'Geen Framer Motion'. Het is geen anti-Framer, het is pro-GSAP voor dit type werk."

#### Slide 12 — Onze AGENTS.md — 3 min

**Vertel:**
"Hier zie je onze concrete regels voor dit project. Let op de structuur:
- Stack — versies expliciet
- Hard rules — niet onderhandelbaar
- Patterns — hoe we organiseren
- Done — wat klaar betekent

Regels die opvallen:
- 'Geen Framer Motion' — voorkomt dat AI default naar 't bekendere
- 'useGSAP, nooit useEffect' — werkt met Strict Mode
- 'Lenis sync via gsap.ticker.add' — voorkomt jank
- 'await params in Next 16' — anders runtime error

Deze regels heb ik uit ervaring. In de volgende demo zet ik dit in, en zie je dat de AI ze volgt."

---

### Blok 5 — LIVE DEMO 2: Setup + Worktree + SmoothScroll (15 min)

**Slide 13.**

**Setup vooraf:** OpenCode Desktop nog open op `~/scroll-demo`. Plugin al geïnstalleerd.

#### Stap 1 — AGENTS.md vervangen (3 min)

- Open `AGENTS.md` in Desktop file tree
- Selecteer alles → vervang met content uit slide 12:

```markdown
# Project Rules

## Why this stack
High-end scroll storytelling site (Awwwards/FWA niveau).
GSAP + Lenis = pro standaard — Apple, Stripe, OpenAI, Active Theory,
Locomotive, Darkroom Engineering. Framer Motion is voor app UI, niet voor
scroll storytelling. Kies GSAP voor timing-precisie + GPU-perf.

## Stack
- Next.js 16 (App Router, TypeScript, Turbopack)
- TailwindCSS · GSAP 3.15+ (incl. ScrollTrigger, SplitText)
- Lenis 1.3+ (`lenis/react`)
- @gsap/react voor de useGSAP hook

## Hard rules
- Geen Framer Motion, react-spring, AOS
- Animaties altijd in Client Components (`"use client"`)
- Animatie-code in useGSAP(() => {}, { scope: ref })
- Nooit useEffect voor GSAP code
- Lenis sync: gsap.ticker.add met autoRaf: false
- Next 16: await params, await cookies(), await headers()

## Patterns
- Eén <SmoothScroll> wrapper in app/layout.tsx
- Tailwind voor layout; GSAP voor transform/opacity

## Done =
- Geen hydration warnings
- ScrollTrigger.refresh() na dynamische content
```

- Cmd+S
- Type in chat: `Lees AGENTS.md. Welke regels ga jij volgen, en waarom kiezen we deze stack?`
- Toon dat het ook de **why** uitlegt — niet alleen de regels napapegaait

#### Stap 2 — opencode.json maken (3 min)

- Right-click in file tree → New File → `opencode.json`
- Plak:

```json
{
  "$schema": "https://opencode.ai/config.json",
  "model": "openai/gpt-4o-mini",
  "permission": {
    "bash": {
      "*": "ask",
      "git *": "allow",
      "npm *": "allow",
      "rm *": "deny"
    }
  }
}
```

- Cmd+S
- Restart OpenCode (File → Reload Window)
- Type: `rm -rf node_modules` → toon dat 't blokkeert
- Type: `git status` → toon dat 't direct werkt
- **Zeg:** "Geen surprises meer."

#### Stap 3 — Worktree plugin in actie (3 min)

- Type: `Welke tools heb je beschikbaar?`
- Wijs aan: `worktree_create`, `worktree_delete` in lijst
- Type: `Maak een worktree feature-hero voor een hero-sectie.`
- Wacht tot plugin klaar is
- Klik **+ New Session** linksboven
- **Open Folder** → navigeer naar `~/.local/share/opencode/worktree/scroll-demo/feature-hero/`
- Nieuwe Session opent — toon dat 't naast main staat in sidebar

#### Stap 4 — SmoothScroll laten bouwen (5 min)

- In de **feature-hero** Session, type:
  ```
  Bouw een SmoothScroll wrapper component volgens AGENTS.md.
  Plaats in components/SmoothScroll.tsx en wrap children in app/layout.tsx.
  ```
- Wacht op diff
- **Wijs aan wat de regels volgen:**
  - `"use client"` bovenaan
  - `useGSAP` import (niet useEffect)
  - `gsap.ticker.add` met `autoRaf: false`
  - Geen Framer Motion of andere libs
- Klik **Accept**

#### Stap 5 — Bewijs van regels (1 min)

**Zeg:** "Zie je? Met goede AGENTS.md krijg je consistente output. Zonder zou de AI waarschijnlijk Framer Motion pakken of useEffect gebruiken. Schrijf je regels op, krijg je betrouwbare resultaten."

---

### Blok 6 — Pauze (15 min)

**Slide 14.**

Stuur in chat: "Terug over 15 minuten." Camera mag uit.

---

### Blok 7 — Lesopdracht (35 min)

**Slide 15.**

#### Briefing (3 min):

"Eigen worktree maken, sectie kiezen, bouwen. Plan eerst, dan Build."

Loop checklist op slide 15 langs.

#### Tijdens 30 min werken:

- Tim blijft in main meeting-room
- Breakout-rooms op verzoek
- Check in chat: "Wie heeft worktree? Type W." → "Wie ziet animatie? Type A."

#### Veelvoorkomende problemen:

| Probleem | Oplossing |
|----------|-----------|
| Plugin niet beschikbaar | `ocx list` om te checken |
| Worktree-tool onbekend | Desktop herstarten na ocx add |
| Sessions sidebar leeg | Klik `+ New Session` |
| `useGSAP is not a function` | `npm install @gsap/react` |
| Hydration mismatch | `"use client"` mist of `useEffect` ipv `useGSAP` |
| Lenis import error | Niet `@studio-freight/lenis`, maar `lenis` |
| ScrollTrigger niets | `gsap.registerPlugin(ScrollTrigger)` mist |
| Async params error Next 16 | `await params` toevoegen |

#### Check-in (~25 min in):

"Wie heeft werkende animatie? Type A in chat." Bij <50%: 5 min klassikaal debug.

---

### Blok 8 — Huiswerk + Afsluiting

**Slides 16, 17.**

- Loop huiswerk eisen langs
- "Volgende keer: **Introductie Cursor** — de commerciele tegenhanger. Cursor rules vs AGENTS.md, Composer, wanneer welke tool."
- Vragen + feedback

---

# DEEL 2 — Docenttekst (referentie per slide)

## Slide 4 — Waarom OpenCode

Vertel waarom **niet** Cursor:
- Cursor is goed maar commercieel ($20/mnd), eigen routing
- OpenCode is gratis (alleen API-kosten), open source, jij kiest model
- Voor je carriere: meerdere tools kennen > vasthangen aan één
- We komen later in leerlijn terug op Cursor — vandaag de open variant

## Slide 5 — Wat is OpenCode

Provider-agnostisch, scriptable, multi-instance. Twee smaken: Desktop (vandaag), TUI (kort tonen).

## Slide 6 — Plan/Build/@explore + /init

Tab voor mode switch. `@explore` voor verkenning. `/init` voor eerste AGENTS.md.

## Slide 8 — AGENTS.md

Officieel format. Automatisch in context. Concrete regels werken, vage regels niet.

## Slide 9 — opencode.json

Schema voor autocomplete. Model. Permissions (allow/ask/deny). Plugins.

## Slide 10 — Worktree plugin

Via ocx installeren. Twee tools voor agent. Desktop: nieuwe Session tab; TUI: auto terminal.

## Slide 11 — Stack

Next.js 16 (async params, Turbopack). GSAP gratis. Lenis door darkroomengineering. useGSAP hook.

## Slide 12 — Onze AGENTS.md

Concrete regels die voorkomen dat AI default naar bekende-maar-verkeerde keuzes (Framer Motion, useEffect).

---

## Bronnen voor studenten

**OpenCode:**
- Docs: https://opencode.ai/docs/
- Download: https://opencode.ai/download
- Rules: https://opencode.ai/docs/rules/
- Config: https://opencode.ai/docs/config/
- GitHub: https://github.com/sst/opencode

**Plugin:**
- opencode-worktree: https://github.com/kdcokenny/opencode-worktree
- ocx: https://github.com/kdcokenny/ocx

**Stack:**
- Next.js 16: https://nextjs.org/blog/next-16
- GSAP: https://gsap.com/docs/v3/
- GSAP React: https://gsap.com/resources/React/
- Lenis: https://github.com/darkroomengineering/lenis

---

## Backup-onderwerpen (als tijd over)

1. **Custom sub-agents** in `~/.config/opencode/`
2. **MCP servers** — context7 voor up-to-date library docs
3. **opencode-workspace plugin** (uitgebreidere variant)
4. **Cursor live laten zien** — vergelijken
5. **Ollama setup** voor lokale models (privacy)