rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b053fc720692a3378c49fb0537c775bc356baf7b
novi-lessons/v2-klasB/Les02-OpenCode/Les02-Slide-Overzicht.md

13 KiB
Raw Blame History

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:

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

Worktree plugin:

Next.js 16:

GSAP:

Lenis:

Reference in New Issue View Git Blame Copy Permalink