rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
novi-lessons/v2-klasB/Les02-OpenCode/Les02-Docenttekst.md
Tim Rijkse 634789e615 fix: add les 11
2026-05-19 18:50:11 +02:00

21 KiB
Raw Permalink Blame History

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

2. ocx + worktree plugin

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

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"

# GitHub remote (maak repo eerst via gh CLI of dashboard)
gh repo create scroll-demo --public --source=. --remote=origin --push

# Vercel CLI + koppelen + eerste deploy
npm i -g vercel
vercel link        # koppelt repo aan een Vercel project
vercel             # eerste deploy naar productie URL

Check: open Vercel dashboard → project bestaat → productie-URL werkt. Open GitHub → repo staat er → Vercel preview comment in PR werkt.

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: 
    git worktree remove ~/.local/share/opencode/worktree/scroll-demo/feature-test

5. Browser tabs open

6. Backup plan

Als plugin live faalt:

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 + config + plugin + stack + Vercel (17 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 — 2 min

Vertel: "Hier zie je onze concrete regels voor dit project. Let op de structuur:

  • Why this stack — context voor de agent
  • 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."

Slide 13 — Vercel + Preview Deployments — 3 min

Vertel: "Laatste theorie-stuk voor we gaan demoen. Hoe sluiten we onze worktree-workflow goed af? Met Vercel preview deployments.

Het idee: je hoeft niet handmatig te deployen. Elke git push triggert Vercel om automatisch een deploy te maken. En het mooie — voor élke branch krijg je een eigen unieke URL.

  • Push naar main → productie URL (jouw-app.vercel.app)
  • Push naar feature-hero → preview URL (jouw-app-git-feature-hero-jij.vercel.app)
  • Push naar feature-gallery → andere preview URL

Stel je voor: je werkt aan een hero-sectie. Je pusht naar je feature-branch. Twee minuten later heb je een live URL die je naar je designer kunt sturen voor feedback. Geen 'het werkt op mijn machine'. Geen screenshots. Live.

Voor scroll-storytelling is dit goud — animaties moet je zien om over te oordelen. Preview URLs maken die feedback-loop razend snel."

Setup (kort uitleggen — komt zo in demo):

  • npx vercel link koppelt je repo aan een Vercel project
  • Vercel installeert eigen GitHub app
  • Vanaf nu: elke push = deploy

Combinatie met onze workflow: "En hier komt 't mooi samen: 1 worktree = 1 branch = 1 Vercel preview. Drie features parallel? Drie live preview URLs. Verschillende stakeholders kunnen verschillende features tegelijk reviewen."

Demo aankondiging: "In Live Demo 2 ga ik niet alleen onze SmoothScroll bouwen, maar ook pushen naar de feature-branch en zien dat Vercel automatisch een preview URL maakt."

Blok 5 — LIVE DEMO 2: Setup + Worktree + SmoothScroll + Vercel preview (20 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:
# 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:
{
  "$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."

Stap 6 — Push naar feature-branch + Vercel preview (4 min)

Pre-setup check: repo is al gekoppeld aan Vercel (deed je vóór de les). Open Vercel dashboard naast OpenCode op je scherm.

In de feature-hero Session:

  • Type in chat: Commit deze wijzigingen en push naar de feature-hero branch.
  • Of typ zelf in ingebouwde terminal: 
    git add .
git commit -m "feat: SmoothScroll wrapper"
git push origin feature-hero
  • Wacht 5-10 seconden

Switch naar Vercel dashboard:

  • Refresh — zie je nieuwe deploy verschijnen voor feature-hero branch
  • Status: "Building" → "Ready" (duurt ~30-60 sec)
  • Klik op de deploy → toon preview URL (iets als jouw-app-git-feature-hero-jij.vercel.app)

Open de preview URL:

  • Laat zien: ja, het werkt live
  • Scroll erdoorheen — smooth scroll werkt
  • "Deze URL is publiek, je kunt 'm nu doorsturen naar een designer of stakeholder."

Vertel: "Zie wat hier gebeurde:

  • Lokaal: ik bouwde een feature met OpenCode
  • Push: één commando
  • Vercel: automatische deploy, eigen URL voor deze branch
  • Designer/PM: kan reviewen zonder Git of localhost
  • Iedere nieuwe push naar deze branch overschrijft deze URL

En als ik nu een tweede worktree maak voor 'feature-gallery'? Krijgt die zijn eigen preview URL. Drie features parallel = drie live previews. Dat is professionele scroll-storytelling workflow."

Optioneel — toon git workflow visueel:

  • Open GitHub in browser
  • Toon de feature-hero branch op repo
  • Toon Vercel comment in PR (als er een PR is) met preview URL

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:

Plugin:

Stack:

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)
Reference in New Issue View Git Blame Copy Permalink