novi-lessons/v2-klasB/Les02-OpenCode/Les02-Slide-Overzicht.md

# Les 2 — OpenCode Pro: Rules, Worktrees & Scroll Animations
## Slide Overzicht (Klas B — 2 uur, online)

**Bronnen-overzicht onderaan dit document.**

**Lesflow:** Theorie eerst in blokken, dan dedicated **Live Demo** momenten. Geen heen-en-weer geswitch.

---

## Slide 1: Title
### Les 2 — OpenCode Pro

**Visual:**
- Background: CREAM
- "Les 2" in BLUE
- "OpenCode Pro" in BLACK
- Subtitle: "Rules · Worktrees · Een scroll-animatie site bouwen"

**Bronnen:** [1]

---

## Slide 2: Terugblik
### Waar staan we?

**Content:**
- Les 1: kennismaking + leerlijn-opzet
- Iedereen kent ChatGPT en/of Claude (als chat)
- Eindopdracht: AI-app met Next.js + Supabase + Vercel AI SDK

**Vandaag:**
"Van AI als chat naar AI als coding-IDE. Met regels, config en parallel worktrees."

**Visual:** Chat-bubble → IDE icoon

---

## Slide 3: Planning
### Vandaag — 120 minuten

| Onderwerp | Duur |
|-----------|------|
| Welkom + Terugblik | 10 min |
| **Theorie 1** — Waarom OpenCode + kern features | 20 min |
| **Live Demo 1** — Desktop tour | 10 min |
| **Theorie 2** — AGENTS.md + config + plugin + stack + Vercel | 17 min |
| **Live Demo 2** — Setup + worktree + bouw + Vercel preview | 20 min |
| **Pauze** | 15 min |
| Lesopdracht: bouw scroll-sectie + preview | 28 min |
| Huiswerk + Afsluiting | (eind) |

**Visual:** Timeline met YELLOW pauze-rij + PINK demo-rijen

---

## Slide 4: Waarom OpenCode (en niet Cursor)?
### Alternatieven kennen is professioneel

**Iedereen kent Cursor. Wij beginnen bewust met OpenCode. Waarom?**

| | Cursor | OpenCode |
|---|--------|----------|
| Licentie | Commercieel ($20/mnd) | Open source (gratis) |
| Models | Eigen routing | Direct: OpenAI, Anthropic, Google, Groq, Ollama |
| Lock-in | Hoog | Geen |
| Scriptable | Beperkt | Volledig (CLI + plugins) |
| Lokale AI | ❌ | ✅ (via Ollama) |

**Belangrijke punten:**
- **Provider-keuze** — jij beslist welk model, niet de tool
- **Geen vendor lock-in** — past in een pro-toolchain
- **Concept is hetzelfde** — leer OpenCode goed, dan begrijp je Cursor + Claude Code ook
- **Onderdeel van leerlijn** — later kijken we naar Cursor; nu de open variant

**Belangrijk:** dit is **geen Cursor-bashing**. Cursor is uitstekend. We kiezen voor breedte: meerdere tools kennen > vasthangen aan één.

**Bronnen:** [1] [4]

---

## Slide 5: Wat is OpenCode?
### Een AI coding-IDE in twee smaken

**Content:**
- Open source · 60.000+ GitHub stars · door SST
- Werkt met elke provider: OpenAI, Anthropic, Google, Groq, Ollama
- Lokaal — code blijft op jouw machine

**Twee smaken:**

| Desktop (vandaag) | TUI (terminal) |
|-------------------|----------------|
| Visuele diff-viewer | Snel met keyboard |
| File tree + Sessions sidebar | Werkt over SSH |
| Multi-session parallel | Goed voor scripts / CI/CD |
| Sneller leren als je begint | Worktree plugin spawnt auto terminal |

**Vandaag:** Desktop. We tonen TUI **1 minuut** in Live Demo zodat je weet dat 't bestaat.

**Voor jouw eindopdracht: Desktop.**

**Bronnen:** [1] [2] [3] [5]

---

## Slide 6: Plan/Build/@explore + /init
### De vier dingen die je echt moet kennen

**Twee modes** (Tab om te wisselen):
- **plan** — read-only, denkt mee, wijzigt niks
- **build** — default, schrijft code, voert commands uit

**Sub-agents:**
- `@explore` — read-only verkenning (spaart tokens)
- `@general` — brede taak
- `@scout` — gerichte zoekopdracht

