Les 2 Klas B — OpenCode Pro met AGENTS.md, worktrees & GSAP/Lenis

2026-05-18 14:30:00 +02:00
parent 0393976b23
commit b053fc7206
10 changed files with 2506 additions and 0 deletions
--- a/v2-klasB/Les02-OpenCode/Les02-Slide-Overzicht.md
+++ b/v2-klasB/Les02-OpenCode/Les02-Slide-Overzicht.md
@@ -0,0 +1,441 @@
+# 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 + opencode.json + plugin + stack | 15 min |
+| **Live Demo 2** — Setup + worktree + bouw SmoothScroll | 15 min |
+| **Pauze** | 15 min |
+| Lesopdracht: bouw scroll-sectie | 35 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: LIVE DEMO 2 — Setup + Worktree + SmoothScroll
+### Wat je nu gaat zien (~15 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** installeren (was al klaar — kort tonen)
+5. Via prompt: **worktree feature-hero** aanmaken
+6. **+ New Session** → openen op worktree-folder
+7. In feature-hero: **SmoothScroll wrapper** laten bouwen
+8. Bewijs dat **AGENTS.md regels gevolgd worden** (useGSAP, geen Framer Motion, etc.)
+
+**Visual:** Mockup Sessions sidebar + diff-viewer. PINK badge "LIVE DEMO".
+
+---
+
+## Slide 14: Pauze
+### Pauze!
+
+**Visual:** "Pauze" groot, "15 minuten"
+
+---
+
+## Slide 15: Lesopdracht
+### Bouw een scroll-sectie — 35 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:**
+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 op `npm run dev`
+6. Commit + push
+
+**Sectie keuze:** hero (SplitText) · features-grid (stagger) · testimonials (horizontaal) · gallery (parallax)
+
+---
+
+## Slide 16: Huiswerk
+### Bouw je eigen scroll-animatie site
+
+**Voor volgende week:**
+Bouw 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
+- [ ] Deploy op Vercel
+- [ ] `WORKFLOW.md` reflectie (max 400 woorden)
+
+**Lever in:** GitHub URL + Vercel URL + screenshot van `git worktree list`
+
+**Bonus:** Eigen sub-agent · MCP server (context7) · Lighthouse 90+
+
+---
+
+## Slide 17: 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
+
+**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 | **LIVE DEMO 2** | Demo | — |
+| 14 | Pauze | Break | — |
+| 15 | Lesopdracht | Praktijk | alle |
+| 16 | Huiswerk | Praktijk | alle |
+| 17 | 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