Wix Base44 Headless — templates complets par vertical

Cette skill livre un template d'app Base44 complet par vertical sous templates/<vertical>/. Au lieu de générer le frontend, l'agent copie le template et connecte les pièces : thématisation (un fichier tokens), configuration des credentials, câblage des routes, et seed en appelant des fonctions prêtes à l'emploi. Rien n'est régénéré — donc la construction est surtout des copies déterministes, pas du décodage.

Templates disponibles : storefront (Wix Stores), bookings (Wix Bookings). D'autres verticals arrivent au fil du temps ; si une vertical n'a pas de template ici, basculez sur la skill wix-vibe-headless (scaffolds par pièce + composants de référence) et sa fallback wix-docs.

Ce que chaque template livre (templates/<vertical>/)

src/rest/       utilitaires REST client (transport de visitor-token + helpers read/write de la vertical)
src/hooks/      hooks headless (données + logique de sélection ; pas de markup)
src/components/ composants neutres en thème, construits sur les hooks/utils (lisent uniquement theme.css tokens)
src/pages/      les pages commerce fonctionnelles (catalogue + détail) — les routes consomment les components/hooks
src/theme.css   LA surface de styling — tokens CSS-var que l'agent édite pour brandir toute l'app
seed/           module seed build-time (fonctions que l'agent appelle avec des données brutes)
TEMPLATE.md     les étapes de câblage exactes pour cette vertical (routes, provider, tokens, appel seed)

Certaines verticals ajoutent ce dont elles ont besoin : storefront livre src/context/CartContext.jsx (une <CartProvider>

• useCart() miroir du cart serveur Wix) ; bookings livre src/lib/format.js. La liste exacte des fichiers
• le câblage pour chaque vertical sont dans sa TEMPLATE.md — lisez d'abord ça.

Volontairement NON livré — vous construisez ça : la page d'accueil / landing, la nav du haut / header, et le layout global & storytelling de marque. Le template vous donne la machinerie commerce robuste et correcte (données, cart, PDP, checkout, seeding) et les pages fonctionnelles ; la surface marketing est vôtre à designer selon le brief. Voir étape 6.

Le flux (faites ça ; la TEMPLATE.md de la vertical a les spécificités)

1. Installez cette skill + copiez le template (un appel exec_tool, lancez-le tel quel). Installe la skill sous .agents/skills/ et copie le src/* de la vertical dans le src/ de l'app (dossiers préservés ; App.jsx intact). Mettez VERTICAL à votre vertical.

   const { execSync } = require('child_process');
   const { cpSync, existsSync, readdirSync } = require('fs');
   
   const VERTICAL = 'storefront';   // votre vertical: 'storefront' | 'bookings'
   
   // installer la skill (atterrit sous /app/.agents/skills/)
   const out = execSync('CI=1 npx -y skills add wix/skills/skills/wix-base44-headless --yes 2>&1',
     { cwd: '/app', timeout: 60000, shell: '/bin/bash' }).toString();
   
   // copier le template de la vertical dans src/ (récursif ; recouvre les dossiers, laisse App.jsx seul)
   const TPL = `/app/.agents/skills/wix-base44-headless/templates/${VERTICAL}/src`;
   if (!existsSync(TPL)) throw new Error(`no template for vertical "${VERTICAL}"`);
   cpSync(TPL, '/app/src', { recursive: true });
   
   return { installed: /installed|found/i.test(out), src: readdirSync('/app/src') };

   Le module seed/ n'est pas copié dans l'app — il est requis à la build depuis le chemin skill installé (étape 5).

2. Réglez les credentials dans un fichier — remplissez src/wix.config.json (WIX_CLIENT_ID + WIX_METASITE_ID, tous deux de votre prompt). Tout lit de là : le client (wix-client.js l'importe) et le seed build-time (require('/app/src/wix.config.json')). Ne codez en dur les ids nulle part ailleurs.

3. Thématisez par tokens uniquement — éditez src/theme.css à la marque (palette, typo, radius). Ne restylez PAS les JSX des composants — chaque composant lit ces tokens, donc les éditer re-skinne tout le site. C'est ce qui rend les composants copiés (rapides) au lieu d'une régénération.

4. Câblez routes + provider — ajoutez les pages du template au router et enrobez l'app dans le provider, exactement comme TEMPLATE.md le liste. Petites éditions find_replace dans App.jsx — jamais une réécriture (il porte l'échafaudage auth plateforme).

5. Seed — chargez le module seed/ de la vertical (build-time, via exec_tool) avec le snippet loader dans sa TEMPLATE.md — un require brut là peut retourner des exports vides, donc utilisez le snippet tel quel — et appelez ses fonctions avec des données brutes construites du brief + marque. Voir TEMPLATE.md et l'en-tête du module seed lui-même pour les appels exacts ; forme inattendue → la skill wix-docs.

6. Construisez la surface spécifique à l'app (c'est votre job créatif) — la page d'accueil / landing, la nav du haut/header, le layout global, l'imagerie et copy de marque, et toute page que le template n'inclut pas. Stylez-la depuis les mêmes tokens theme.css pour qu'elle corresponde aux pages du template. Tout ce que le template fournit, gardez-le et câblez-le — ne rebâtissez pas la machinerie commerce.

Règles dures

• Thématisez via tokens theme.css, jamais en réécrivant les composants. Un composant qui codifie en dur une couleur au lieu d'utiliser var(--…) est un bug — corrigez le token, pas le composant.
• N'utilisez PAS aucun kit/plugin/solution template intégré Base44 — ce template EST la construction.
• src/App.jsx : find_replace chirurgicale uniquement (câblage route + provider), jamais une réécriture complète.
• Les utilitaires REST client utilisent le WIX_CLIENT_ID public (visitor tokens, sûr frontend). Les appels admin/seed utilisent le token connector Wix à la build (voir le module seed).