**`/init` commando** — eerste actie in elk nieuw project:
- Scant je repo
- Stelt vragen
- Schrijft/update je `AGENTS.md`

**Best practice:**
> Plan eerst. Lees mee. Geef feedback. Tab → Build.

**Bronnen:** [6] [7] [8]

---

## Slide 7: LIVE DEMO 1 — Desktop Tour
### Wat je nu gaat zien (~10 min)

**Setup:** OpenCode Desktop open op een leeg Next.js project.

**Wat ik laat zien:**
1. **TUI 1 minuut** — `opencode` in terminal, snelle Tab/exit. "Hetzelfde, maar terminal-only."
2. **Desktop UI tour** — file tree, chat panel, diff viewer, Sessions sidebar
3. **Plan mode** — vraag `analyseer dit project`, zie dat niks wijzigt
4. **Tab → Build mode** — vraag iets simpels, zie diff
5. **`@explore`** — `@explore wat zit er in deze repo?` — aparte context
6. **`/init`** — laat AGENTS.md genereren

**Visual:** Mockup van Desktop layout met annotaties. PINK badge "LIVE DEMO".

---

## Slide 8: AGENTS.md — Projectregels
### De officiële OpenCode standaard

**Wat is AGENTS.md?**
Markdown in project-root dat OpenCode automatisch in elke context laadt. Officieel format — alternatief voor Cursor's `.cursorrules`.

**Twee locaties:**
- `./AGENTS.md` — per project (in repo)
- `~/.config/opencode/AGENTS.md` — globaal voor alle projecten

**Externe regels referencen:**
```
@rules/styling.md
@rules/security.md
```

**Hoe te maken:**
- Handmatig schrijven, OF
- `/init` in OpenCode — scant repo, stelt vragen, genereert

**Tip:** schrijf concrete regels die je AI kan controleren. "Gebruik clean code" werkt niet. "useGSAP alleen, geen useEffect" wel.

**Bronnen:** [9]

---

## Slide 9: opencode.json — Config
### Model · Permissies · Plugins

**Locaties:**
- `./opencode.json` — per project
- `~/.config/opencode/opencode.json` — globaal

**Basis:**
```json
{
  "$schema": "https://opencode.ai/config.json",
  "model": "openai/gpt-4o-mini"
}
```

**Permissies (uit officiele docs):**
```json
{
  "permission": {
    "bash": { "*": "ask", "git *": "allow", "rm *": "deny" },
    "edit": { "*": "deny", "app/**/*.tsx": "allow" }
  }
}
```

Drie levels: `allow` · `ask` · `deny`. Glob patterns voor bash én files.

**Bronnen:** [10] [11]

---

## Slide 10: opencode-worktree Plugin
### Auto-magisch worktrees aanmaken

**Wat doet het?**
Plugin van **kdcokenny**. Geeft de agent twee tools:
- `worktree_create` — branch + worktree
- `worktree_delete` — commit + cleanup

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

**Desktop workflow:**
1. In main session: "Maak worktree feature-hero"
2. Plugin maakt worktree-folder
3. Klik **+ New Session** → **Open Folder** → kies worktree
4. Parallel agents in sidebar

**Bronnen:** [12] [13]

---

## Slide 11: Demo Stack — Next.js 16 + GSAP + Lenis
### De stack voor high-end scroll storytelling

**Stack:**
- **Next.js 16** App Router + TypeScript (Turbopack default)
- **TailwindCSS**
- **GSAP 3.15** + `@gsap/react` — sinds 2025 100% gratis (ScrollTrigger, SplitText)
- **Lenis 1.3** (`lenis/react`) — door Darkroom Engineering

**Waarom deze combinatie?**

Dit is dé stack waarmee award-winning scroll-storytelling sites gebouwd worden.
Niet "een" optie — **de** standaard op pro-niveau.

**Wie gebruikt dit?**
- Apple product pages (GSAP scroll animaties)
- Stripe, OpenAI marketing — beide GSAP-based
- Awwwards / FWA winnaars — bijna altijd GSAP
- Studios: **Active Theory**, **Locomotive**, **Resn**, **Darkroom Engineering** (makers van Lenis zelf)

**Waarom niet Framer Motion?**
- Framer Motion is uitstekend voor **app UI** (modals, transities, micro-interacties)
- GSAP heeft betere timing-precisie en GPU-optimalisaties voor **scroll storytelling**
- Voor jouw eindopdracht (een site die "wow" doet bij scrollen): GSAP

