Ghost commented

(Migrated from codeberg.org)

CODING AGENTS: READ THIS FIRST

This is a handoff bundle from Claude Design (claude.ai/design).

A user mocked up designs in HTML/CSS/JS using an AI design tool, then exported this bundle so a coding agent can implement the designs for real.

What you should do — IMPORTANT

Find the primary design file under topoquiz/project/ and read it top to bottom. Then follow its imports: open every file it pulls in (shared components, CSS, scripts) so you understand how the pieces fit together before you start implementing.

If anything is ambiguous, ask the user to confirm before you start implementing. It's much cheaper to clarify scope up front than to build the wrong thing.

About the design files

The design medium is HTML/CSS/JS — these are prototypes, not production code. Your job is to recreate them pixel-perfectly in whatever technology makes sense for the target codebase (React, Vue, native, whatever fits). Match the visual output; don't copy the prototype's internal structure unless it happens to fit.

Don't render these files in a browser or take screenshots unless the user asks you to. Everything you need — dimensions, colors, layout rules — is spelled out in the source. Read the HTML and CSS directly; a screenshot won't tell you anything they don't.

Bundle contents

topoquiz/README.md — this file
topoquiz/project/ — the Topoquiz project files (HTML prototypes, assets, components)

Topoquiz-handoff.zip

INSTRUCTIONS:

Read HANDOFF.md first. Then skim atlas.jsx, routekaart_extra.jsx, routekaart_handoff.jsx for exact styling.

Plan for a design overhaul. Seperate the visual changes to the current HTML and the technical work that we need to do:

Setup a Next.js 14 + Tailwind project, map the tokens into tailwind.config, load the three Google Fonts, then build the components in the order listed in §6. Build the mobile Home and Quiz screens first as the happy path — I'll review before you continue.

# CODING AGENTS: READ THIS FIRST This is a **handoff bundle** from Claude Design (claude.ai/design). A user mocked up designs in HTML/CSS/JS using an AI design tool, then exported this bundle so a coding agent can implement the designs for real. ## What you should do — IMPORTANT **Find the primary design file under `topoquiz/project/` and read it top to bottom.** Then **follow its imports**: open every file it pulls in (shared components, CSS, scripts) so you understand how the pieces fit together before you start implementing. **If anything is ambiguous, ask the user to confirm before you start implementing.** It's much cheaper to clarify scope up front than to build the wrong thing. ## About the design files The design medium is **HTML/CSS/JS** — these are prototypes, not production code. Your job is to **recreate them pixel-perfectly** in whatever technology makes sense for the target codebase (React, Vue, native, whatever fits). Match the visual output; don't copy the prototype's internal structure unless it happens to fit. **Don't render these files in a browser or take screenshots unless the user asks you to.** Everything you need — dimensions, colors, layout rules — is spelled out in the source. Read the HTML and CSS directly; a screenshot won't tell you anything they don't. ## Bundle contents - `topoquiz/README.md` — this file - `topoquiz/project/` — the `Topoquiz` project files (HTML prototypes, assets, components) [Topoquiz-handoff.zip](https://github.com/user-attachments/files/26932566/Topoquiz-handoff.zip) INSTRUCTIONS: Read HANDOFF.md first. Then skim atlas.jsx, routekaart_extra.jsx, routekaart_handoff.jsx for exact styling. Plan for a design overhaul. Seperate the visual changes to the current HTML and the technical work that we need to do: - Setup a Next.js 14 + Tailwind project, map the tokens into tailwind.config, load the three Google Fonts, then build the components in the order listed in §6. Build the mobile Home and Quiz screens first as the happy path — I'll review before you continue.

Ghost commented

2026-04-21 15:14:13 +02:00

(Migrated from codeberg.org)

Refinement gedaan: REFINE-89.md

Handoff doorgelezen + codebase-mapping gemaakt. Volledige analyse in REFINE-89.md (682 regels). Samenvatting:

Aanbeveling

Optie C uit §5 vraag 1: vanilla-redesign binnen huidige monoliet, bewust met tokens + CSS-variabelen + modulaire CSS, zodat toekomstige Next.js-migratie niet wordt uitgesloten. Niet het ticket letterlijk volgen (Next.js 14 + Tailwind) — dat kost 3–6 weken en breekt de 166 Playwright-tests + rsync-deploy + CF-preview, terwijl het visuele resultaat in ~2 weken binnen de monoliet haalbaar is.

Scope #89 strikt beperkt tot redesign van bestaande schermen. Nieuwe features (XP/Badges/Leaderboard/Onboarding) losgekoppeld in tracking-issue.

