Les 2 Klas B — OpenCode Pro met AGENTS.md, worktrees & GSAP/Lenis
This commit is contained in:
188
v2-klasB/Les02-OpenCode/Les02-Lesopdracht.md
Normal file
188
v2-klasB/Les02-OpenCode/Les02-Lesopdracht.md
Normal file
@@ -0,0 +1,188 @@
|
||||
# Les 2 — Lesopdracht
|
||||
## Bouw een scroll-animatie sectie in een worktree
|
||||
|
||||
**Vak:** AI-Assisted Development
|
||||
**Opleiding:** NOVI Hogeschool Utrecht
|
||||
**Duur:** 35 minuten (in de les)
|
||||
**Inleveren:** niet — je code uit deze opdracht is je basis voor het huiswerk
|
||||
|
||||
---
|
||||
|
||||
## Doel
|
||||
|
||||
Bouw één scroll-animatie sectie in een Next.js 16 project, met:
|
||||
- OpenCode **Desktop** (met onze AGENTS.md geladen)
|
||||
- Een eigen worktree (via plugin of handmatig)
|
||||
- Een nieuwe Sessions tab voor die worktree
|
||||
- GSAP + Lenis
|
||||
- TailwindCSS voor styling
|
||||
|
||||
Het hoeft niet groot — een werkende sectie van 1-2 schermen is genoeg.
|
||||
|
||||
---
|
||||
|
||||
## Vereisten (al opgezet vóór de les)
|
||||
|
||||
In je `scroll-demo` repo staat al:
|
||||
- Next.js 15 starter (App Router, TypeScript, Tailwind)
|
||||
- `AGENTS.md` met onze regels
|
||||
- `opencode.json` met permissions
|
||||
- `npm install`-ed: `gsap`, `@gsap/react`, `lenis`
|
||||
- `components/SmoothScroll.tsx` wrapper (klassikaal gebouwd)
|
||||
|
||||
Geen scroll-demo repo? Vraag in chat, of clone: `git clone <link uit Brightspace>`
|
||||
|
||||
---
|
||||
|
||||
## Wat moet er staan?
|
||||
|
||||
- [ ] Eigen **worktree** + branch voor jouw sectie
|
||||
- [ ] OpenCode draait in die worktree
|
||||
- [ ] Een **werkende scroll-animatie sectie** (kies één type — zie suggesties)
|
||||
- [ ] Volgt de regels uit `AGENTS.md` (geen Framer Motion, `useGSAP`, scope, etc.)
|
||||
- [ ] **Commit + push** naar je branch
|
||||
|
||||
---
|
||||
|
||||
## Stappenplan
|
||||
|
||||
### Stap 1 — Worktree aanmaken (3 min)
|
||||
|
||||
**Met opencode-worktree plugin** (in main Session):
|
||||
|
||||
```
|
||||
Maak een worktree voor feature-mijn-sectie (kies een naam, bv. feature-hero).
|
||||
```
|
||||
|
||||
De agent roept `worktree_create` aan. De worktree-folder wordt gemaakt op `~/.local/share/opencode/worktree/scroll-demo/feature-hero/`.
|
||||
|
||||
**Daarna in Desktop:**
|
||||
1. Klik **+ New Session** linksboven in de Sessions sidebar
|
||||
2. Kies **Open Folder** → navigeer naar de worktree-folder
|
||||
3. Nieuwe Session opent met eigen chat-context — main blijft beschikbaar in sidebar
|
||||
|
||||
**Of handmatig** (als plugin niet werkt):
|
||||
|
||||
```bash
|
||||
git worktree add ../scroll-demo-hero -b feature-hero
|
||||
```
|
||||
Dan in Desktop: **+ New Session → Open Folder → ../scroll-demo-hero**.
|
||||
|
||||
### Stap 2 — Sectie kiezen (2 min)
|
||||
|
||||
Kies één van deze:
|
||||
|
||||
| Type | Wat | Moeilijkheid |
|
||||
|------|-----|--------------|
|
||||
| **Hero met SplitText reveal** | Tekst die letter-voor-letter verschijnt op scroll | ⭐⭐ |
|
||||
| **Features grid stagger** | 3-koloms grid die in-fade'd, staggered | ⭐ |
|
||||
| **Testimonials horizontaal** | Horizontale scroll-sectie met cards (pin) | ⭐⭐⭐ |
|
||||
| **Gallery met parallax** | Afbeeldingen die parallax-en bij scroll | ⭐⭐ |
|
||||
| **Stats counter** | Cijfers die optellen wanneer in beeld | ⭐⭐ |
|
||||
|
||||
### Stap 3 — Plan-mode (5 min)
|
||||
|
||||
In opencode (start in plan-mode of `Tab` om te wisselen):
|
||||
|
||||
> Plan een [type sectie] component die voldoet aan de regels in AGENTS.md. Toon me het plan: welke files maak je, welke GSAP API gebruik je, hoe sync je met Lenis?
|
||||
|
||||
Lees het plan. Stel vragen / geef feedback. Niet meteen op Tab naar build.
|
||||
|
||||
### Stap 4 — Build-mode (15 min)
|
||||
|
||||
`Tab` → build. Geef commando:
|
||||
|
||||
> Bouw de geplande sectie. Plaats hem in components/ en importeer in app/page.tsx zodat ik 'm direct kan testen.
|
||||
|
||||
Laat het bouwen. Lees mee. Stel correcties als iets ingaat tegen AGENTS.md.
|
||||
|
||||
### Stap 5 — Testen (5 min)
|
||||
|
||||
In de worktree:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open `http://localhost:3000`. Scroll. Check:
|
||||
- Smooth scroll werkt (Lenis)
|
||||
- Jouw animatie triggered op het juiste moment
|
||||
- Geen console errors
|
||||
- Geen hydration mismatch
|
||||
|
||||
Werkt het niet? Vraag opencode om te debuggen.
|
||||
|
||||
### Stap 6 — Commit + push (3 min)
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "feat: [jouw sectie]"
|
||||
git push origin [jouw branch]
|
||||
```
|
||||
|
||||
### Stap 7 — (Optioneel) Cleanup
|
||||
|
||||
Klaar met deze worktree? In de main Session:
|
||||
|
||||
> Sluit de feature-X worktree en merge naar main.
|
||||
|
||||
Of handmatig:
|
||||
|
||||
```bash
|
||||
git worktree remove ~/.local/share/opencode/worktree/scroll-demo/feature-hero
|
||||
cd ~/scroll-demo
|
||||
git merge feature-hero
|
||||
```
|
||||
|
||||
Sluit ook de feature-Session in Desktop (right-click → Close).
|
||||
|
||||
---
|
||||
|
||||
## Veelvoorkomende problemen
|
||||
|
||||
| Probleem | Oplossing |
|
||||
|----------|-----------|
|
||||
| `useGSAP is not a function` | `npm install @gsap/react` |
|
||||
| Hydration mismatch warning | `"use client"` mist of `useEffect` voor GSAP code |
|
||||
| Lenis import error | Niet `@studio-freight/lenis` — gebruik `lenis` package |
|
||||
| ScrollTrigger niks doet | `gsap.registerPlugin(ScrollTrigger)` boven in file |
|
||||
| Geen smooth scroll | `SmoothScroll` wrapper mist in `app/layout.tsx` |
|
||||
| Plugin niet beschikbaar | `ocx list` om te checken, evt. `ocx add` opnieuw |
|
||||
| Worktree-tool niet bekend | Plugin niet correct geïnstalleerd of opencode niet herstart |
|
||||
| `gsap.context is not a function` | Oude versie — `npm i gsap@latest @gsap/react@latest` |
|
||||
| `params is not iterable` / `Cannot read params` | Next.js 16: gebruik `const { id } = await params` (async!) |
|
||||
|
||||
---
|
||||
|
||||
## Klaar zijn = je hebt:
|
||||
|
||||
1. Een werkende **scroll-animatie sectie** in je app
|
||||
2. Gebruik gemaakt van **OpenCode + worktrees**
|
||||
3. De **regels uit AGENTS.md** gevolgd
|
||||
4. **Smooth scroll** werkend via Lenis
|
||||
|
||||
Deze code is je basis voor het huiswerk — daar bouw je 'm uit naar een complete landing page.
|
||||
|
||||
---
|
||||
|
||||
## Voorbeelden van prompts die werken
|
||||
|
||||
**Goed:**
|
||||
- "Plan een hero sectie met SplitText reveal. 1 lange koptekst, 1 paragraaf. Lees AGENTS.md eerst."
|
||||
- "Bouw een features grid van 3 cards die fade-in'en met stagger 0.15 wanneer de sectie 80% in beeld is."
|
||||
- "Voeg een horizontale scroll sectie toe met 5 cards. Gebruik pin: true en scrub: 1."
|
||||
|
||||
**Te vaag (krijg je rommel):**
|
||||
- "Maak iets met scroll."
|
||||
- "Voeg animaties toe."
|
||||
- "Maak het mooi."
|
||||
|
||||
**Tip:** wees specifiek over wat én volg de patterns uit AGENTS.md. Hoe specifieker, hoe beter.
|
||||
|
||||
---
|
||||
|
||||
## Reflectievragen (1 min, niet inleveren)
|
||||
|
||||
- Werkt OpenCode anders met goede AGENTS.md dan zonder?
|
||||
- Voelde plan-mode → build flow natuurlijker?
|
||||
- Waar zou je worktrees morgen gebruiken op je eigen project?
|
||||
Reference in New Issue
Block a user