03 — Stack & montage A → Z

La stack technique réelle, l’outillage posé au démarrage, et la checklist de bout en bout. Référence stack = Naka (projet le plus à jour) — toujours relire le package.json du projet le plus récent, ne pas écrire la stack de mémoire.

1. Stack technique (dépendances — référence Naka)

Brique	Version	Rôle
Next.js	16.2.x	Framework (App Router, RSC). ⚠️ Next 16 = breaking changes vs training data → lire `node_modules/next/dist/docs/` avant de coder (cf. `AGENTS.md`).
React	19.2.x	UI
TypeScript	5	Typage strict
Tailwind CSS	v4 (+ `@tailwindcss/postcss`)	Styles. Tokens via `@theme`. Zéro hex en composant. Pièges v4 → `01-methode-design §5`.
GSAP	3.15 + `@gsap/react` 2.1	Animations. `useGSAP()`, ScrollTrigger pour reveals/scrub.
Lenis (optionnel)	1.3	Smooth scroll — PAS par défaut. Ajouté au cas par cas (cool sur Naka, pas universel). Si utilisé : tout overlay scrollable → `data-lenis-prevent` + `overscroll-contain`.
next/font	(Next)	Polices self-hostées. ⚠️ police CJK = bloat (~1100 @font-face) → self-host le subset latin via Fontsource + `next/font/local`.
Playwright	1.60 (dev)	Scripts internes : QA/Lighthouse + mesures. (≠ le Playwright MCP du §2)
agentation	3.0 (dev)	Feedback visuel d’Adrien (clic → output structuré).
Node	≥ 20	Runtime build (pin via `.nvmrc` + `engines`).
Scripts	`dev`/`build`/`start`/`lint`/`qa`	`qa` = passe pré-handoff (`scripts/qa.mjs`).

Ajoutés plus tard (pas au scaffold) : Sanity (au gel structure + contenu) ; formulaires tiers (Brevo/Formspree). Détail → 08 et 04.

Export statique : output: 'export'. Pré-requis = aucun SSR/server action/ISR runtime. Sinon → host Node (Vercel).

2. Outillage posé au scaffold (kit de base, d’office)

Au-delà des libs (§1), on câble d’office — c’est la mise en place, pas une re-liste de deps :

Playwright MCP (chromium, scope user) — contrôle navigateur pour disséquer les réfs (distinct du npm playwright de §1). Déjà en scope user (persiste partout). --browser chromium obligatoire (Adrien = Brave).
agentation montée — wrapper client dans layout.tsx, masqué en prod.
GridOverlay (dev only) — 12 colonnes numérotées par-dessus tout, toggle touche G. Charte-agnostique.
Toolkit __songe (scripts/dissect.browser.js) — topology()/dissect()/snap()/fold(). Marche sur la réf ET le local.
⭐ Page /lab (dev only, noindex) — réunit tout le kit UI du futur site (boutons, échelle typo, cards, eyebrow, blocs types). On l’expérimente là → base validée réutilisée sur l’ensemble du site. À monter en début de build.
Routine QA npm run qa — avant « tu peux rafraîchir » : tsc + charte-lint (bouton ad hoc, letter-spacing positif, PNG) + scan placeholders/TODO copy + calage grille & fold.
Fondation : tokens charte + PRODUCT.md/DESIGN.md ; baseline maintenance (.nvmrc, engines, dependabot.yml, MAINTENANCE.md → 09).

3. Skills par moment

Moment	Skills
Shape visuel	`impeccable shape`, `frontend-design`, MCP `magic`, `imagegen-frontend-web`
Réf à cloner	`songe-clone-reference` (réflexe dès qu’une URL/template est donnée)
Build foundation	`vercel-react-best-practices`, `tailwind`, `design-system`
Polish	`impeccable live`, `make-interfaces-feel-better`
Animation	`gsap`, `waapi`, `lottie`, `three`
Copy	`copywriting`, `ogilvy-copywriting`, `stop-slop`, `humanizer`
Avant livraison	`/security-pass`, `seo-audit`

4. Stack par type de projet

Type	Stack
Vitrine / brand éditorial (le standard)	Next.js export statique + Sanity + Cloudflare Pages + GSAP/WAAPI (+ Lenis si smooth scroll voulu)
Portfolio artiste low-cost	Next.js static + Sanity + o2switch
Landing one-page multilingue	Astro + TS + i18n
App / dashboard / SaaS	Next.js + Supabase + Tailwind (+ shadcn via MCP `magic`)

(Webflow = héritage situationnel, plus le défaut : on construit en code.)

5. Checklist de montage A → Z

⭐ Arborescence (octopus.do) : construire le sitemap, le montrer et le faire VALIDER par le client. C’est la 1re étape — elle fige les pages (ajustements à ce moment) et fournit une première copy client sur laquelle s’appuyer. On ne lance le build du projet entier qu’une fois l’arbo validée.
Cadrage : charte chargée, dissection des réfs (songe-clone-reference), test plateforme, shape + mockups validés (3 versions d’UI si moyenne/faible → 01 §2/§7).
Scaffold : kit §2, globals.css tokens @theme, next/font, AGENTS.md, page /lab.
Build design en code : sections = composants partagés, bouton canonique, triplet eyebrow/titre, hero in-fold, reveals. (Méthode → 01.)
Copy : part de l’arbo validée (étape 1), enrichie — Notion (copy only) ou écrite par nous (skills). Rien en « TODO ». (→ 04.)
Pages internes : route group, templates factorisés, generateStaticParams/Metadata.
a11y / SEO / perf : focus-visible, JSON-LD, sitemap, noindex (gate), images optimisées, Lighthouse via qa. (→ 05, 06.)
Sécurité : /security-pass. (→ 07.)
CMS Sanity (au gel) : Adrien crée le projet, scaffold schémas/GROQ/Studio, dataset EU, webhook rebuild. (→ 08.)
Formulaires : Brevo/Formspree + anti-bot. (→ 04.)
Hébergement : Cloudflare Pages (compte client, Songe membre, Git auto-deploy). (→ 08.)
Propriété : comptes client (email de rôle), Songe garde repo + accès push. (→ 08.)
Mise en prod : NEXT_PUBLIC_INDEX=on, 301 depuis l’ancien site, smoke test.
Passation : doc + MAINTENANCE.md + mini-formation Sanity + creds remis. (→ 08, 09.)