annu-kute-ced/doc2sveltekit-transition/prompt-kimi-cli-transformation-oki.md

PROMPT KIMI CLI — Transformation de o-k-i.net en SvelteKit

Mode d'emploi : copie l'intégralité du bloc ci-dessous (entre les lignes ---) dans Kimi CLI, en joignant les deux documents de référence : recette-sveltekit-playbook-agent.md (la méthode) et charte-oki-design-system.md (la marque). Ajuste la section « Périmètre de cette session » selon ce que tu veux faire en une passe.

---

MISSION : Migrer o-k-i.net vers SvelteKit selon la recette et la charte OKI

Tu es un agent de code senior. Ta mission : reconstruire le site o-k-i.net (ORGANISATION KA INTERNATIONALE) en SvelteKit, en suivant à la lettre le playbook recette-sveltekit-playbook-agent.md (méthode, budgets, DoD) et la charte charte-oki-design-system.md (couleurs, typo, voix, iconographie — elle prime pour tout ce qui est marque).

1. Contexte du site existant (audit réel, juillet 2026)

Identité : association tech militante guadeloupéenne — « Le numérique au service de vos luttes ». Applis web sur mesure à tarifs solidaires pour associations, collectifs et organisations militantes. Positionnement souveraineté numérique : indépendance des GAFAM, logiciels libres, hébergement éthique. L'identité visuelle est afrofuturiste caribéenne : drapeau panafricain (noir/or/vert/rouge), thème sombre par défaut.

Écosystème lié (liens externes à préserver, ne pas migrer) :

• bokante.o-k-i.net → instance Mastodon
• gade.o-k-i.net → instance PeerTube
• mizik.o-k-i.net → instance Funkwhale
• niyaj.o-k-i.net → Nextcloud
• kute.o-k-i.net → application PHP maison
• labola.o-k-i.net → forge (code source public, dont celui du site)
• fediverse.o-k-i.net → portail fédivers
• pawol.nu + djangokam.pawol.nu + nyyoka.pawol.nu → paroles/traductions/karaokés (projet DJANGOKAM, artiste IA caribéen)

Stack actuelle mesurée : HTML statique + CSS vanilla (~44 KB) + 3 petits JS vanilla (main.js, theme.js, lang-redirect.js). Hébergement o2switch (mutualisé FR). Images via BunnyCDN (organisationka.b-cdn.net). Headers de sécurité exemplaires à conserver à l'identique ou renforcer : CSP default-src 'self' (+ style 'unsafe-inline' + fonts.googleapis.com), HSTS, X-Frame-Options: DENY, X-Content-Type-Options: nosniff, Referrer-Policy: strict-origin-when-cross-origin, Permissions-Policy restrictive.

Bugs et défauts de production confirmés (à corriger dans la migration) :

1. CRITIQUE — Toutes les images renvoient 403 (pull zone BunnyCDN cassée) : logo header, logos partenaires, portrait DJANGOKAM, pochettes, logos clients, og:image. Décision cible : self-héberger toutes les images dans static/images/ (AVIF/WebP générés au build via vite-imagetools), supprimer toute dépendance à BunnyCDN, retirer https://organisationka.b-cdn.net de la CSP.
2. Google Fonts chargé (fonts.googleapis.com + gstatic.com) alors que le site revendique l'indépendance des GAFAM → self-héberger Archivo (600-900) et Inter (400-800) en woff2, retirer les deux domaines de la CSP.
3. Aucun prefers-reduced-motion nulle part.
4. Iconographie 100 % emoji (✊🏿🔓🤝🏿🛡️💼🏛️) → set SVG conforme à la charte (angles nets, stroke 2 px, or sur noir).
5. Les 3 cards « publics » (Militants / Associations & Collectifs / Entreprises) apparaissent en double dans la page → une seule occurrence.
6. Lazy-loading d'images partiel (4/~14) → systématique hors LCP.