Werkbrokken (volgorde)

Nu starten zonder user-beslissing

#97 — tokens + CSS-variabelen + Google Fonts (1u)
#98 — CSS-extractie per scherm (3u, shared met #86)

Blocked op open vraag 1 (stack-decision Optie A/B/C)

#99 — visuele refresh Home + levelselect (2–3 dagen)
#101 — visuele refresh Quiz (3–4 dagen, blocked óók op vraag 4 copy-veiligheid)
#102 — End-scherm + Phase-transition (1–2 dagen)

Niet blocked op vraag 1

#103 — Feedback-modal + Settings-stub (1 dag)

Optioneel / afhankelijk

#100 — overworld-route SVG op Home (1 dag, depends on #99)
#105 — tablet-layout (0.5 dag, depends on #101)
#106 — desktop-dashboard (2 dagen, depends on #104)

Nieuwe features (buiten redesign)

#104 — tracking: Onboarding / XP / Badges / Leaderboard (losgekoppeld, eigen akkoord nodig)

Open vragen voor user (zie REFINE-89.md §5)

Stack: Optie A (Next.js) / B (pure vanilla refresh) / C (vanilla met nette tokens, aanbeveling) — blocker voor #99/#101/#102.
Features-scope: alleen redesign / redesign + nieuwe features / redesign + settings-stub (aanbeveling: alleen redesign; #104 los).
Mascot Piep: canonical of alternatief?
Copy: "SUPER EFFECTIVE"-phrasing houden of safer ("goed gedaan!")? — blocker voor #101.
SessionStorage-migratie: alleen relevant als #104 (XP) erbij komt.
Deploy-target: alleen relevant bij Optie A.
Design-iteratie-budget: hoe strikt pixel-perfect?

Eerste concrete stap

#97 + #98 kunnen parallel starten zonder verdere beslissingen — zero-risk, geen zichtbare verbetering, maar legt fundament.

## Refinement gedaan: REFINE-89.md Handoff doorgelezen + codebase-mapping gemaakt. Volledige analyse in REFINE-89.md (682 regels). Samenvatting: ### Aanbeveling **Optie C uit §5 vraag 1**: vanilla-redesign binnen huidige monoliet, bewust met tokens + CSS-variabelen + modulaire CSS, zodat toekomstige Next.js-migratie niet wordt uitgesloten. **Niet** het ticket letterlijk volgen (Next.js 14 + Tailwind) — dat kost 3–6 weken en breekt de 166 Playwright-tests + rsync-deploy + CF-preview, terwijl het visuele resultaat in ~2 weken binnen de monoliet haalbaar is. Scope #89 strikt beperkt tot **redesign van bestaande schermen**. Nieuwe features (XP/Badges/Leaderboard/Onboarding) losgekoppeld in tracking-issue. ### Werkbrokken (volgorde) #### Nu starten zonder user-beslissing - [ ] #97 — tokens + CSS-variabelen + Google Fonts *(1u)* - [ ] #98 — CSS-extractie per scherm *(3u, shared met #86)* #### Blocked op open vraag 1 (stack-decision Optie A/B/C) - [ ] #99 — visuele refresh Home + levelselect *(2–3 dagen)* - [ ] #101 — visuele refresh Quiz *(3–4 dagen, blocked óók op vraag 4 copy-veiligheid)* - [ ] #102 — End-scherm + Phase-transition *(1–2 dagen)* #### Niet blocked op vraag 1 - [ ] #103 — Feedback-modal + Settings-stub *(1 dag)* #### Optioneel / afhankelijk - [ ] #100 — overworld-route SVG op Home *(1 dag, depends on #99)* - [ ] #105 — tablet-layout *(0.5 dag, depends on #101)* - [ ] #106 — desktop-dashboard *(2 dagen, depends on #104)* #### Nieuwe features (buiten redesign) - [ ] #104 — tracking: Onboarding / XP / Badges / Leaderboard *(losgekoppeld, eigen akkoord nodig)* ### Open vragen voor user (zie REFINE-89.md §5) 1. **Stack**: Optie A (Next.js) / B (pure vanilla refresh) / C (vanilla met nette tokens, aanbeveling) — **blocker voor #99/#101/#102**. 2. **Features-scope**: alleen redesign / redesign + nieuwe features / redesign + settings-stub (aanbeveling: alleen redesign; #104 los). 3. **Mascot Piep**: canonical of alternatief? 4. **Copy**: "SUPER EFFECTIVE"-phrasing houden of safer ("goed gedaan!")? — **blocker voor #101**. 5. **SessionStorage-migratie**: alleen relevant als #104 (XP) erbij komt. 6. **Deploy-target**: alleen relevant bij Optie A. 7. **Design-iteratie-budget**: hoe strikt pixel-perfect? ### Eerste concrete stap #97 + #98 kunnen parallel starten zonder verdere beslissingen — zero-risk, geen zichtbare verbetering, maar legt fundament.

Ghost commented

2026-04-21 15:54:59 +02:00

(Migrated from codeberg.org)

1: C
2: Alleen redesign, andere ideeën capturen in issues
3: Ik snap je vraag niet
4: Design principle, alles in het nederlands, B1 taalniveau.
5. Eens dus als aparte issue opnemen randvoorwaardelijk voor die features
6. Nu niet relevant. Als optie voor ooit documenteren samen met de andere technische verbeteringen (next.js / tailwind)
7. Pixel-perfect is niet belangrijk, mag geïtereerd.

1: C 2: Alleen redesign, andere ideeën capturen in issues 3: Ik snap je vraag niet 4: Design principle, alles in het nederlands, B1 taalniveau. 5. Eens dus als aparte issue opnemen randvoorwaardelijk voor die features 6. Nu niet relevant. Als optie voor ooit documenteren samen met de andere technische verbeteringen (next.js / tailwind) 7. Pixel-perfect is niet belangrijk, mag geïtereerd.

Ghost commented

2026-04-21 15:56:16 +02:00

(Migrated from codeberg.org)

Verwerkt

1 (Stack) → C: vanilla + tokens + modulaire CSS. #99/#101/#102 unblocked.

2 (Scope) → redesign only; nieuwe features blijven gecaptured in losse issues (#104 staat al).

4 (Copy) → Design principle: alles Nederlands, B1-taalniveau. Dus:

❌ "SUPER EFFECTIVE" / "Pokédex" / "Ranking"
✅ "Goed gedaan!" / "Voortgang" / "Ranglijst"
→ #101 en #102 bodies bijgewerkt met deze copy-constraint.

5 (SessionStorage) → losgetrokken als #107: randvoorwaarde voor #104 (XP-subissue).

6 (Deploy-target + Next.js/Tailwind) → parkeren als tech-ideeën: #108 (future tech directions tracker).

7 (Pixel-perfect) → visueel trouw genoeg, iteratie mag. Scheelt tijd in #99/#101/#102.

Nog open — vraag 3 verduidelijken

Handoff introduceert Piep: pinguïn-mascotte met 6 expressies die in Home-header, quiz-dialog en end-scherm verschijnt. Bedoeling van vraag 3:

Wil je een mascotte introduceren? (ja/nee — is een bewuste brand-keuze, eenmaal erin zit ie overal)
Zo ja: naam "Piep" definitief? (designer-keuze, NL, B1-OK)
Zo ja: alternatieve companions (Pluis, Bolle — voor onboarding-keuze scherm 1 uit handoff) nu of later?

Zonder antwoord op 3 kan #99 (Home met Piep-avatar) en #101 (Quiz met Piep-dialog) niet starten. Default-suggestie: ja Piep, geen alternatieve companions (schrapt onboarding-companion-keuze uit #104).

## Verwerkt **1 (Stack)** → **C**: vanilla + tokens + modulaire CSS. #99/#101/#102 unblocked. **2 (Scope)** → redesign only; nieuwe features blijven gecaptured in losse issues (#104 staat al). **4 (Copy)** → **Design principle**: alles Nederlands, **B1-taalniveau**. Dus: - ❌ "SUPER EFFECTIVE" / "Pokédex" / "Ranking" - ✅ "Goed gedaan!" / "Voortgang" / "Ranglijst" - → #101 en #102 bodies bijgewerkt met deze copy-constraint. **5 (SessionStorage)** → losgetrokken als **#107**: randvoorwaarde voor #104 (XP-subissue). **6 (Deploy-target + Next.js/Tailwind)** → parkeren als tech-ideeën: **#108** (future tech directions tracker). **7 (Pixel-perfect)** → visueel trouw genoeg, iteratie mag. Scheelt tijd in #99/#101/#102. ## Nog open — vraag 3 verduidelijken Handoff introduceert **Piep**: pinguïn-mascotte met 6 expressies die in Home-header, quiz-dialog en end-scherm verschijnt. Bedoeling van vraag 3: - **Wil je een mascotte introduceren?** (ja/nee — is een bewuste brand-keuze, eenmaal erin zit ie overal) - Zo ja: **naam "Piep" definitief?** (designer-keuze, NL, B1-OK) - Zo ja: **alternatieve companions** (Pluis, Bolle — voor onboarding-keuze scherm 1 uit handoff) nu of later? Zonder antwoord op 3 kan #99 (Home met Piep-avatar) en #101 (Quiz met Piep-dialog) niet starten. Default-suggestie: **ja Piep, geen alternatieve companions** (schrapt onboarding-companion-keuze uit #104).

Ghost commented

2026-04-21 15:57:36 +02:00

(Migrated from codeberg.org)

Kunnen we de mascotte voor nu achterwege laten, en als feature toevoegen later? Als het later goed ingevoegd kan, dan nu weglaten en als issue opnemen.

Ghost commented

2026-04-21 15:59:21 +02:00

(Migrated from codeberg.org)

Vraag 3 → mascotte uit scope

Mascotte nu weglaten, later als losse feature invoegen. Nieuwe issue: #109.

Effect op redesign-werk

#99 Home — Piep-avatar in header vervalt; gewoon titel + group-switch zonder mascotte.
#101 Quiz — vraag-box zonder Piep; RkDialog-frame-styling blijft, content = alleen tekst.
#102 End — score-card zonder Piep-rating; badge-visual blijft decoratief.
#104 — sub-feature "Onboarding companion-keuze" vervalt (was Piep-afhankelijk).

Alle vragen beantwoord → starten

Blockers op #99/#101/#102/#103 zijn weg. Volgende stap: implementeer #97 + #98.

## Vraag 3 → mascotte uit scope Mascotte **nu weglaten**, later als losse feature invoegen. Nieuwe issue: **#109**. ### Effect op redesign-werk - #99 Home — Piep-avatar in header **vervalt**; gewoon titel + group-switch zonder mascotte. - #101 Quiz — vraag-box zonder Piep; `RkDialog`-frame-styling blijft, content = alleen tekst. - #102 End — score-card zonder Piep-rating; badge-visual blijft decoratief. - #104 — sub-feature "Onboarding companion-keuze" vervalt (was Piep-afhankelijk). ### Alle vragen beantwoord → starten Blockers op #99/#101/#102/#103 zijn weg. Volgende stap: implementeer #97 + #98.

Ghost commented

2026-04-22 13:14:44 +02:00

(Migrated from codeberg.org)

Status-refresh (2026-04-22) — child-issues:

Done (closed):

#97 CSS-tokens + variabelen
#98 Title-bar + hamburger
#99 Home-refresh (Brok 3)
#101 Quiz-scherm refresh
#102 End-scherm
#103 Phase-transition
#105 Tablet split-view

Open:

#100 Overworld-route SVG — blocked (optioneel, na #99 — nu niet geplanned)
#104 Nieuwe features tracker — tracker (XP/Badges/Onboarding, blocked op #107)
#106 Desktop-dashboard — blocked op #104
#109 Mascotte — blocked op volledige #89 completion

Dit issue blijft open als tracker: redesign-brokken die nog gepland kunnen worden (Brok 3b, Brok 9) hangen er onder. Wanneer #100 + #106 ook dicht zijn: closen.

Status-refresh (2026-04-22) — child-issues: **Done (closed):** - #97 CSS-tokens + variabelen - #98 Title-bar + hamburger - #99 Home-refresh (Brok 3) - #101 Quiz-scherm refresh - #102 End-scherm - #103 Phase-transition - #105 Tablet split-view **Open:** - #100 Overworld-route SVG — `blocked` (optioneel, na #99 — nu niet geplanned) - #104 Nieuwe features tracker — `tracker` (XP/Badges/Onboarding, blocked op #107) - #106 Desktop-dashboard — `blocked` op #104 - #109 Mascotte — `blocked` op volledige #89 completion Dit issue blijft open als **tracker**: redesign-brokken die nog gepland kunnen worden (Brok 3b, Brok 9) hangen er onder. Wanneer #100 + #106 ook dicht zijn: closen.

Rows
Columns

Design overhaul #89

CODING AGENTS: READ THIS FIRST

What you should do — IMPORTANT

About the design files

Bundle contents

Refinement gedaan: REFINE-89.md

Aanbeveling

Werkbrokken (volgorde)

Nu starten zonder user-beslissing

Blocked op open vraag 1 (stack-decision Optie A/B/C)

Niet blocked op vraag 1

Optioneel / afhankelijk

Nieuwe features (buiten redesign)

Open vragen voor user (zie REFINE-89.md §5)

Eerste concrete stap

Verwerkt

Nog open — vraag 3 verduidelijken

Vraag 3 → mascotte uit scope

Effect op redesign-werk

Alle vragen beantwoord → starten