**Next.js 16 detail:**
- `cookies()`, `headers()`, `params`, `searchParams` zijn **async** — altijd `await`

**Bronnen:** [14] [15] [16] [17] [18] [19]

---

## Slide 12: Onze AGENTS.md
### Regels voor het scroll-animatie project

```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"`)
- useGSAP(() => {}, { scope: ref }) — nooit useEffect voor GSAP
- 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
```

**De `## Why this stack` sectie** geeft de agent context. Hij snapt nu
*waarom* deze keuzes — en stelt voor dezelfde redenen geen Framer Motion voor.

**Bronnen:** [14] [15] [19]

---

## Slide 13: Vercel + Preview Deployments
### Feature branches = automatische preview URLs

**Het idee:**
Elke push naar GitHub → Vercel maakt automatisch een **unieke preview URL** voor die branch. Geen handmatige deploys, geen "stuur me een screenshot".

**Setup (eenmalig per project):**
1. `npx vercel link` — koppelt repo aan Vercel project (of via dashboard)
2. Git remote staat → Vercel installeert eigen GitHub App
3. Klaar — elke `git push` triggert deploy

**Hoe het werkt:**
| Branch | Wat krijgt Vercel? | URL |
|--------|-------------------|-----|
| `main` | Production deploy | `jouw-app.vercel.app` |
| `feature-hero` | Preview deploy | `jouw-app-git-feature-hero-jij.vercel.app` |
| `feature-gallery` | Preview deploy | `jouw-app-git-feature-gallery-jij.vercel.app` |

**Waarom dit goud is voor scroll-storytelling:**
- Stuur preview URL naar designers/stakeholders per feature
- Vergelijk verschillende secties side-by-side
- Geen "het werkt op mijn machine"
- Comment in PR direct met working URL

**Combinatie met onze worktrees:**
- 1 worktree = 1 branch = 1 Vercel preview
- 3 features parallel = 3 live previews

**Bronnen:** [20] [21]

---

## Slide 14: LIVE DEMO 2 — Setup + Worktree + Vercel preview
### Wat je nu gaat zien (~20 min)

**Wat ik laat zien:**
1. **AGENTS.md** invullen met onze projectregels
2. **opencode.json** maken met permissions
3. Tonen dat `rm -rf` geblokkeerd wordt
4. **`ocx` + worktree plugin** verifiëren (was al klaar)
5. Via prompt: **worktree feature-hero** aanmaken
6. **+ New Session** → openen op worktree-folder
7. **SmoothScroll wrapper** laten bouwen — agent volgt AGENTS.md
8. **`git push origin feature-hero`** vanuit worktree
9. Open Vercel dashboard → toon **preview URL** verschijnt automatisch
10. Open preview URL → scroll-animatie werkt live

**Visual:** Mockup Sessions sidebar + Vercel preview URL. PINK badge "LIVE DEMO".

---

## Slide 15: Pauze
### Pauze!

**Visual:** "Pauze" groot, "15 minuten"

---

## Slide 16: Lesopdracht
### Bouw een scroll-sectie + preview — 28 minuten

**Setup (al klaar in starter):**
- Next.js 16 starter
- AGENTS.md, opencode.json, plugin
- GSAP + Lenis geïnstalleerd
- SmoothScroll wrapper bestaat al

**Jouw taak:**
0. Fork starter naar **jouw** GitHub + `vercel link`
1. `/init` runnen — check AGENTS.md
2. Vraag agent: maak worktree voor jouw feature
3. Open de worktree in nieuwe Sessions tab
4. Plan-mode → review → Tab → Build
5. Test lokaal op `npm run dev`
6. `git push origin <jouw-branch>` — Vercel deployt automatisch
7. Open preview URL → animatie werkt live → plak in chat

> **Niet klaar in de les?** Geen probleem — je werkt thuis in dezelfde fork
> verder. Het huiswerk bouwt voort op dit punt.

**Sectie keuze:** hero (SplitText) · features-grid (stagger) · testimonials (horizontaal) · gallery (parallax)

---

## Slide 17: Huiswerk
### Bouw verder in je les-repo

**Voor volgende week:**
Doorbouwen in dezelfde fork als in de les — eerst sectie 1 afmaken (indien nog niet), dan 2-3 extra secties tot een **kleine landing page** met 3-4 scroll secties.