Contenu éditorial (conserver tel quel, sauf mention contraire) : one-page FR à ancres — Hero (« ORGANISATION KA INTERNATIONALE », 3 badges, 2 CTA) · Solutions ×3 publics · Projets web · Partenaires (Joukawouvè, Aktivist Vybz #AKV, cyber-mawonaj) · DJANGOKAM (artiste IA caribéen, lore Wanakaera/Karukera, liens pawol.nu, plateformes musicales, presse) · Mission + 4 valeurs (Engagement, Liberté, Solidarité, Souveraineté) · Développement web sur mesure · Clients (KA UBUNTU kaubuntu.com, KA UBUNTU Hub kaubuntu.re PWA, KBM kbm.gp) · Services hébergés (BOKANTE, GADE, NIYAJ, etc.) · FAQ « Qu'est-ce que le Ka ? » · CTA final + contact (kontak@o-k-i.net, WhatsApp, Telegram, Discord, forge) · footer avec mentions légales. Pages satellites : /dons/ (Stripe + Liberapay), /en/ (version anglaise complète), /mentions-legales/.

2. Exigences techniques

• SvelteKit + Svelte 5 runes + TypeScript, adapter-static (prerender intégral) — le site doit pouvoir être servi depuis o2switch en statique ou Cloudflare Pages, sans serveur Node.
• i18n FR/EN : FR par défaut, EN sur /en/ comme actuellement ; attributs lang corrects ; pas de lib lourde si un routage par dossier suffit.
• Thème sombre par défaut (identité de marque), thème clair en opt-in persisté en localStorage, appliqué sans FOUC via snippet dans app.html.
• Conserver toutes les URLs existantes (/, /dons/, /en/, /mentions-legales/, ancres #solutions #projets #partenaires #djangokam #hebergement #contact).
• Headers de sécurité : reproduire la CSP et les headers actuels (via _headers Cloudflare ou doc d'htaccess o2switch), en retirant les domaines devenus inutiles (Google Fonts, BunnyCDN).
• PWA légère : manifest + service worker de cache du shell (vite-plugin-pwa) — le site doit rester lisible hors-ligne.
• OpenGraph complet (10 balises actuelles) reconduit, og:image self-hébergée.
• Budgets du playbook §4 : JS initial ≤ 170 KB, page d'accueil ≤ 2 MB, Lighthouse mobile ≥ 90/95/95/95.

3. Motion & composants (sélection depuis la bibliothèque du playbook §5)

Applique la sélection suivante — pas plus, le site doit rester sobre :

1. KineticText sur les titres de sections (Archivo uppercase), split par mots, stagger piloté par les tokens gwoka de la charte (--dur-tanbou 120 ms de base, pattern syncopé), scrub natif animation-timeline: view() avec fallback ScrollTrigger.
2. ScrollProgressBar en haut de page, gradient or→vert de la charte.
3. PageTransition légère (View Transitions + fallback), durée --dur-mesure 480 ms.
4. Village écosystème : remplacer la grille de cards « Services hébergés » par une scène SVG isométrique « village créole » (case à ka = BOKANTE, karbay = GADE, silo nuage = NIYAJ, scène de musique = MIZIK…), chaque bâtiment = lien vers l'instance, hover/focus = liseré or + label. DOM/SVG uniquement, aucun WebGL (P3 du playbook). Fallback : grille de cards accessible pour reduced-motion/mobile étroit.
5. Flag-bar (signature marque, 4 segments francs 6 px) : sous la nav fixe + en haut du footer, jamais plus d'une occurrence visible par écran.
6. 404 designé en KA (texte créole + ka/tambour SVG), page hors-ligne PWA assortie.
7. CursorTracker : ne pas installer (audience mobile-dominante, ROI faible).
8. WebGL : aucun sur cette migration.

4. Périmètre de cette session

• Scaffold SvelteKit + tokens charte + thème sombre/clair + fonts self-hébergées
• Migration de la home complète (toutes sections, contenu FR repris à l'identique)
• Pages /dons, /mentions-legales, /en (structure, contenu EN repris)
• Composants motion §3 (KineticText, ScrollProgressBar, PageTransition, village SVG)
• 404 + page hors-ligne + manifest PWA
• Headers sécurité + _headers + doc déploiement (o2switch statique ET Cloudflare Pages)
• Rapport final : Lighthouse, poids par page, écarts éventuels avec ce brief

5. Critères d'acceptation

• La DoD du playbook §8 est intégralement vérifiée.
• Zéro requête vers un domaine tiers au chargement (vérifier l'onglet réseau) : ni Google, ni BunnyCDN, ni aucun CDN.
• Toutes les images présentes et optimisées (plus aucun 403, plus aucune image > 200 KB hors hero).
• Le contenu éditorial FR est repris à l'identique (aucune réécriture non demandée), hormis la déduplication des cards « publics ».
• La nav au clavier fonctionne sur tout le village SVG (chaque bâtiment focusable, label lisible).
• npm run build && npm run preview : zéro erreur, zéro warning a11y.

Commence par la Phase 1 du playbook (audit de confirmation du dépôt actuel) et présente-moi le plan avant d'écrire le moindre composant.