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:

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

Permissies (uit officiele docs):

{
  "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:

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

# 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