**Eisen:**
- [ ] Eigen `AGENTS.md` (onze mag als basis)
- [ ] `opencode.json` met permissions
- [ ] **2+ worktrees** gebruikt (Sessions sidebar)
- [ ] **3 verschillende scroll-animaties**
- [ ] Lenis smooth scroll
- [ ] **Vercel gekoppeld** — main = productie, branches = previews
- [ ] `WORKFLOW.md` reflectie (max 400 woorden) met **screenshots van preview URLs per feature**

**Lever in:** GitHub URL + Production URL + minstens **2 preview URLs** (per worktree-branch) + screenshot `git worktree list`

**Bonus:** Eigen sub-agent · MCP server (context7) · Lighthouse 90+

---

## Slide 18: Afsluiting
### Volgende les — Introductie Cursor

**Vandaag gedaan:**
- Waarom OpenCode (vs Cursor)
- Plan/Build/@explore/`/init`
- AGENTS.md + opencode.json
- opencode-worktree plugin via ocx
- Live: Next.js 16 + GSAP + Lenis scroll-site
- Parallel agents via Sessions sidebar
- Vercel preview deployments per branch

**Volgende keer — Cursor:**
- De commerciele tegenhanger van OpenCode
- Cursor rules vs AGENTS.md
- Composer, Tab-completion, @-references
- Wanneer kies je welke tool?

**Vragen? Feedback?**

---

## Slide Summary

| # | Title | Type | Bronnen |
|---|-------|------|---------|
| 1 | Title | Opening | [1] |
| 2 | Terugblik | Intro | — |
| 3 | Plan | Intro | — |
| 4 | Waarom OpenCode | Theorie | [1] [4] |
| 5 | Wat is OpenCode | Theorie | [1] [2] [3] [5] |
| 6 | Plan/Build/@explore | Theorie | [6] [7] [8] |
| 7 | **LIVE DEMO 1** | Demo | — |
| 8 | AGENTS.md | Theorie | [9] |
| 9 | opencode.json | Theorie | [10] [11] |
| 10 | Worktree plugin | Theorie | [12] [13] |
| 11 | Demo stack | Theorie | [14]–[18] |
| 12 | Onze AGENTS.md | Theorie | [14] [15] [19] |
| 13 | Vercel preview deployments | Theorie | [20] [21] |
| 14 | **LIVE DEMO 2** | Demo | — |
| 15 | Pauze | Break | — |
| 16 | Lesopdracht | Praktijk | alle |
| 17 | Huiswerk | Praktijk | alle |
| 18 | Afsluiting | Closing | — |

---

## Bronnen

**OpenCode (officieel):**
- [1] OpenCode hoofdsite — https://opencode.ai
- [2] OpenCode Download (Desktop) — https://opencode.ai/download
- [3] OpenCode docs — https://opencode.ai/docs/
- [4] OpenCode GitHub (sst) — https://github.com/sst/opencode
- [5] DeepWiki: Desktop Applications — https://deepwiki.com/sst/opencode/6.7-desktop-applications
- [6] Modes (plan/build) — https://opencode.ai/docs/modes/
- [7] Agents (sub-agents) — https://opencode.ai/docs/agents/
- [8] Commands (slash) — https://opencode.ai/docs/commands/
- [9] Rules (AGENTS.md) — https://opencode.ai/docs/rules/
- [10] Config — https://opencode.ai/docs/config/
- [11] Permissions — https://opencode.ai/docs/permissions/

**Worktree plugin:**
- [12] opencode-worktree — https://github.com/kdcokenny/opencode-worktree
- [13] ocx (extension manager) — https://github.com/kdcokenny/ocx

**Next.js 16:**
- [14] Next.js 16 blog — https://nextjs.org/blog/next-16
- [15] Upgrading to v16 — https://nextjs.org/docs/app/guides/upgrading/version-16

**GSAP:**
- [16] GSAP docs v3 — https://gsap.com/docs/v3/
- [17] GSAP React (useGSAP) — https://gsap.com/resources/React/
- [18] GSAP License (gratis sinds 2025) — https://gsap.com/standard-license

**Lenis:**
- [19] Lenis GitHub — https://github.com/darkroomengineering/lenis

**Vercel:**
- [20] Vercel Preview Deployments — https://vercel.com/docs/deployments/preview-deployments
- [21] Vercel + Git Integration — https://vercel.com/docs/git