`, `<meta name=\"description\">`, `<link rel=\"canonical\">`. Les valeurs Next peuvent différer du TS si un layout enfant override.","Testez une URL par template (listing, fiche, hub). Complétez avec Rich Results Test si JSON-LD est couplé (voir checklist dédiée).","Exportez le tableau d’audit vers Notion pour suivi éditorial si des descriptions attendent validation client."]},{"heading":"Erreurs fréquentes","body":["Copier la même description sur toutes les fiches tutoriel « pour aller vite ».","Oublier `metadataBase` : canonicals relatifs incorrects en preview.","Title dynamique sans troncature : coupé brutalement dans les SERP.","Modifier metadata dans un Client Component : build error ou export ignoré.","Confondre og:title marketing et title SEO sans stratégie claire."]},{"heading":"Ce qu’il faut retenir","body":["Rule `seo-metadata.mdc` + liste routes indexables = audit reproductible.","Passage par hub, tableau avant diff, PR thématiques.","Une intention par URL ; validation view-source obligatoire.","Complément JSON-LD via checklist dédiée, pas de promesse de ranking."]}],"faq":[{"q":"Lier l’audit à Notion ou Airtable ?","a":"Exportez le tableau markdown généré par l’agent vers votre base éditoriale. Le suivi des validations client reste hors Cursor ; l’agent prépare le inventaire."},{"q":"generateMetadata async : l’agent gère-t-il les awaits ?","a":"Oui si vous @mentionnez le fichier. Rappelez dans la rule de ne pas fetch inutilement : préférez les données déjà chargées par la page quand c’est possible."},{"q":"Faut-il @codebase pour une revue SEO ?","a":"Préférez @folder par segment de routes. @codebase uniquement pour trouver des templates metadata dispersés (layouts nested profonds)."}],"sources":[{"label":"Google : Snippets","href":"https://developers.google.com/search/docs/appearance/snippet"},{"label":"Next.js : Metadata","href":"https://nextjs.org/docs/app/building-your-application/optimizing/metadata"},{"label":"Cursor : Rules","href":"https://cursor.com/docs/context/rules"}],"relatedTutorialSlugs":["seo-geo-checklist-metadata-json-ld"],"relatedExpertisePaths":["/expertises/developpement/nextjs"],"relatedMissionSlugs":[],"status":"published"},{"slug":"figma-handoff-dev-mode","title":"Handoff Figma Dev Mode pour équipe web","description":"Exploitez Figma Dev Mode pour un handoff fiable : inspection composants, tokens, assets et annotations. Guide designers et dev front en projet agence web.","h1":"Handoff dev : specs, export, Dev Mode","intro":"Un handoff flou génère des allers-retours coûteux : mauvaises couleurs, espacements inventés, assets manquants. Dev Mode dans Figma aligne design et développement sur les mêmes mesures, variables et composants documentés. Vous allez préparer le fichier, inspecter les specs et livrer avec annotations et revue structurée.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["design"],"tools":["figma"],"expertisePoles":["developpement"],"prerequisites":["Fichier Figma structuré (composants, auto-layout, styles)","Licence Figma incluant Dev Mode pour les développeurs concernés","Convention de nommage design system alignée avec le code (tokens CSS)"],"callouts":[{"kind":"tip","title":"Un frame = un état livrable","body":"Nommez les frames par route ou composant (« /contact — desktop », « CardProduct — hover »). Le dev retrouve l'écran sans interprétation."},{"kind":"warning","title":"Pas de hardcode hors tokens","body":"Si une couleur n'est pas liée à une variable Figma, le dev ne doit pas l'inventer : remontez l'écart au design avant intégration."},{"kind":"example","title":"Checklist handoff","body":"Variables publiées → composants documentés → assets exportables → notes Dev Mode → lien frame figé en « Ready for dev »."}],"sections":[{"heading":"Activer Dev Mode et préparer le fichier","body":["Passez en Dev Mode depuis la barre d'outils. Les développeurs voient dimensions, typo, couleurs liées aux variables et suggestions de code.","Organisez les pages : « {{icon:rocket}} Handoff », « {{icon:puzzle}} Design system », « {{icon:package}} Archive ». Seule la page Handoff est figée en fin de sprint.","Marquez les sections « Ready for dev » via le statut de section ou un préfixe dans le nom. Les frames en cours restent hors périmètre d'intégration."]},{"heading":"Inspecter composants, variables et assets","body":["Sélectionnez un composant : le panneau droit liste padding, gap auto-layout, border-radius et variables liées. Documentez les variantes (size, state) dans la description du master.","Configurez les export settings au niveau composant (SVG pour icônes, WebP/PNG 2x pour raster). Nom de fichier = slug cohérent (`icon-cart.svg`).","Pour le responsive, fournissez les breakpoints clés avec contraintes auto-layout explicites, pas seulement trois frames détachées."]},{"heading":"Annotations, tickets et revue handoff","body":["Utilisez les commentaires ou la Description pour les comportements non visuels : focus clavier, aria-label, états loading, délais d'animation.","Liez les frames aux tickets ClickUp ou issues GitHub. Cursor + Figma : le dev s'appuie sur Dev Mode et les tokens déjà mappés dans le repo.","Organisez une revue handoff (15 min) par lot : le dev partage écran en Dev Mode, le design valide ou corrige sur le vif."]},{"heading":"Erreurs fréquentes","body":["Frames non composants : impossible de maintenir la cohérence en intégration.","Couleurs en dur non liées aux variables : dette visuelle immédiate.","Oublier les états focus et erreur formulaire : recette accessibilité en échec.","Handoff sans version figée : le dev intègre une maquette modifiée en parallèle."]},{"heading":"Ce qu'il faut retenir","body":["Dev Mode + variables Figma = source de vérité pour les specs.","Frames nommées, statuts « Ready for dev », exports configurés.","Annotations pour le comportement, pas seulement le pixel.","Revue handoff courte : moins de rework en développement."]}],"faq":[{"q":"Dev Mode remplace-t-il Zeplin ou Avocode ?","a":"Pour la plupart des équipes déjà sur Figma, oui. L'essentiel est la discipline sur variables, composants et statuts de livraison, pas l'outil annexe."},{"q":"Comment gérer les mises à jour maquette en cours de sprint ?","a":"Figez un snapshot (branch Figma ou version history) par sprint. Les changements hors périmètre passent par un change request explicite."},{"q":"Faut-il un siège Figma full pour chaque développeur ?","a":"Dev Mode nécessite les droits adaptés selon votre plan. Vérifiez votre facturation avant d'onboarder toute l'équipe."}],"sources":[{"label":"Figma : Dev Mode","href":"https://www.figma.com/dev-mode/"},{"label":"Figma Help : Guide to Dev Mode","href":"https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode"},{"label":"Figma Help : Inspect designs","href":"https://help.figma.com/hc/en-us/articles/360039832894-Inspect-designs"}],"relatedTutorialSlugs":["cursor-setup-projet-rules"],"relatedExpertisePaths":["/expertises/developpement/site-web","/expertises/developpement/react"],"relatedMissionSlugs":["conservatoire-gradignan-charte"],"status":"published"},{"slug":"notion-wiki-handover-client","title":"Wiki Notion handover client post-livraison","description":"Wiki Notion de passation post-livraison : accès CMS, procédures éditoriales, support et runbook. Template agence web prêt à dupliquer pour vos projets.","h1":"Wiki handover client post-livraison","intro":"La mise en production n'est pas la fin du projet : sans handover structuré, le client ne sait pas mettre à jour une page, qui contacter en cas de panne, ou où trouver les identifiants. Un wiki Notion partagé centralise la passation et réduit les tickets « comment on fait déjà ? ».","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":4,"categories":["design","po-pm"],"tools":["notion"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Projet web livré ou en fin de recette","Compte Notion (client ou espace partagé agence)","Inventaire des accès, environnements et documentation technique existante","Template agence « Handover web » prêt à dupliquer"],"callouts":[{"kind":"tip","title":"Dupliquer un template agence","body":"Créez un template Notion interne « Handover web » et dupliquez-le par client. Seules les sections variables sont à personnaliser : URLs, contacts, stack."},{"kind":"warning","title":"Secrets hors Notion public","body":"Ne stockez pas de mots de passe en clair dans une page partagée large. Utilisez un coffre (1Password, Bitwarden) et liez la procédure d'accès."},{"kind":"example","title":"Plan type","body":"Sommaire → Vue d'ensemble projet → Guide éditeur (CMS) → Recette & QA → Support & SLA → Annexes (design, SEO, hébergement)."}],"sections":[{"heading":"Structurer l'arborescence du wiki","body":["Page racine « [Client] — Documentation site » avec sommaire cliquable. Section « Démarrage rapide » : URL prod, URL staging, qui contacter, délai de réponse support.","Section « Contenus et CMS » : créer une page, publier un article, gérer les médias, limites de l'éditeur. Captures annotées ou liens Loom.","Section « Technique (lecture) » : stack (Next.js, hébergeur), variables d'environnement sans valeurs, rollback, calendrier maintenance, lien runbook."]},{"heading":"Rédiger pour le client, pas pour les devs","body":["Vouvoiement cohérent avec la marque client. Phrases courtes, une action par paragraphe. Évitez le jargon non expliqué (SSR, webhook).","Chaque procédure suit : objectif → prérequis → étapes numérotées → « Si ça bloque ». Callouts Notion sur les actions irréversibles (cache prod, migration DB).","Liez maquettes Figma, ClickUp de recette et rapports accessibilité : le wiki est la porte d'entrée, pas l'unique source."]},{"heading":"Permissions, partage et maintenance","body":["Accès invité pour les éditeurs client (commentaire ou édition sur sous-pages CMS). Section technique en lecture seule ou réservée IT client.","Documentez la date de handover et la version du site (tag Git ou release) en en-tête du wiki.","Prévoyez une page « Changelog handover » et revoyez le wiki à chaque release majeure : captures valides, contacts à jour."]},{"heading":"Erreurs fréquentes","body":["Wiki livré le jour J sans walkthrough live : le client ne l'ouvre jamais.","Screenshots obsolètes dès la première évolution : perte de confiance.","Tout empiler dans une seule page longue : impossible à scanner.","Oublier les limites du contrat (périmètre support, heures incluses)."]},{"heading":"Ce qu'il faut retenir","body":["Template dupliqué + sections fixes = handover rapide et homogène.","Procédures actionnables pour les éditeurs ; technique en lecture contrôlée.","Secrets dans un coffre, pas dans Notion partagé largement.","Changelog et revue à chaque release pour garder le wiki vivant."]}],"faq":[{"q":"Faut-il privilégier Notion ou un PDF pour le handover ?","a":"Notion gagne pour la recherche, les mises à jour et les liens internes. Un PDF d'export peut servir de snapshot contractuel à la livraison."},{"q":"Où doit vivre le wiki : agence ou client ?","a":"Idéalement dans l'espace Notion du client pour la pérennité. L'agence peut co-administrer pendant la garantie puis transférer la propriété."},{"q":"Comment documenter le code dans le handover ?","a":"Le wiki client porte l'usage et l'exploitation. La doc développeur (README, ADR) reste dans le dépôt ; le wiki y renvoie en une ligne."}],"sources":[{"label":"Notion : Wikis","href":"https://www.notion.com/product/wikis"},{"label":"Notion Help : Wiki guides","href":"https://www.notion.com/help/guides/category/wiki"},{"label":"Notion Help : Sharing","href":"https://www.notion.com/help/sharing-and-permissions"}],"relatedTutorialSlugs":["workspace-clickup-projet-web","airtable-base-suivi-missions"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/gouvernance-projet","/expertises/developpement/site-web"],"relatedMissionSlugs":["conservatoire-gradignan-charte"],"status":"published"},{"slug":"airtable-vues-kanban-livraison","title":"Vues kanban Airtable pour la livraison web","description":"Configurez des vues kanban Airtable par statut jalon ou lot de livraison. Filtres, couleurs et pilotage agence — complément ClickUp pour PM et direction.","h1":"Piloter la livraison en kanban","intro":"Le kanban Airtable complète ClickUp pour une lecture direction des jalons et lots, sans noyer l’équipe dans le micro-tasking. Vous configurez colonnes par statut macro, filtres par client actif et champs visibles limités pour des comités rapides.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":4,"categories":["po-pm","design"],"tools":["airtable"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Table Jalons ou Projets avec champ Statut en single select","Statuts macro définis (cadrage, build, recette, livré)","Accord sur la frontière jalon vs. tâche ClickUp","Base suivi missions ou équivalent structuré"],"callouts":[{"kind":"tip","title":"Kanban = jalons, pas micro-tâches","body":"Limitez la vue aux lots de livraison ou jalons macro. Le détail reste dans ClickUp."},{"kind":"example","title":"Champs visibles carte","body":"Nom jalon, date cible, owner, client (couleur), indicateur retard."},{"kind":"warning","title":"Single select obligatoire","body":"Statut en texte libre empêche le groupement kanban fiable et casse les sync Make."}],"sections":[{"heading":"Créer la vue kanban","body":["Nouvelle vue Kanban sur table Jalons. Grouper par champ Statut macro. Ordre colonnes : cadrage → build → recette → livré.","Filtre : projet statut actif, client en cours. Masquez projets archivés pour alléger le board.","Couleurs cartes par client ou par type projet (refonte, e-commerce) pour repérage visuel en comité."]},{"heading":"Affiner filtres et champs","body":["Champs affichés sur carte : libellé, date cible, owner, formule « En retard ». Masquez notes internes et budget.","Vue dupliquée « Kanban [Client X] » : filtre client pour réunion client sans bruit des autres missions.","Épinglez la vue en favori pour les PM ; verrouillez la vue si éditeurs nombreux (option Airtable)."]},{"heading":"Sync statut avec ClickUp","body":["Si ClickUp est maître : Make Watch task list milestone → Update jalon Airtable statut. Champ ID ClickUp sur jalon pour idempotence.","Règle gouvernance : qui peut déplacer une carte kanban Airtable manuellement ? Idéalement PM seulement si sync active.","En l’absence de sync, kanban Airtable mis à jour en weekly review PM — pas en temps réel."]},{"heading":"Erreurs fréquentes","body":["Importer toutes les tâches ClickUp dans le kanban : board illisible.","Trop de colonnes statut : préférez 4–6 macro-statuts.","Dates non affichées sur cartes : retards invisibles jusqu’au comité.","Modifier statuts single select sans mettre à jour Make : sync cassée."]},{"heading":"Ce qu’il faut retenir","body":["Kanban jalons macro, filtres projet actif.","Cartes légères : nom, date, owner, retard.","ClickUp pour exécution ; sync Make optionnelle.","Single select statuts stable."]}],"faq":[{"q":"Kanban Airtable ou ClickUp Board : que choisir ?","a":"ClickUp pour l’exécution quotidienne ; Airtable kanban pour la vue direction consolidée multi-projets et reporting."},{"q":"Peut-on glisser-déposer pour changer le statut ?","a":"Oui en kanban Airtable si permissions édition. Avec sync Make, vérifiez que le déplacement manuel ne crée pas de conflit avec ClickUp maître."},{"q":"Y a-t-il une limite de cartes par colonne ?","a":"Pas de limite technique ; au-delà de ~30 jalons actifs par colonne, scindez par client ou utilisez filtres temporels."}],"sources":[{"label":"Airtable : View types","href":"https://support.airtable.com/docs/guide-to-view-types"},{"label":"Airtable : Kanban view","href":"https://support.airtable.com/docs/kanban-view-overview"}],"relatedTutorialSlugs":["airtable-base-suivi-missions","clickup-statuts-workflow-livraison"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/make"],"relatedMissionSlugs":[],"status":"published"},{"slug":"make-utm-vers-tableau-suivi","title":"Make : UTM vers tableau Airtable","description":"Capturez utm_source, medium, campaign et landing page vers Airtable via Make. Normalisation, lien CRM et recoupement GA4 pour le reporting marketing d’agence.","h1":"Tracer les UTM jusqu’au lead signé","intro":"GA4 suit le trafic, mais le marketing a besoin de relier chaque lead signé à sa campagne d’origine — souvent impossible si les UTM restent uniquement dans Analytics. Make capture les paramètres UTM à chaque conversion et les stocke dans une table Airtable dédiée, normalisée et reliée au CRM.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["seo-geo","ecommerce"],"tools":["make","airtable"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Convention UTM documentée (casing, nomenclature campagnes)","Table Airtable « Conversions » ou champs UTM sur table Leads","Formulaire transmettant utm_* en hidden fields ou query persistée","Accès GA4 pour recoupement optionnel (pas obligatoire au pipeline)"],"callouts":[{"kind":"tip","title":"Persister les UTM côté site","body":"Stockez les UTM en sessionStorage ou cookie first-party au premier hit, puis injectez-les dans les hidden fields — ils survivent à la navigation interne."},{"kind":"warning","title":"Casing strict","body":"`LinkedIn` et `linkedin` créent deux lignes Airtable. Normalisez en lowercase dans un module Set variables Make."},{"kind":"example","title":"Champs Airtable","body":"utm_source, utm_medium, utm_campaign, utm_content, utm_term, landing_page, converted_at, lead_id, gclid (optionnel)."}],"sections":[{"heading":"Définir la convention et la table de suivi","body":["Documentez la nomenclature UTM dans Notion : `utm_source` = plateforme (google, newsletter), `utm_medium` = canal (cpc, email), `utm_campaign` = initiative datée (`lancement-academy-2026-q2`).","Créez une table Airtable « Conversions » liée à la table Leads ou Deals. Chaque soumission crée ou met à jour un enregistrement avec les UTM et l’URL de landing.","Ajoutez des vues pivot : par campagne, par source/medium, par mois. Le marketing filtre sans exporter GA4 à chaque réunion."]},{"heading":"Pipeline Make formulaire → Airtable","body":["Trigger webhook formulaire (même scénario que make-formulaire-vers-crm ou branche dédiée). Module Set variables : `toLower(utm_source)`, trim des espaces, défaut `direct` si vide.","Create record Airtable Conversions + lien vers le lead CRM créé en amont. Stockez `document.referrer` et user-agent si utile pour détecter le spam.","Router optionnel : si `utm_campaign` contient `partner-`, notifiez un canal Slack partenaires en plus de l’alimentation Airtable."]},{"heading":"Recoupement GA4 et gouvernance","body":["GA4 reste complémentaire pour le trafic anonyme et les funnels. Airtable relie UTM au CA signé quand le deal passe « Gagné » — lien que GA4 ne fait pas nativement avec votre CRM.","Vérifiez périodiquement la cohérence GA4 vs Airtable sur un échantillon (même campagne, même semaine). Les écarts indiquent souvent des UTM perdus sur mobile ou des redirects qui strippent les query params.","Intégrez la checklist SEO du projet : les landing pages campagne doivent conserver les paramètres UTM dans les liens internes."]},{"heading":"Erreurs fréquentes","body":["UTM uniquement sur la homepage d’entrée : perdus après un clic menu.","Campagnes avec espaces ou caractères spéciaux non encodés.","Doublon Airtable à chaque resoumission formulaire sans clé dédup.","Confondre `source` organique et `direct` faute de referrer transmis."]},{"heading":"Ce qu’il faut retenir","body":["UTM capturés à la conversion, pas seulement dans GA4.","Table Airtable dédiée, normalisation systématique.","Lien vers lead/deal pour reporting CA par campagne.","Convention UTM tenue par le marketing, pas improvisée par run."]}],"faq":[{"q":"GA4 ne suffit-il pas pour le suivi ?","a":"Pour le trafic oui. Pour attribuer un contrat signé au commercial et à la campagne, il vous faut les UTM dans le CRM/Airtable."},{"q":"Comment gérer gclid / fbclid ?","a":"Stockez-les en champs séparés. Utile pour recoupement ads ; ne les exposez pas dans les exports client sans nécessité."},{"q":"Faut-il des UTM sur les liens e-mail ?","a":"Oui — le marketing génère les URLs avec la convention. Testez chaque template avant envoi massif."}],"sources":[{"label":"Make : Airtable","href":"https://www.make.com/en/help/apps/airtable"},{"label":"Google Analytics : UTM parameters","href":"https://support.google.com/analytics/answer/10917952"}],"relatedTutorialSlugs":["make-formulaire-vers-crm","make-enrichir-leads-api","airtable-base-suivi-missions","seo-geo-checklist-metadata-json-ld"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/make"],"relatedMissionSlugs":[],"status":"published"},{"slug":"wordpress-staging-mep-sans-casse","title":"WordPress : staging et MEP sans casse","description":"Déployez WordPress staging vers prod sans casse : sync BDD, fichiers, URLs, cache et recette. Workflow agence pour livraisons B2B maîtrisées et réversibles.","h1":"Staging et MEP WordPress","intro":"Pousser du staging vers la production sans environnement intermédiaire expose le client à des 404, des formulaires cassés ou des URLs mixtes HTTP/HTTPS. Une MEP WordPress structurée combine sauvegarde, migration contrôlée et recette sur pages critiques. Vous allez définir un flux staging → prod reproductible et une checklist de validation avant bascule DNS.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["cms"],"tools":["wordpress"],"expertisePoles":["cms"],"prerequisites":["Environnement staging miroir de la prod (PHP, extensions, versions)","Plugin de migration (WP Migrate, Duplicator Pro ou workflow Git + CI)","Accès prod : FTP, SSH, base de données et DNS si bascule domaine","Checklist recette validée en interne sur staging"],"callouts":[{"kind":"warning","title":"Sauvegarde complète avant bascule","body":"Fichiers + export SQL de la prod actuelle, stockés hors serveur. La MEP doit être réversible en moins de 30 minutes en cas d’incident."},{"kind":"tip","title":"Search-replace URLs en sécurité","body":"Utilisez WP-CLI search-replace ou l’outil du plugin de migration avec sérialisation PHP gérée. Un remplacement SQL brut casse les options sérialisées."},{"kind":"example","title":"Fenêtre de MEP type","body":"Mardi 6h–8h : gel contenu client, migration BDD, déploiement fichiers, search-replace, purge cache, recette 15 points, ouverture trafic."}],"sections":[{"heading":"Cadrage : parité staging et périmètre MEP","body":["Le staging doit reproduire la prod : version PHP, extensions actives, mémoire, cron. Un écart masque des bugs qui n’apparaissent qu’en production.","Définissez le périmètre : thème, plugins custom, uploads récents, base complète ou delta. Les contenus saisis en prod pendant la MEP doivent être gelés ou resynchronisés.","Planifiez une fenêtre horaire et un responsable rollback. Informez le client du gel éditorial 24 h à l’avance."]},{"heading":"Préparer la migration fichiers et base","body":["Exportez la base staging via plugin ou mysqldump. Déployez wp-content/themes, mu-plugins et uploads modifiés ; évitez d’écraser uploads client récents sans sync.","Excluez cache, logs et node_modules du paquet. Vérifiez que wp-config.php prod conserve les bonnes constantes DB et clés salts.","Si le domaine change, préparez la liste des URLs à remplacer (staging.client.fr → www.client.fr)."]},{"heading":"Bascule, search-replace et recette","body":["Importez la base, lancez search-replace sérialisé, puis purge cache page et CDN. Régénérez permaliens si structure modifiée.","Recette obligatoire {{icon:check}} : accueil, page contact (envoi test), login admin, formulaire, flux e-commerce si applicable, robots.txt et sitemap.","Surveillez les logs PHP et 404 pendant les deux heures suivant la MEP. Gardez la sauvegarde prod précédente accessible."]},{"heading":"Erreurs fréquentes","body":["Search-replace SQL direct sur wp_options : widgets et réglages corrompus.","Oublier de désactiver indexation staging (noindex) avant exposition publique.","Déployer un .htaccess staging incompatible avec l’hébergeur prod.","Ne pas purger le cache CDN : visiteurs sur ancienne version pendant des heures.","MEP sans gel éditorial : contenus saisis en prod perdus à l’import staging."]},{"heading":"Ce qu’il faut retenir","body":["Staging miroir + sauvegarde prod + fenêtre planifiée = MEP réversible.","Migration avec gestion sérialisation ; jamais de replace SQL brut.","Recette 15 points et surveillance post-MEP documentées dans ClickUp ou Notion.","Gel contenu client et communication anticipée limitent les allers-retours."]}],"faq":[{"q":"Comment synchroniser uniquement le code sans écraser la base prod ?","a":"Déployez thème enfant et mu-plugins via Git ou FTP. La base prod reste intacte. Idéal pour correctifs CSS ou hooks sans changement de contenu."},{"q":"Faut-il un staging en ligne ou en local ?","a":"Un staging en ligne (sous-domaine protégé) reflète mieux l’hébergement prod. Le local convient au développement initial, pas à la recette finale client."},{"q":"Comment réagir si la MEP échoue en pleine heure de pointe ?","a":"Restaurez la sauvegarde prod immédiatement et repassez en mode maintenance si besoin. Analysez les logs sur staging corrigé avant toute nouvelle tentative. Replanifiez une fenêtre hors trafic avec le client informé."}],"sources":[{"label":"WordPress : Staging Sites","href":"https://wordpress.org/documentation/article/staging-sites/"},{"label":"WordPress : wp-config.php","href":"https://developer.wordpress.org/advanced-administration/wordpress/wp-config/"}],"relatedTutorialSlugs":["notion-checklist-recette-mise-en-prod","wordpress-securite-updates-roles","wordpress-theme-enfant-structure-projet"],"relatedExpertisePaths":["/expertises/cms/wordpress"],"relatedMissionSlugs":[],"status":"published"},{"slug":"stripe-webhooks-idempotence-make","title":"Stripe webhooks : idempotence Make","description":"Sécurisez webhooks Stripe : signature, idempotence, scénario Make. Évitez doubles commandes et échecs silencieux. Guide dev/PO pour sync CRM fiable en prod.","h1":"Webhooks Stripe fiables avec Make","intro":"Stripe peut renvoyer le même événement plusieurs fois ; sans garde-fou, vous expédiez deux fois, facturez deux fois ou créez des doublons CRM. La vérification de signature, le stockage d’`event.id` et un scénario Make idempotent transforment les webhooks en file métier fiable.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"avance","readingTimeMinutes":4,"categories":["code","securite"],"tools":["stripe","make"],"expertisePoles":["developpement"],"prerequisites":["Endpoint webhook Stripe configuré (test puis live) avec secret de signature","Scénario Make avec module Webhooks custom ou relais via API Next.js","Table Airtable « Stripe events » avec champ unique `event_id`","Liste des événements métier retenus (`checkout.session.completed`, `invoice.paid`, etc.)"],"callouts":[{"kind":"warning","title":"Signature obligatoire","body":"Rejetez toute requête sans vérification `constructEvent` (SDK Stripe). Un endpoint ouvert est une porte d’entrée pour des faux paiements."},{"kind":"tip","title":"Répondez vite, traitez après","body":"Retournez HTTP 200 dans les quelques secondes après validation. Déportez sync CRM et e-mails transactionnels vers Make ou une queue si le traitement dépasse 5 s."},{"kind":"example","title":"Clé d’idempotence","body":"Avant tout effet de bord : Search Airtable `event_id` = `evt_…`. Si trouvé → stop. Sinon Create + branche métier. Même logique en SQL avec contrainte UNIQUE."}],"sections":[{"heading":"Modèle webhook : vérifier puis router","body":["Stripe envoie un POST JSON signé. Votre Route Handler lit le body brut, valide `Stripe-Signature` avec le webhook secret, puis parse l’événement typé.","Routez par `event.type` : paiement one-shot, abonnement, remboursement. Ignorez les types hors périmètre pour limiter la surface d’attaque et le bruit en monitoring.","En développement, `stripe listen --forward-to localhost:3000/api/webhooks/stripe` reproduit les événements sans exposer votre machine."]},{"heading":"Idempotence avec Airtable ou base SQL","body":["Stripe garantit au-least-once delivery : le même `event.id` peut arriver deux fois. Stockez chaque `event.id` traité avec statut, horodatage et payload résumé.","Pattern {{icon:check}} : insert event → si conflit unique, exit 200 sans effet. Pattern {{icon:x}} : lire commande, update, puis insert event : race condition possible.","Conservez aussi une clé métier (`payment_intent` ou `order_id`) pour corréler les événements différents d’une même transaction."]},{"heading":"Relayer vers Make sans perdre d’événements","body":["Option A : Make reçoit le webhook (module Webhooks). Validez la signature côté Next.js avant relais, ou logguez puis ack immédiat.","Option B : Next.js écrit en queue Airtable « pending », Make trigger sur nouvelle ligne. Plus traçable pour les PO.","Error handler Make vers Slack #ops avec `event_id` et lien Dashboard Stripe."]},{"heading":"Erreurs fréquentes","body":["Parser le JSON avant vérification signature : échec systématique en production.","Traitement synchrone lourd (génération PDF, sync ERP) dans le handler : timeouts Stripe et retries en cascade.","Absence de contrainte unique sur `event_id` : doublons CRM silencieux.","Webhook test et live partageant le même secret ou la même table sans colonne `mode`."]},{"heading":"Ce qu’il faut retenir","body":["Vérifier la signature, répondre 200 vite, traiter idempotent avec `event.id`.","Make ou Airtable comme couche de reprise et d’observabilité métier.","Documenter les `event.type` écoutés et le mapping statuts commande.","Tester les renvois manuels depuis le Dashboard Stripe avant go-live."]}],"faq":[{"q":"Faut-il traiter tous les événements Stripe ?","a":"Non. Limitez-vous aux types qui changent un statut métier (paiement confirmé, abonnement annulé, remboursement). Souscrivez uniquement à ces types dans le Dashboard pour réduire le volume."},{"q":"Comment gérer un webhook reçu avant l’écriture commande ?","a":"Créez la commande en statut « pending payment » avant la redirection Checkout. Sinon, mettez le webhook en retry court jusqu’à trouver la commande via `metadata.order_id`. Logguez les événements orphelins pour diagnostic."},{"q":"Peut-on remplacer entièrement l’endpoint Next.js par Make ?","a":"Possible pour des stacks légères, mais la vérification de signature est plus robuste dans votre API avec le SDK Stripe. Make peut prendre le relais après validation serveur. Conservez toujours une clé webhook secrète hors scénario Make."}],"sources":[{"label":"Stripe Docs : Webhooks","href":"https://docs.stripe.com/webhooks"},{"label":"Stripe API : Events","href":"https://docs.stripe.com/api/events"},{"label":"Stripe Docs : Signatures","href":"https://docs.stripe.com/webhooks/signatures"}],"relatedTutorialSlugs":["stripe-checkout-session-ecommerce","make-gestion-erreurs-reprise","stripe-airtable-suivi-paiements"],"relatedExpertisePaths":["/expertises/developpement/ecommerce"],"relatedMissionSlugs":[],"status":"published"},{"slug":"webflow-structure-classes-utilitaires","title":"Webflow : structure et classes utilitaires","description":"Structurez Webflow avec sections, composants et classes utilitaires. Méthode agence pour designers débutants : nommage clair, cohérence UI et handoff propre.","h1":"Structure Webflow et classes utilitaires","intro":"Sans convention de nommage, un projet Webflow devient ingérable : doublons de styles et handoff confus. Les classes utilitaires et composants mal structurés ralentissent toute la chaîne design → dev. Vous allez poser une ossature claire — sections, utilitaires et composants — avant d’ajouter du contenu.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":3,"categories":["design"],"tools":["webflow"],"expertisePoles":["developpement"],"prerequisites":["Projet Webflow avec accès Designer","Arborescence des pages validée","Lexique de classes avec préfixe projet","Breakpoints desktop, tablette et mobile définis"],"callouts":[{"kind":"tip","title":"Préfixe projet obligatoire","body":"Préfixez les classes custom (`cosmos-`, `acme-`). Les utilitaires globaux (`u-container`, `u-section`) restent sans préfixe client."},{"kind":"example","title":"Hiérarchie type","body":"Page → Section `u-section` → Container `u-container` → Bloc `cosmos-hero` → Élément `cosmos-hero_title`. États via combo (`is-active`)."},{"kind":"warning","title":"Éviter le style ponctuel","body":"Chaque margin « au feeling » crée une dette invisible. Créez une classe utilitaire ou un variant de composant à la place."}],"sections":[{"heading":"Cadrer l’ossature page et section","body":["Créez une page « Styleguide » interne regroupant containers, titres et espacements. Chaque nouvelle page duplique cette base plutôt que de repartir de zéro.","Découpez chaque template en sections sémantiques (`header`, `hero`, `footer`). Fixez un container max-width et des gutters constants — {{icon:check}} les designers suivants appliquent les mêmes repères."]},{"heading":"Classes utilitaires et combo classes","body":["Réservez les classes `u-*` aux utilitaires réutilisables : `u-container`, `u-grid-2`, `u-text-center`. Elles portent une propriété ou un petit groupe cohérent.","Les combo classes expriment un état (`is-open`, `is-dark`). Nommez chaque classe avant d’ajouter des propriétés — sinon naît un `Div Block 47`."]},{"heading":"Composants et props pour la maintenance","body":["Transformez en composants les blocs répétés : carte service, témoignage, CTA. Une mise à jour se propage sur toutes les instances.","Utilisez les props pour texte, image et lien — pas pour des marges arbitraires. Documentez quels composants sont gelés et lesquels acceptent des overrides locaux."]},{"heading":"Erreurs fréquentes","body":["Multiplier les classes pour un même rendu (`heading-large`, `title-big`) : fusionnez avant livraison.","Laisser les divs par défaut (`Div Block`, `Image 2`) : l’arborescence Navigator devient illisible.","Créer des composants trop larges (page entière) : impossible à réutiliser.","Oublier de purger les classes orphelines avant export."]},{"heading":"Ce qu’il faut retenir","body":["Styleguide + préfixe projet = base stable pour toute l’équipe.","Utilitaires `u-*`, combo `is-*`, composants avec props : trois niveaux distincts.","Nommage explicite dès la création — pas de correction massive en fin de sprint."]}],"faq":[{"q":"Faut-il adopter Client-First sur chaque projet Webflow ?","a":"Client-First est une référence solide pour les équipes multiples. L’essentiel est la cohérence : un système documenté vaut mieux qu’un mélange de conventions."},{"q":"Quel nombre de classes utilitaires au départ ?","a":"Démarrez avec container, section spacing et grille de base. Enrichissez au fil des pages réelles — pas un catalogue inutilisé."},{"q":"Peut-on renommer les classes en cours de projet ?","a":"Oui via le panneau « Style Manager », mais prévoyez une fenêtre dédiée hors sprint client. Testez les composants impactés sur les breakpoints principaux avant de livrer."}],"sources":[{"label":"Webflow University : Style panel","href":"https://university.webflow.com/lesson/intro-to-the-style-panel"},{"label":"Webflow University : Components","href":"https://university.webflow.com/lesson/components"},{"label":"Webflow University : Client-First intro","href":"https://university.webflow.com/lesson/client-first-intro"}],"relatedTutorialSlugs":["webflow-responsive-handoff-dev","figma-composants-design-system","figma-grille-responsive-handoff"],"relatedExpertisePaths":["/expertises/design","/expertises/developpement/site-web"],"relatedMissionSlugs":[],"status":"published"},{"slug":"claude-workflows-agence-clickup","title":"Claude : workflows agence ClickUp","description":"Alignez Claude sur vos workflows ClickUp : statuts, custom fields et synthèse sprint. Pilotage PO/PM en agence sans doublon Notion ni perte de traçabilité.","h1":"Workflows Claude alignés ClickUp","intro":"Claude sans lien avec ClickUp produit des synthèses déconnectées du terrain : mauvais statuts, oubli des custom fields, doublons avec Notion. En injectant la structure de votre workspace et des prompts par sprint, vous alignez comptes-rendus et plans d’action sur l’exécution réelle. Vous allez configurer des workflows reproductibles pour le pilotage PO/PM.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["ia","po-pm"],"tools":["claude","clickup"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Workspace ClickUp structuré (espaces, listes, statuts)","Custom fields documentés (client, lot, priorité, type)","Export ou copie des tâches du sprint courant","Règle de source de vérité : ClickUp = exécution, Notion = specs"],"callouts":[{"kind":"tip","title":"Prompt de synthèse hebdomadaire","body":"Exportez les tâches « En cours » et « Bloqué » chaque vendredi. Claude produit : avancement, risques, décisions attendues, message client draft."},{"kind":"warning","title":"Ne pas dupliquer Notion dans ClickUp","body":"Les specs détaillées restent dans Notion. ClickUp porte les tâches actionnables. Claude synthétise les deux si vous fournissez les liens, pas les contenus entiers."},{"kind":"example","title":"Données à injecter","body":"Liste des statuts autorisés, définition de « Done », custom fields actifs, tâches avec titre / statut / assigné / date / commentaires récents."}],"sections":[{"heading":"Documenter la structure ClickUp pour Claude","body":["Exportez un glossaire interne : espaces (Clients, Interne), listes par projet, workflow de statuts (Backlog → En cours → Revue → Done), custom fields et leur sémantique.","Précisez les règles RACI : qui assigne, qui valide, qui communique au client. Claude respecte mieux les rôles si ils sont explicites dans le system prompt.","Stockez ce glossaire dans Notion ou un fichier versionné. Réutilisez-le en préambule de chaque prompt de synthèse sprint."]},{"heading":"Créer les prompts de synthèse et de planification","body":["Synthèse sprint : « À partir des tâches ci-dessous, produisez un compte-rendu : % avancement, bloquants, livrables semaine prochaine, questions client. Utilisez uniquement les statuts fournis. »","Planification : « Proposez un découpage en lots pour [feature] avec tâches ClickUp. Ne créez pas de tâches hors périmètre spec. »","Revue de charge : « Identifiez les tâches sans assigné, les dates dépassées et les doublons. Format tableau actionnable. »"]},{"heading":"Boucler avec l’exécution ClickUp","body":["Validez humainement les sorties Claude avant de créer ou modifier des tâches. Copiez les titres et champs dans ClickUp ou automatisez via Make si le volume le justifie.","Liez chaque tâche macro à la spec Notion (champ URL ou ID). La traçabilité exigence → tâche reste intacte.","Archivez les synthèses en commentaire de tâche parent ou en doc ClickUp pour l’historique client."]},{"heading":"Erreurs fréquentes","body":["Injecter des tâches sans les statuts autorisés : Claude invente des états.","Demander à Claude de remplacer le PM : décisions de priorisation restent humaines.","Oublier les tâches bloquées dans l’export : synthèse trop optimiste.","Créer des doublons Notion/ClickUp pour le même livrable.","Ne pas mettre à jour le glossaire quand les statuts changent."]},{"heading":"Ce qu’il faut retenir","body":["Glossaire ClickUp + statuts + custom fields = synthèses alignées terrain.","Prompts dédiés : synthèse, planification, revue de charge.","Validation humaine avant création de tâches.","ClickUp exécute ; Notion cadrage ; Claude accélère la rédaction et la détection."]}],"faq":[{"q":"Comment exporter les tâches ClickUp pour Claude ?","a":"Export CSV par liste ou copie manuelle des tâches du sprint. Pour un flux récurrent, envisagez l’API ClickUp via Make avec filtre sur le sprint courant."},{"q":"Peut-on créer des tâches ClickUp directement depuis Claude ?","a":"Pas nativement. Il propose des brouillons que vous validez. L’automatisation de création passe par l’API ClickUp ou des intégrations Make après revue humaine."},{"q":"Faut-il un prompt différent par client ?","a":"Un prompt de base suffit si le glossaire ClickUp est partagé. Adaptez uniquement le contexte client (ton, SLA, interlocuteur) en bloc variable par mission."}],"sources":[{"label":"Anthropic : Prompt engineering","href":"https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/overview"},{"label":"ClickUp API","href":"https://developer.clickup.com/docs/index"}],"relatedTutorialSlugs":["clickup-statuts-workflow-livraison","raci-clickup-multi-equipes"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/product-owner"],"relatedMissionSlugs":[],"status":"published"},{"slug":"chatgpt-scripts-recette-metier","title":"ChatGPT : scripts recette métier","description":"Scripts recette métier ChatGPT pour projets web : Playwright, scénarios API et jeux de données. Brouillon accéléré avec relecture dev avant intégration CI.","h1":"Scripts recette métier","intro":"La recette fonctionnelle repose souvent sur des parcours répétitifs mal documentés. Les scénarios manuels se perdent entre PO et dev, et les régressions passent inaperçues. ChatGPT accélère la rédaction de scripts Playwright et de checklists exécutables — à valider par un développeur avant intégration CI.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["ia","code"],"tools":["chatgpt"],"expertisePoles":["developpement"],"prerequisites":["Spécifications fonctionnelles ou user stories avec critères d’acceptation","Stack de test connue (Playwright, Vitest, curl ou Postman)","Environnement de staging accessible pour exécuter les scénarios","Compte ChatGPT ; Cursor en complément pour intégrer les fichiers au dépôt"],"callouts":[{"kind":"tip","title":"Prompt structuré","body":"Indiquez : parcours utilisateur, préconditions, données de test, assertions attendues, sélecteurs connus. Demandez le script dans le framework imposé par le repo, pas un exemple générique."},{"kind":"warning","title":"Ne jamais exécuter sans revue","body":"Les scripts générés peuvent contenir des sélecteurs fragiles, des credentials en dur ou des appels destructifs. Revue dev {{icon:check}} obligatoire avant commit."},{"kind":"example","title":"Scénario type tunnel contact","body":"Given formulaire contact ouvert · When champs valides remplis et soumission · Then message succès visible · And e-mail transactionnel loggé en staging · Export Playwright TypeScript."}],"sections":[{"heading":"Traduire la recette métier en scénarios testables","body":["Partez de la checklist recette Notion ou ClickUp : listez les parcours critiques (inscription, paiement, soumission formulaire, recherche catalogue). Un scénario = un objectif métier mesurable.","Pour chaque parcours, documentez état initial, actions utilisateur, résultat attendu côté UI et effets de bord (e-mail, webhook CRM, entrée base). Ce contexte alimente le prompt ChatGPT."]},{"heading":"Générer scripts UI et tests API","body":["Demandez un script Playwright ou Cypress aligné sur vos conventions de nommage et dossiers (`e2e/`, `tests/`). Fournissez un extrait de DOM ou des data-testid existants pour limiter les sélecteurs CSS fragiles.","Pour les APIs, demandez des requêtes curl ou des tests Vitest avec jeux de données anonymisés. Précisez codes HTTP attendus et structure JSON de réponse."]},{"heading":"Intégrer au dépôt et à la CI","body":["Collez le script dans Cursor, lancez `@codebase` pour adapter imports et helpers existants. Exécutez localement sur staging avant PR.","Ajoutez les scénarios au pipeline CI sur environnement éphémère. Documentez dans le runbook : fréquence, données seed, responsable maintenance."]},{"heading":"Erreurs fréquentes","body":["Prompt sans framework imposé : code incompatible avec le repo.","Sélecteurs CSS sur classes Tailwind génériques : tests flaky dès le premier refactor.","Données de production copiées dans le prompt : fuite RGPD.","Scénarios trop larges couvrant dix parcours : échec difficile à diagnostiquer.","Oublier les états d’erreur (formulaire invalide, timeout API)."]},{"heading":"Ce qu’il faut retenir","body":["ChatGPT accélère le brouillon ; le dev valide, adapte et maintient les scripts.","Un parcours métier = un scénario isolé avec assertions explicites.","Préférez data-testid et helpers du projet aux sélecteurs inventés.","Intégrez tôt en CI staging pour que la recette survive aux livraisons suivantes."]}],"faq":[{"q":"Faut-il choisir ChatGPT ou Cursor pour générer les tests ?","a":"ChatGPT pour le brouillon métier structuré ; Cursor pour l’intégration au dépôt via @codebase, le typage strict et l’exécution locale. Enchaînez les deux plutôt que de choisir."},{"q":"Quels parcours automatiser en priorité ?","a":"Tunnel de conversion, formulaires avec webhook CRM et authentification. Ce sont les régressions les plus coûteuses en production."},{"q":"Peut-on générer toute la suite de tests d’un projet ?","a":"Non recommandé en une passe : procédez par vague alignée sur les sprints, avec revue humaine à chaque lot. La couverture utile prime sur le volume."}],"sources":[{"label":"OpenAI Help : ChatGPT capabilities","href":"https://help.openai.com/en/articles/9358033-chatgpt-can-now-see-hear-and-speak"},{"label":"MDN : Fetch API","href":"https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch"}],"relatedTutorialSlugs":["cursor-tests-typage-strict","notion-checklist-recette-mise-en-prod","chatgpt-make-automation-legere"],"relatedExpertisePaths":["/expertises/developpement/sur-mesure"],"relatedMissionSlugs":[],"status":"published"},{"slug":"gemini-multimodal-audit-maquette-figma","title":"Gemini : audit multimodal maquette Figma","description":"Auditez une maquette Figma avec Gemini multimodal : cohérence visuelle, accessibilité et écarts specs. Workflow design agence avant handoff développement.","h1":"Audit maquette Figma","intro":"Un handoff Figma incomplet génère des allers-retours coûteux entre design et développement. Gemini analyse images, captures et exports pour repérer incohérences, contrastes douteux et écarts par rapport au brief. Vous allez structurer un audit multimodal reproductible avant la recette d’intégration.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":3,"categories":["ia","design"],"tools":["gemini","figma"],"expertisePoles":["developpement"],"prerequisites":["Accès Gemini (Workspace ou API) avec capacité vision activée","Maquette Figma exportée en PNG par écran clé ou lien de prototype","Brief client et specs composants (tokens, grille, états interactifs)","Checklist accessibilité projet (contrastes, tailles, focus)"],"callouts":[{"kind":"tip","title":"Un écran par requête","body":"Envoyez une capture par page ou composant critique. Gemini traite mieux des visuels ciblés qu’un export monolithique de 40 écrans."},{"kind":"warning","title":"L’IA ne remplace pas l’audit RGAA","body":"Les ratios de contraste annoncés par Gemini sont indicatifs. Validez toujours sur le HTML rendu avec un outil de mesure et une recette humaine."},{"kind":"example","title":"Prompt type audit","body":"« Analysez cette maquette mobile : listez écarts au brief (couleurs, espacements), contrastes suspects, états manquants (hover, erreur, disabled). Format : tableau actionnable. »"}],"sections":[{"heading":"Cadrer le périmètre et préparer les exports","body":["Sélectionnez les écrans à risque : formulaire, tunnel e-commerce, navigation mobile, modales. Exportez en PNG 2× depuis Figma ou partagez des frames nommées.","Joignez le brief : objectifs, contraintes marque, composants du design system. Sans ce contexte, Gemini commente la surface visuelle sans lien métier.","Définissez les critères d’audit : cohérence tokens, grille 8 px, états interactifs, lisibilité des CTA."]},{"heading":"Lancer l’audit multimodal dans Gemini","body":["Uploadez la capture et collez un prompt structuré : rôle auditeur, livrable (écarts priorisés), format tableau. Demandez les hypothèses si une info manque.","Enchaînez écran par écran pour détecter les régressions entre breakpoints.","Pour les composants, ajoutez une capture du panel Figma (variants) si disponible."]},{"heading":"Transformer le rapport en tickets actionnables","body":["Classez chaque écart : bloquant handoff, à corriger avant dev, nice-to-have. Les bloquants concernent tokens manquants, contrastes critiques ou parcours incomplet.","Créez des tâches ClickUp ou commentaires Figma avec capture + extrait du rapport Gemini. Le développeur et le designer partagent la même preuve visuelle.","Validez les suggestions {{icon:check}} une par une : Gemini peut confondre intention créative et erreur. Le designer tranche en moins de cinq minutes par lot."]},{"heading":"Erreurs fréquentes","body":["Envoyer un PDF de 60 pages : résultats superficiels et oublis sur les écrans de fin.","Oublier le brief : commentaires génériques du type « améliorer la hiérarchie » sans lien au projet.","Mélanger audit design et audit code dans le même prompt : séparez maquette et intégration HTML.","Ne pas versionner les exports : impossible de comparer avant/après correction."]},{"heading":"Ce qu’il faut retenir","body":["Gemini multimodal accélère la relecture visuelle avant handoff, pas la recette accessibilité finale.","Un écran, un prompt, un livrable structuré : workflow reproductible en agence.","Brief + tokens + checklist = audit utile ; image seule = commentaire vague.","Les findings alimentent Figma et le backlog projet, pas un rapport archivé."]}],"faq":[{"q":"Faut-il connecter Gemini directement à Figma ?","a":"Non pour démarrer. Les exports PNG ou les liens de prototype suffisent. Une intégration API Figma reste optionnelle pour automatiser les captures sur les gros programmes."},{"q":"Peut-on auditer le design system complet en une fois ?","a":"Découpez par famille de composants (boutons, formulaires, cartes). Un lot de 8 à 12 variantes par session garde une précision acceptable."},{"q":"Comment éviter les faux positifs sur le contraste ?","a":"Demandez à Gemini de signaler les zones douteuses, puis mesurez avec un plugin Figma certifié. Documentez les exceptions validées (texte décoratif, logos)."}],"sources":[{"label":"Gemini API : Vision","href":"https://ai.google.dev/gemini-api/docs/vision"},{"label":"Figma Help : Dev Mode","href":"https://help.figma.com/hc/en-us/articles/15023003684023-Guide-to-Dev-Mode"}],"relatedTutorialSlugs":["figma-audit-contraste-accessibilite","gemini-long-context-specs-projet","cursor-figma-implementer-maquette"],"relatedExpertisePaths":["/expertises/developpement/sur-mesure"],"relatedMissionSlugs":[],"status":"published"},{"slug":"clickup-workspace-structure-agence","title":"Workspace ClickUp : structure agence web","description":"Workspace ClickUp au niveau agence : Spaces clients, templates, droits, champs globaux. Gouvernance pour éviter la dette structurelle sur projets multi-équipes.","h1":"Structure workspace pour agence","intro":"Au-delà d’un projet isolé, une agence web gère des dizaines de chantiers simultanés. Sans structure workspace cohérente, chaque PM réinvente Spaces, champs et templates. Vous allez poser une architecture stable : un Workspace, des Spaces par client ou programme, une bibliothèque de templates et un référent gouvernance.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":3,"categories":["po-pm"],"tools":["clickup"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Droits admin sur le Workspace ClickUp agence","Inventaire des types de mission (refonte, e-commerce, maintenance, TMA)","Accord direction sur la visibilité transverse (marge, charge) vs par projet"],"callouts":[{"kind":"tip","title":"Un Workspace par agence","body":"ClickUp recommande un Workspace par entreprise. Multipliez les Spaces, pas les Workspaces : vous gardez templates, membres et reporting centralisés."},{"kind":"example","title":"Découpage type","body":"Space « [Client] — refonte 2026 » · Space « Interne — templates & R&D » · Space « Maintenance — contrats actifs »."},{"kind":"warning","title":"Référent structure obligatoire","body":"Seule une personne (ou duo PM + ops) crée les Spaces et valide les changements d’arborescence. Les contributeurs déplacent des tâches, pas la structure."}],"sections":[{"heading":"Architecture workspace et Spaces clients","body":["Le Workspace contient tout : membres, facturation, templates globaux. Les Spaces segmentent les flux : un Space par client majeur ou par programme (plusieurs lots pour le même compte).","Space « Interne » : templates, bibliothèque de checklists, veille outils, projets avant-vente. Space « Maintenance » : contrats récurrents avec Lists par site ou par SLA.","Nommez explicitement : « Acme — refonte e-commerce 2026 », jamais « Projet web ». La sidebar devient votre index clients."]},{"heading":"Templates, champs globaux et droits","body":["Centralisez les templates Folder, List et tâche au niveau Workspace. Seul le référent en publie de nouveaux ; les PM dupliquent à l’ouverture de mission.","Champs custom globaux : URL preview, environnement, type livrable, lot facturable. Homogénéité = dashboards et exports Airtable fiables.","Droits : client invité lecture sur Lists recette ; équipe interne édition sur production ; direction lecture sur Spaces actifs pour le pilotage macro."]},{"heading":"Gouvernance et cycle de vie","body":["Convention documentée dans une ClickUp Doc racine : nommage Spaces/Folders/Lists, règles d’archivage, process d’ouverture et clôture mission.","À la livraison : archivez le Space ou les Lists terminées. Un sidebar encombré ralentit l’adoption quotidienne.","Revue trimestrielle : templates obsolètes, champs inutilisés, Spaces orphelins. Chaque retour de mission alimente une amélioration template."]},{"heading":"Erreurs fréquentes","body":["Un Workspace par client : duplication des membres, des automatisations et des coûts de licence.","Champs custom différents par Space : exports et dashboards direction incohérents.","Pas d’archivage post-livraison : 80 Spaces actifs, recherche impossible.","Structure modifiée en cours de projet sans migration : tâches orphelines, statuts cassés."]},{"heading":"Ce qu’il faut retenir","body":["Un Workspace agence, Spaces par client ou programme, templates centralisés.","Champs globaux et droits moindre privilège dès le jour 1.","Référent structure + revue trimestrielle + archivage systématique.","La structure sert le handoff et le reporting, pas l’ego du PM du moment."]}],"faq":[{"q":"Space par client ou par projet ?","a":"Client si chantiers multiples simultanés ; projet si livrable unique majeur. L’essentiel : identification en moins de dix secondes dans la sidebar."},{"q":"Où placer les templates ?","a":"Bibliothèque Workspace + Space « Interne » miroir documenté. Les PM dupliquent, ils ne créent pas de zéro."},{"q":"Comment lier ClickUp et Airtable direction ?","a":"Make synchronise jalons et CA ; ClickUp reste l’exécution. Gardez les mêmes libellés de statut macro entre les deux outils."}],"sources":[{"label":"ClickUp : Intro to the Hierarchy","href":"https://help.clickup.com/hc/en-us/articles/13856392825367-Intro-to-the-Hierarchy"},{"label":"ClickUp : Project Hierarchy Guide","href":"https://clickup.com/hierarchy-guide"}],"relatedTutorialSlugs":["clickup-templates-projet-recurrent","clickup-custom-fields-metadonnees"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/clickup","/expertises/chefferie-de-projet/gouvernance-projet"],"relatedMissionSlugs":["maestro-gestion-conservatoire"],"status":"published"},{"slug":"cursor-setup-projet-rules","title":"Cursor : rules et contexte projet web","description":"Configurez Cursor à l’onboarding : rules .mdc versionnées, AGENTS.md et skills. Alignez l’agent IA sur Next.js, React et gouvernance Git en équipe web.","h1":"Setup Cursor : rules et contexte projet","intro":"Sans cadre explicite, l’agent Cursor improvise : mauvais patterns, commits hors convention, oubli des contraintes Next.js du dépôt. Posez des rules versionnées et un fichier AGENTS.md dès le kick-off pour que chaque développeur et chaque session partagent le même référentiel.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":4,"categories":["design","code"],"tools":["cursor"],"expertisePoles":["developpement"],"prerequisites":["Cursor installé (dernière version stable) et dépôt cloné localement","Droits d’écriture sur le repository pour committer `.cursor/rules/` et `AGENTS.md`","Stack et conventions projet documentées (lint, tests, structure des dossiers)","30 à 45 minutes pour le setup initial rules + AGENTS.md"],"callouts":[{"kind":"tip","title":"Une préoccupation par rule","body":"Découpez en fichiers courts : `nextjs-patterns.mdc`, `react-accessibility.mdc`, `git-conventions.mdc`. L’agent applique mieux des règles ciblées qu’un monolithe de 300 lignes."},{"kind":"warning","title":"Ne pas dupliquer la doc officielle","body":"Les rules portent vos choix projet (nommage, dossiers, interdits métier), pas un cours Next.js générique. Référez les APIs instables vers `node_modules/next/dist/docs/`."},{"kind":"example","title":"Arborescence type agence","body":"Racine : `AGENTS.md`. `.cursor/rules/nextjs.mdc` (globs `**/*.{ts,tsx}`), `.cursor/rules/academy-content.mdc` (globs `src/content/**`). Skills optionnels dans `.cursor/skills/`."}],"sections":[{"heading":"AGENTS.md et project rules : complémentarité","body":["Cursor propose `AGENTS.md` (instructions markdown) et les project rules `.cursor/rules/*.mdc` (frontmatter YAML : description, globs, `alwaysApply`). Combinez les deux : vision globale dans AGENTS.md, conventions techniques ciblées dans les rules.","Évitez le legacy `.cursorrules`. Vérifiez que chaque rule `.mdc` possède un frontmatter valide — un `.md` sans métadonnées est ignoré."]},{"heading":"Créer les rules et renseigner AGENTS.md","body":["Créez `.cursor/rules/` et un fichier par sujet : `typescript-standards.mdc` avec `globs: **/*.ts,**/*.tsx`. Privilégiez des exemples {{icon:check}} / {{icon:x}} tirés de votre codebase.","Rédigez `AGENTS.md` avec stack, scripts (`lint`, `typecheck`), chemins clés et interdits (pas de commit sans demande). Un `AGENTS.md` nested dans `src/content/` peut porter le schéma `AcademyTutorial`."]},{"heading":"Skills, @codebase et gouvernance équipe","body":["Les Agent Skills encapsulent des workflows multi-étapes. Les conventions quotidiennes restent dans les rules `.mdc`. Versionnez rules, AGENTS.md et skills dans Git avec revue PR.","Les User rules restent locales : précisez en onboarding qu’elles ne remplacent pas les project rules partagées."]},{"heading":"Erreurs fréquentes","body":["Un seul fichier rule de 200+ lignes : difficile à maintenir et mal ciblé par les globs.","Globs trop larges (`**/*`) avec `alwaysApply: true` : contexte saturé, réponses génériques.","Copier-coller la doc Next.js dans les rules : doublon lourd ; préférez un lien et les patterns spécifiques au repo.","Oublier de committer `.cursor/rules/` : chaque développeur a un agent désaligné.","Mélanger français opérationnel et anglais technique sans règle de langue : incohérence des commits."]},{"heading":"Ce qu’il faut retenir","body":["AGENTS.md = vision et garde-fous globaux ; `.cursor/rules/*.mdc` = conventions ciblées par globs.","Rules courtes, exemplifiées, versionnées en Git et revues en PR.","Skills pour les workflows ; rules pour les standards quotidiens.","Un setup initial de 30–45 minutes évite des heures de corrections agent sur un projet web long."]}],"faq":[{"q":"AGENTS.md ou `.mdc` : que choisir en priorité ?","a":"Commencez par AGENTS.md si l’équipe débute. Ajoutez des `.mdc` dès que des conventions diffèrent selon les dossiers (contenu éditorial vs composants UI vs scripts)."},{"q":"Les rules sont-elles partagées avec toute l’équipe ?","a":"Les project rules dans le dépôt oui, via Git. Les User rules restent locales à chaque machine. Les Team rules (offres entreprise) se synchronisent depuis le dashboard Cursor."},{"q":"Comment tester qu’une rule est bien appliquée ?","a":"Ouvrez un fichier ciblé par le glob, lancez une tâche agent explicite et vérifiez que les patterns imposés sont respectés. Ajustez le frontmatter si la rule n’apparaît pas dans Cursor Settings → Rules."}],"sources":[{"label":"Cursor Docs : Rules","href":"https://cursor.com/docs/context/rules"},{"label":"Cursor Docs : AGENTS.md","href":"https://cursor.com/docs/context/agents"},{"label":"Cursor Docs : Agent Skills","href":"https://cursor.com/docs/context/skills"},{"label":"Cursor Help : Rules","href":"https://cursor.com/help/customization/rules"}],"relatedTutorialSlugs":["cursor-conventions-commit-pr","cursor-composant-react-accessible"],"relatedExpertisePaths":["/expertises/developpement/nextjs","/expertises/developpement/sur-mesure"],"relatedMissionSlugs":[],"status":"published"},{"slug":"figma-notion-sync-specs-composants","title":"Sync specs composants Figma et Notion","description":"Documentez chaque composant design system dans Notion : lien Figma, props, accessibilité, statut dev. Process structuré avec option Make pour les rappels.","h1":"Figma + Notion : synchroniser specs composants","intro":"Quand les specs vivent entre commentaires Figma, messages Slack et tickets éparpillés, le développeur reconstruit le contexte à chaque sprint. Notion devient l'index unique : une fiche par composant avec lien frame, props, critères accessibilité et statut d'implémentation. Figma reste la source des pixels.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["design"],"tools":["figma","notion"],"expertisePoles":["developpement"],"prerequisites":["Composants Figma nommés et publiés (masters stables)","Base Notion « Design system » avec propriétés définies","Convention de statut design / dev / done partagée avec l'équipe","Accès Notion pour designers et développeurs front"],"callouts":[{"kind":"tip","title":"Notion = index, Figma = visuel","body":"Ne copiez pas les captures à chaque micro-changement : le lien frame Figma suffit si le master est à jour."},{"kind":"example","title":"Propriétés Notion minimales","body":"Nom, Statut, Lien Figma, Props (texte), A11y (checkbox + notes), Issue GitHub, Dernière revue, Owner design/dev."},{"kind":"warning","title":"Éviter la double saisie","body":"Synchronisez uniquement les champs métier (statut, owner, ticket). Les mesures restent en Dev Mode — pas de tableau de spacing recopié à la main."}],"sections":[{"heading":"Structurer la base Notion composants","body":["Créez une database « Composants » avec vues par statut (À intégrer, En cours, Done) et par domaine (Formulaires, Navigation, Cartes). Chaque entrée correspond à un master Figma unique.","Champs obligatoires : lien Figma profond vers le master, props Figma ↔ props React, critères accessibilité (contraste, focus, aria), lien issue ou PR GitHub.","Ajoutez une relation vers les pages « Patterns » ou écrans qui consomment le composant — utile pour évaluer l'impact d'un breaking change."]},{"heading":"Alimenter et maintenir les fiches","body":["À chaque nouveau composant ou variante majeure, la fiche Notion est créée avant le statut « Ready for dev ». Le designer remplit props et a11y ; le dev complète le chemin code et l'issue.","Lors d'une release design system, passez en revue les fiches « Done » dont le master Figma a changé : mettez à jour le statut et listez les migrations attendues.","Documentez les anti-patterns dans le corps de la page Notion — le dev les consulte avant d'ouvrir Figma."]},{"heading":"Automatiser les rappels avec Make (optionnel)","body":["Make n'a pas besoin de synchroniser chaque pixel : utilisez-le pour les rappels — comment Figma « spec changed » → mise à jour champ « Dernière revue » Notion, ou notification Slack au owner dev.","Un scénario léger : webhook Notion (nouvelle fiche statut « À intégrer ») → message Slack #front avec lien Figma et checklist a11y.","Pour un flux plus riche (statut projet), voir make-sync-airtable-notion — Airtable pilote les KPI, Notion porte la spec narrative."]},{"heading":"Erreurs fréquentes","body":["Fiches Notion créées après l'intégration : le dev a déjà improvisé une API.","Liens Figma vers une instance détachée au lieu du master.","Statut « Done » non rétrogradé après refonte visuelle majeure.","Dupliquer Storybook et Notion avec le même contenu sans rôle distinct."]},{"heading":"Ce qu'il faut retenir","body":["Notion indexe ; Figma et le repo exécutent.","Une fiche par master ; statut synchronisé avec le code.","Props, a11y et tickets accessibles sans Slack.","Make pour les rappels, pas pour remplacer Dev Mode."]}],"faq":[{"q":"Storybook remplace-t-il Notion pour les specs composants ?","a":"Non. Storybook montre le rendu code interactif. Notion porte le process, les décisions, les owners et le lien vers Figma."},{"q":"À quelle fréquence mettre à jour les fiches Notion ?","a":"À chaque merge design system et avant chaque sprint d'intégration. Une revue mensuelle suffit si le catalogue est stable."},{"q":"Faut-il lier ClickUp aux fiches composants ?","a":"Recommandé : champ URL vers la tâche d'intégration. Le PM suit l'avancement sans quitter son outil de pilotage."}],"sources":[{"label":"Notion : Databases","href":"https://www.notion.com/help/guides/databases"},{"label":"Figma : Components","href":"https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma"}],"relatedTutorialSlugs":["figma-composants-design-system","figma-handoff-dev-mode","notion-base-connaissances-technique","make-sync-airtable-notion"],"relatedExpertisePaths":["/expertises/developpement/react"],"relatedMissionSlugs":[],"status":"published"},{"slug":"seo-geo-maillage-interne","title":"Maillage interne SEO/GEO pour hubs","description":"Structurez liens internes entre hubs, expertises et tutoriels. Pilotage Notion, champs related* et ancres naturelles — utile au lecteur et au contexte GEO.","h1":"Maillage interne SEO et GEO","intro":"Les pages isolées ne renforcent ni l’expertise perçue ni la conversion. Un maillage intentionnel relie hubs, taxonomies, missions et contenus pédagogiques pour guider le lecteur B2B — et clarifier le contexte pour les moteurs et systèmes de réponse IA. Vous allez définir des règles simples, un pilotage Notion et une implémentation cohérente dans le code.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["seo-geo"],"tools":["notion"],"expertisePoles":["developpement"],"prerequisites":["Arborescence site et hub /ressources définis","Tutoriels ou articles publiés par grappes thématiques","Accès aux champs relatedExpertisePaths et relatedTutorialSlugs en code","Base Notion ou tableur pour suivre liens source → cible"],"callouts":[{"kind":"tip","title":"Maillage pour le lecteur","body":"3–6 liens contextuels utiles valent mieux qu’une liste de 20 URLs. Chaque lien doit répondre à « et après ? » ou « approfondir »."},{"kind":"example","title":"Par fiche tutoriel","body":"2–3 liens expertise · 1 mission si pertinente · 2 tutoriels même catégorie/outil via relatedTutorialSlugs."},{"kind":"warning","title":"Pas de bourrage","body":"Répéter la même ancre exacte dix fois sur une page n’améliore ni le SEO ni le GEO. Variez les formulations naturelles."}],"sections":[{"heading":"Principes de maillage éditorial","body":["Hubs catégorie et outil : texte intro riche + liens vers contenus piliers. Chaque tutoriel renvoie vers l’expertise correspondante et vers des contenus complémentaires.","Grappes thématiques : publiez par lots (ex. bloc ClickUp, bloc SEO technique) pour créer des liens réciproques naturels entre fiches proches.","Missions et études de cas : liez depuis les tutoriels quand un exemple concret existe — preuve sociale + profondeur."]},{"heading":"Pilotage dans Notion","body":["Base Notion : colonnes source URL, cible URL, ancre naturelle, statut (à faire, fait), date revue. Filtre « orphelins » : pages sans lien entrant interne.","Matrice trimestrielle : pages à fort trafic sans lien sortant vers conversion (/audit, /devis). Priorisez ces corrections avant les longue traîne.","Alignez le calendrier éditorial SEO : une nouvelle fiche = au moins deux liens entrants depuis contenus existants planifiés."]},{"heading":"Implémentation technique","body":["Dans les fichiers tutoriel : `relatedExpertisePaths`, `relatedTutorialSlugs`, `relatedMissionSlugs`. Le template rend des blocs « Voir aussi » automatiques.","Liens contextuels dans le corps (`sections.body`) : ancre descriptive, pas « cliquez ici ». Vérifiez les liens relatifs vs absolus selon le rendu.","GEO : maillage aide les systèmes à comprendre les relations thématiques ; il ne garantit pas citation dans les réponses LLM sans qualité éditoriale."]},{"heading":"Erreurs fréquentes","body":["Footer avec 50 liens identiques sur toutes les pages : dilution, peu de valeur lecteur.","Ancres exactes dupliquées sur la même page cible.","Tutoriels publiés sans aucun lien entrant : orphelins invisibles dans les hubs.","Maillage mis à jour en code mais pas dans le corps éditorial : incohérence UX."]},{"heading":"Ce qu’il faut retenir","body":["Maillage = guide lecteur + contexte sémantique, pas liste de keywords.","Notion pour piloter ; champs related* pour le rendu automatique.","Revue trimestrielle orphelins et pages conversion.","Publier par grappes pour renforcer les liens réciproques."]}],"faq":[{"q":"Combien de liens internes par fiche ?","a":"3–6 liens contextuels utiles dans le corps + blocs related automatiques. Au-delà, la lecture souffre."},{"q":"Les liens internes aident-ils le GEO ?","a":"Ils clarifient les relations entre contenus pour l’indexation et l’extraction. La profondeur éditoriale et les sources citées restent déterminantes."},{"q":"Qui valide le maillage interne ?","a":"Direction éditoriale ou SEO lead valide la matrice Notion ; le dev implémente related* et liens dans le corps lors de la rédaction."}],"sources":[{"label":"Notion : Organize with databases","href":"https://www.notion.com/help/guides/organize-your-work-with-databases"},{"label":"Plan de site Cosmos","href":"https://agence-cosmos.fr/ressources"}],"relatedTutorialSlugs":["notion-calendrier-editorial-seo","seo-geo-checklist-metadata-json-ld"],"relatedExpertisePaths":["/expertises/developpement/site-web"],"relatedMissionSlugs":[],"status":"published"},{"slug":"make-webhook-slack-projet","title":"Make : webhook sécurisé vers Slack","description":"Webhook Make vers Slack : vérification signature, formatage message et routage par gravité. Alertes projet sécurisées pour PM et ops en agence web B2B.","h1":"Alertes projet Slack via webhook Make","intro":"Un webhook Make exposé sans authentification peut être spammé ou détourné — notifications fantômes, données injectées, quota Make épuisé. En validant la signature ou un secret partagé, en structurant les payloads et en routant par gravité, vous obtenez des alertes projet actionnables sans bruit ni risque évident.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["po-pm"],"tools":["make"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Workspace Slack avec app Make autorisée","Service émetteur capable d’envoyer un header de signature (HMAC) ou bearer token","Canaux Slack #projet, #incidents définis","Variables Make pour secrets (jamais en clair dans les modules)"],"callouts":[{"kind":"warning","title":"Vérifier avant de traiter","body":"Validez signature ou token en premier module après le webhook — avant Slack, CRM ou toute action irréversible."},{"kind":"tip","title":"Router par gravité","body":"`severity=high` → #incidents avec @here optionnel. `severity=low` → #projet sans mention — évite la fatigue d’alerte."},{"kind":"example","title":"Payload minimal","body":"JSON minimal : event, project, severity, url, timestamp ISO8601 — pas de champs libres non validés."}],"sections":[{"heading":"Créer le webhook Make et sécuriser l’entrée","body":["Ajoutez un module « Custom webhook » — notez l’URL générée. Activez « JSON » comme type de données attendu. Renommez le scénario `[P1] Webhook → Slack`.","Configurez l’émetteur (Vercel deploy hook, formulaire custom, GitHub Action) pour envoyer un header `X-Signature` (HMAC-SHA256 du body avec secret) ou `Authorization: Bearer <token>` stocké en variable Make.","Dans Make, premier module après webhook : Router ou script de validation — si signature invalide, route vers « reject » (HTTP 401 response optionnelle) sans appeler Slack."]},{"heading":"Parser, filtrer et formater le message Slack","body":["Parse JSON → Set variables (`project`, `event`, `severity`, `url`). Router : branche high → Slack #incidents ; branche default → #projet.","Message Slack structuré : titre avec indicateur de gravité, champs en bullet, lien cliquable vers la tâche ClickUp ou le deploy Vercel. Évitez les murs de texte JSON.","Masquez les données sensibles : pas d’e-mail client complet en canal public — utilisez les 4 derniers caractères ou l’ID interne."]},{"heading":"Agréger plusieurs sources et monitorer","body":["Un même scénario peut recevoir plusieurs émetteurs si le secret et le schéma JSON sont partagés — ou dupliquez par source avec le même handler Slack pour limiter la complexité.","Branchez un error handler (make-gestion-erreurs-reprise) : échec Slack API → e-mail de secours au PM. Un incident non notifié est pire qu’un faux positif filtré.","Loggez chaque appel accepté/refusé dans Airtable (timestamp, event, signature_ok) pour audit léger — voir make-monitoring-logs-scenarios."]},{"heading":"Erreurs fréquentes","body":["Webhook public sans vérification : spam ou abus de quota Make.","Secret roté côté émetteur sans mise à jour Make : toutes les alertes rejetées silencieusement.","Notifier #general pour chaque build preview : bruit immédiat.","Payload non validé : injection de texte Slack (@channel forgé) si champs copiés tels quels."]},{"heading":"Ce qu’il faut retenir","body":["Signature ou bearer vérifié avant toute action.","Messages Slack courts, structurés, sans données sensibles.","Routage par gravité ; error handler de secours.","Logs d’acceptation/rejet pour diagnostiquer les pannes."]}],"faq":[{"q":"L’intégration Slack native ClickUp suffit-elle ?","a":"Souvent pour le simple. Make reste utile pour agréger deploy + formulaire + monitoring custom avec le même format de message."},{"q":"Comment implémenter HMAC en Make sans code ?","a":"Utilisez le module crypto Make (HMAC SHA256) sur le body brut et comparez au header. Le crypto natif Make suffit en général."},{"q":"Comment limiter le débit des alertes ?","a":"Datastore Make ou compteur Airtable : plus de N appels / minute → route « throttle » avec alerte unique, pas 50 messages Slack."}],"sources":[{"label":"Make : Webhook","href":"https://www.make.com/en/help/tools/webhook"},{"label":"Make : Slack","href":"https://www.make.com/en/help/apps/slack"},{"label":"OWASP : Webhook security","href":"https://cheatsheetseries.owasp.org/cheatsheets/Webhook_Security_Cheat_Sheet.html"}],"relatedTutorialSlugs":["make-formulaire-vers-crm","make-gestion-erreurs-reprise","make-monitoring-logs-scenarios","clickup-zapier-make-automatisations"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/make"],"relatedMissionSlugs":[],"status":"published"},{"slug":"wordpress-theme-enfant-structure-projet","title":"WordPress : thème enfant et structure","description":"Structurez un thème enfant WordPress pour vos livraisons agence : arborescence, hooks, assets versionnés. Évitez la casse lors des mises à jour du thème parent.","h1":"Thème enfant WordPress","intro":"Modifier directement un thème parent expose vos livraisons à la casse à chaque mise à jour WordPress ou du fournisseur. Les correctifs CSS et hooks PHP disparaissent sans trace ni alerte. Vous allez poser un thème enfant versionné : arborescence claire, conventions de nommage et flux de recette adapté aux projets B2B.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":3,"categories":["cms"],"tools":["wordpress"],"expertisePoles":["cms"],"prerequisites":["Accès FTP ou SSH au serveur WordPress, ou environnement local (Local, DDEV)","Thème parent identifié (Astra, GeneratePress, thème custom client)","Dépôt Git pour versionner le thème enfant","30 minutes pour créer la structure et valider l’activation"],"callouts":[{"kind":"tip","title":"Un seul point d’entrée style.css","body":"Le fichier style.css du thème enfant doit déclarer Template: nom-du-parent. Centralisez vos imports SCSS ou CSS dans functions.php via wp_enqueue_style."},{"kind":"warning","title":"Ne jamais éditer le parent en prod","body":"Toute modification dans wp-content/themes/parent/ sera écrasée à la prochaine mise à jour. Documentez cette règle dans la passation client."},{"kind":"example","title":"Arborescence type agence","body":"cosmos-child/ : style.css, functions.php, assets/css/, assets/js/, template-parts/, inc/hooks.php. Overrides de templates uniquement si le parent ne propose pas de filtre."}],"sections":[{"heading":"Cadrage : pourquoi un thème enfant","body":["Le thème parent fournit la base (grille, typographie, blocs). Votre livraison agence ajoute l’identité visuelle, des templates métier et des intégrations. Sans thème enfant, ces ajouts vivent dans le parent ou via des plugins fragiles.","Le thème enfant hérite des templates non surchargés et charge vos fichiers en priorité. C’est le pattern recommandé par WordPress pour toute personnalisation durable."]},{"heading":"Créer et activer le thème enfant","body":["Créez le dossier wp-content/themes/cosmos-child/. Rédigez style.css avec Theme Name, Template (slug exact du parent) et Version. Ajoutez functions.php pour enqueue des assets avec filemtime en version.","Activez le thème enfant dans Apparence → Thèmes. Vérifiez la page d’accueil et une page interne : un slug Template erroné provoque une erreur fatale."]},{"heading":"Organiser hooks, assets et templates","body":["Découpez functions.php : inc/setup.php, inc/enqueue.php, inc/hooks.php. Chaque fichier a une responsabilité {{icon:check}} pour faciliter la revue en PR.","Pour un template spécifique, copiez depuis le parent vers le même chemin relatif dans l’enfant. WordPress résout l’enfant en premier."]},{"heading":"Erreurs fréquentes","body":["Template: mal orthographié dans style.css : le thème enfant n’apparaît pas ou casse le site.","Copier l’intégralité du parent dans l’enfant : dette de maintenance impossible.","CSS chargé sans dépendance au handle du parent : styles mal appliqués.","Oublier de tester la mise à jour du parent en préproduction."]},{"heading":"Ce qu’il faut retenir","body":["Thème enfant = bouclier contre les MAJ parent ; tout custom vit dans cosmos-child/, versionné en Git.","Structure plate : style.css, functions.php modulaire, assets/, template-parts/, overrides ciblés.","Recette systématique après activation et avant chaque MAJ parent en staging.","Documentez Template, versions et build pour la passation client et la maintenance longue durée."]}],"faq":[{"q":"Faut-il un thème enfant si le parent est un thème custom interne ?","a":"Oui si le parent sert plusieurs clients ou recevra des MAJ. Si le thème est 100 % sur mesure sans parent tiers, un thème standalone peut suffire."},{"q":"Peut-on utiliser un page builder sans thème enfant ?","a":"Les builders stockent souvent le layout en base. Le thème enfant reste pertinent pour CSS global, hooks PHP et templates natifs non gérés par le builder."},{"q":"Comment gérer SCSS ou Tailwind dans l’enfant ?","a":"Compilez en CI ou en local vers assets/css/main.css. Ne committez pas node_modules ; documentez npm run build dans le README du projet."}],"sources":[{"label":"WordPress : Child Themes","href":"https://developer.wordpress.org/themes/advanced-topics/child-themes/"},{"label":"WordPress Theme Handbook","href":"https://developer.wordpress.org/themes/"}],"relatedTutorialSlugs":["wordpress-custom-post-types-champs","wordpress-staging-mep-sans-casse","wordpress-passation-editeur-client"],"relatedExpertisePaths":["/expertises/cms/wordpress"],"relatedMissionSlugs":[],"status":"published"},{"slug":"clickup-zapier-make-automatisations","title":"Automatisations ClickUp : Zapier et Make","description":"Orchestrez ClickUp avec Zapier ou Make : notifications, tâches depuis formulaires, sync Airtable. Évitez le bruit tout en gardant le pilotage projet réactif.","h1":"Automatisations Zapier et Make","intro":"Les automatisations natives ClickUp couvrent les transitions simples ; Make et Zapier étendent le périmètre vers CRM, Slack formaté, Airtable et webhooks métier. L’enjeu n’est pas d’automatiser tout, mais de cibler les flux où une seconde de latence humaine coûte une journée de retard.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":3,"categories":["po-pm"],"tools":["clickup","make"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Statuts projet stabilisés avant toute automatisation","Compte Make ou Zapier avec accès API ClickUp","Intégration ClickUp ↔ Slack ou email si notifications externes"],"callouts":[{"kind":"warning","title":"Moins mais mieux","body":"Limitez-vous à 5–8 automatisations par Space au lancement. Mesurez le bruit une semaine avant d’en ajouter."},{"kind":"tip","title":"ClickUp natif d’abord","body":"Statut Bloqué → Slack, Validé recette → notifier PM : restez en natif. Make pour combiner CRM + ClickUp + Airtable en une chaîne."},{"kind":"example","title":"Scénarios agence","body":"Formulaire contact → tâche brief ClickUp · Brief validé → ligne Airtable · Jalon dépassé → message Slack formaté avec lien tâche."}],"sections":[{"heading":"Automatisations natives ClickUp","body":["Exemples utiles : passage en Bloqué → message canal projet ; Validé recette → notifier PM et dev lead ; date jalon dépassée → rappel assigné.","Filtrez par List pour ne pas alerter sur la maintenance hors projet client. Documentez chaque règle dans une Doc : déclencheur, action, owner.","Liez « MEP prod » en dépendance de « Validé recette » et « Backup validé ». ClickUp avertit ou bloque selon réglages — le graphe reste lisible (< 15 liens majeurs)."]},{"heading":"Make et Zapier : quand passer à l’externe","body":["Make si vous combinez plusieurs apps : webhook formulaire → Create task ClickUp → Update Airtable → Slack avec format riche.","Zapier pour des zaps simples deux étapes si votre stack est déjà sur Zapier. Comparez les quotas et le coût par opération sur vos volumes.","Idempotence : un même webhook ne doit pas créer trois tâches. Utilisez un identifiant unique (email + timestamp) et une recherche ClickUp avant création."]},{"heading":"Dépendances, monitoring et erreurs","body":["Scénarios Make critiques : activez l’historique d’exécution et une alerte email en cas d’échec. Un scénario silencieusement cassé = briefs perdus.","Évitez les automatisations qui réassignent sans règle métier : confusion ownership. Pas de dépendances circulaires.","Testez en sandbox Space avant production : déclencheurs réels, pas de données client."]},{"heading":"Erreurs fréquentes","body":["Notifier chaque commentaire : fatigue alertes, équipe ignore Slack.","Double création tâche (Zap + Make + natif) sur le même événement.","Automatisation qui change le statut sans validation humaine sur MEP.","Pas de logs Make : debugging impossible après trois mois."]},{"heading":"Ce qu’il faut retenir","body":["Natif ClickUp pour transitions métier simples ; Make/Zapier pour orchestration multi-outils.","Notifications sur bloqué, validé, retard — pas sur chaque micro-événement.","Idempotence, logs et sandbox avant mise en prod.","Ajoutez une automatisation à la fois, mesurez le bruit."]}],"faq":[{"q":"ClickUp, Make ou Zapier pour les notifications ?","a":"ClickUp natif pour le simple ; Make si vous combinez CRM, Slack formaté et Airtable dans la même chaîne."},{"q":"Make ou Zapier en 2026 ?","a":"Make offre plus de flexibilité sur les scénarios complexes agence. Zapier reste pertinent pour des intégrations deux étapes déjà en place."},{"q":"Comment éviter les boucles infinies ?","a":"Ne déclenchez pas « Update task » → Make → « Update task » sur le même champ. Filtrez sur un champ « sync OK » ou utilisez des webhooks unidirectionnels."}],"sources":[{"label":"ClickUp : Automations overview","href":"https://help.clickup.com/hc/en-us/articles/4427260194455-Automations-overview"},{"label":"Make : ClickUp app","href":"https://www.make.com/en/help/apps/clickup"}],"relatedTutorialSlugs":["clickup-statuts-workflow-livraison","make-clickup-tache-depuis-formulaire","clickup-make-sync-brief-airtable"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/clickup"],"relatedMissionSlugs":[],"status":"published"},{"slug":"cursor-tests-typage-strict","title":"Tests TypeScript stricts avec Cursor","description":"Tests unitaires Cursor sans any ni contournement strict : Vitest, Testing Library et rules projet. Tests maintenables pour dev en typage TypeScript strict.","h1":"Tests sans casser le typage","intro":"Les tests générés à la va-vite mockent tout le module et contournent `strict` via `as any`, ce qui produit des faux positifs rassurants. En encodant Vitest, Testing Library et vos helpers typés dans une rule `testing.mdc`, vous alignez l’agent sur des tests maintenables qui échouent quand le contrat TypeScript change.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["code"],"tools":["cursor"],"expertisePoles":["developpement"],"prerequisites":["Vitest (ou Jest) configuré avec `@testing-library/react`","`strict: true` dans tsconfig et CI locale `pnpm test`","Rule tests dans `.cursor/rules/testing.mdc` ou exemple de test existant dans le repo","Fichier source cible avec branches métier identifiables (pas uniquement du rendu statique)"],"callouts":[{"kind":"tip","title":"Exemple {{icon:check}} / {{icon:x}} dans la rule","body":"Montrez un test typé avec `userEvent.setup()` et un anti-exemple avec `as any` barré. L’agent reproduit le pattern visible."},{"kind":"warning","title":"Mocks minimaux","body":"Interdisez `vi.mock('@/lib/api')` global si seul un fetch est testé — mock plutôt `global.fetch` ou injectez une dépendance."},{"kind":"example","title":"Prompt génération","body":"« Génère `src/lib/blog/parser.test.ts` pour les branches d’erreur de `@src/lib/blog/parser.ts`. Vitest + Testing Library si UI. Pas de `@ts-ignore`, pas de snapshot seul. »"}],"sections":[{"heading":"Cadrer la rule testing.mdc","body":["Créez `.cursor/rules/testing.mdc` avec globs `**/*.test.ts`, `**/*.test.tsx`. Exigez : `import { describe, it, expect, vi } from 'vitest'`, `render` / `screen` Testing Library pour l’UI, `userEvent` pour les interactions.","Interdisez `@ts-ignore`, `as any`, et les snapshots seuls pour valider une UI. Autorisez `satisfies` et les helpers typés du repo (`createMockPost()`, factories). Référez un fichier test exemplaire @mentionné dans la rule.","Rappelez la politique couverture agence : prioriser chemins métier et régressions connues, pas 100 % sur les pages marketing."]},{"heading":"Générer et affiner les tests","body":["Sélectionnez le fichier source ou @mentionnez-le. Prompt : « Tests pour branches critiques : validation, erreur réseau, état vide. Un describe par fonction exportée. » Relisez les mocks : trop larges masquent les régressions.","Lancez `pnpm test chemin/fichier.test.ts`. En cas d’échec, coller l’erreur complète : « corrige le test sans assouplir le typage ». Itérez test par test, pas regenerate all.","Pour composants async Server-only, testez la logique extraite dans `lib/` plutôt que le RSC directement — ou utilisez des tests d’intégration ciblés si déjà en place."]},{"heading":"Intégrer à la CI et la PR","body":["Vérifiez que les nouveaux tests passent en CI locale (`pnpm run verify:*` si script agence). Mentionnez dans la PR quels chemins métier sont couverts.","Refusez les tests qui dupliquent l’implémentation (assertion sur détail interne) : préférez comportement observable (texte, rôle, callback)."]},{"heading":"Erreurs fréquentes","body":["Accepter `expect(result as any).toBe(...)` pour faire passer Vitest.","Mock du module entier alors qu’un spy sur une fonction suffit.","Tests UI sans `await userEvent.click` : race conditions flaky.","Générer 200 lignes de tests superficiels pour gonfler la couverture.","Oublier `cleanup` implicite : Testing Library moderne le gère, mais pas les timers `vi.useFakeTimers` mal reset."]},{"heading":"Ce qu’il faut retenir","body":["Rule `testing.mdc` + exemple typé = tests sans contournement strict.","Mocks minimaux, assertions comportementales, pas de snapshot seul UI.","`pnpm test` local avant PR ; itération sur échecs un par un.","Couverture ciblée chemins métier, pas chiffre vanity sur le marketing."]}],"faq":[{"q":"Quelle couverture viser ?","a":"Priorisez parsers, validateurs, hooks métier et régressions ticketées. 100 % sur les pages vitrine n’est pas l’objectif ; la confiance sur les chemins critiques si."},{"q":"Vitest ou Jest : la rule change-t-elle ?","a":"Adaptez imports et config dans `testing.mdc`. Le principe reste : pas de `any`, Testing Library pour l’UI, mocks ciblés."},{"q":"Comment tester un Server Action Next.js ?","a":"Extrayez la logique pure dans `lib/` testable. Pour l’Action elle même, tests d’intégration ou e2e selon votre stack — précisez-le dans la rule pour éviter des mocks HTTP fragiles."}],"sources":[{"label":"Vitest : Guide","href":"https://vitest.dev/guide/"},{"label":"Testing Library : React","href":"https://testing-library.com/docs/react-testing-library/intro/"},{"label":"Cursor : Rules","href":"https://cursor.com/docs/context/rules"}],"relatedTutorialSlugs":["cursor-setup-projet-rules"],"relatedExpertisePaths":["/expertises/developpement/react"],"relatedMissionSlugs":[],"status":"published"},{"slug":"figma-prototype-parcours-ecommerce","title":"Prototype Figma parcours e-commerce","description":"Prototypage du tunnel achat : PLP, fiche produit, panier, checkout. Interactions, états erreur, tests utilisateur et validation client avant intégration.","h1":"Prototype parcours e-commerce","intro":"Coder un tunnel e-commerce avant validation des parcours expose le projet aux retours tardifs sur la friction, le copy et les enchaînements. Un prototype Figma interactif permet de tester le happy path et les cas d'erreur avec le client — avant Shopify, headless ou intégration custom. Vous allez structurer les flows, les interactions et la traçabilité des décisions.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["ecommerce","design"],"tools":["figma"],"expertisePoles":["developpement"],"prerequisites":["Parcours critiques listés (découverte → achat, compte invité, retour stock)","Composants e-commerce de base (CardProduct, CartLine, CheckoutStep)","Convention de nommage des frames par étape du tunnel","Template Notion ou doc pour compte-rendu de tests"],"callouts":[{"kind":"tip","title":"Parcours critique d'abord","body":"PLP → PDP → panier → checkout invité suffit pour une V1 prototype. Le compte client et le wishlist peuvent suivre après validation du tunnel principal."},{"kind":"warning","title":"Inclure les erreurs","body":"Stock épuisé, paiement refusé, code promo invalide : sans ces écrans, le client découvre les trous en recette."},{"kind":"example","title":"Scénario de test","body":"« Achetez un produit en taille M, livraison domicile, paiement carte — sans créer de compte. » Chronométrez et notez les hésitations."}],"sections":[{"heading":"Cartographier les flows e-commerce","body":["Listez les parcours : happy path achat, abandon panier, erreur stock, paiement échoué, création compte optionnelle. Chaque flow devient une section Figma avec un frame de départ nommé.","Réutilisez les composants du design system (voir figma-composants-design-system) : même CardProduct en PLP et en cross-sell checkout.","Définissez les points de décision : invité vs connecté, retrait magasin vs livraison. Chaque branche reçoit des interactions prototype explicites."]},{"heading":"Configurer interactions et micro-états","body":["Liez les hotspots : clic « Ajouter au panier » → overlay panier ou page panier selon le pattern retenu. Transitions cohérentes (smart animate, dissolve).","Prototypage des overlays : mini-cart, modal taille, lightbox image. Précisez le comportement scroll et fermeture (clic extérieur, ESC) en annotation.","Ajoutez les états vides : panier vide, recherche sans résultat, liste de souhaits vide. Ils conditionnent copy et CTA de repli."]},{"heading":"Tester et valider avant développement","body":["Publiez un lien prototype Figma en mode présentation. Préparez 3–5 tâches scénarisées pour tests modérés ou envoi async au client.","Consignez les observations dans Notion : friction, libellés confus, étapes superflues. Priorisez les corrections sur le prototype — pas en tickets dev prématurés.","Après validation client signée, passez le statut des frames en « Ready for dev » et liez au handoff Dev Mode."]},{"heading":"Erreurs fréquentes","body":["Prototype uniquement desktop alors que la majorité du trafic e-commerce est mobile.","Oublier le retour arrière checkout (modifier adresse, changer quantité).","Interactions vers des frames hors périmètre (lien mort) : casse la crédibilité en démo client.","Lancer l'intégration sans validation des états erreur paiement."]},{"heading":"Ce qu'il faut retenir","body":["Happy path + erreurs prototypés avant code.","Composants réutilisés ; pas de frames jetables.","Tests utilisateur ou client tracés dans Notion.","Validation figée avant sprint d'intégration e-commerce."]}],"faq":[{"q":"Faut-il un prototype haute fidélité pour l'e-commerce ?","a":"Suffisant sur le parcours et les interactions pour la V1. Le polish visuel peut itérer en parallèle une fois le flux validé."},{"q":"Combien de flows minimum pour valider le tunnel ?","a":"Achat invité complet + un cas d'erreur stock ou paiement. Étendez selon la complexité métier (B2B, devis, configurateur)."},{"q":"Peut-on remplacer le prototype Figma par un staging ?","a":"Figma pour les décisions rapides en amont. Un staging partiel intervient après validation flux, pour les tests de perf et paiement réel."}],"sources":[{"label":"Figma : Prototyping","href":"https://help.figma.com/hc/en-us/articles/360040328193-Guide-to-prototyping"},{"label":"NN/g : Usability testing 101","href":"https://www.nngroup.com/articles/usability-testing-101/"}],"relatedTutorialSlugs":["figma-composants-design-system","figma-handoff-dev-mode","cursor-figma-implementer-maquette"],"relatedExpertisePaths":["/expertises/developpement/ecommerce"],"relatedMissionSlugs":["le-grand-atelier-woocommerce"],"status":"published"},{"slug":"raci-clickup-multi-equipes","title":"RACI ClickUp : multi-équipes projet web","description":"RACI dans ClickUp pour projets web multi-équipes : Responsible, Accountable, Consulted, Informed. Champs custom, watchers et assignation pour PM et PO.","h1":"RACI et assignation multi-équipes","intro":"Quand personne ne sait qui décide, les tâches stagnent et les relances s’accumulent. Modéliser un RACI léger dans ClickUp évite les « tous assignés » ou les zones sans owner sur un projet web impliquant agence, client et parfois intégrateur.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"avance","readingTimeMinutes":3,"categories":["po-pm"],"tools":["clickup"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Matrice RACI validée en atelier (même brouillon signé par le PO client)","Rôles nommés : PM agence, lead dev, designer, client PO, QA","Templates de tâches recette et livraison déjà créés dans ClickUp"],"callouts":[{"kind":"tip","title":"Un accountable par tâche","body":"Un seul assigné principal (Accountable). Les autres rôles passent par champs people custom ou watchers — jamais quatre assignés sur la même carte."},{"kind":"example","title":"Recette page Contact","body":"Responsible : dev front. Accountable : PM agence. Consulted : designer (via @mention). Informed : client PO (watcher)."}],"sections":[{"heading":"Cadrer le RACI avant ClickUp","body":["En atelier de lancement, fixez qui décide, qui exécute, qui consulte et qui est informé pour chaque type de livrable : brief, maquette, intégration, recette, MEP.","Limitez-vous à quatre ou cinq rôles récurrents. Un RACI à douze colonnes ne tient pas dans l’outil ni dans la tête des équipes.","Documentez la matrice dans une ClickUp Doc liée au Space projet — c’est la référence en cas de désaccord."]},{"heading":"Traduire le RACI en champs ClickUp","body":["Assigné = Responsible (fait le travail). Champ personne « Accountable » = valide la livraison. Watchers = Informed sur l’avancement.","Consulted = @mention ciblée dans un commentaire ou champ texte « Avis attendu de » avec date limite.","Créez un select « Rôle attendu » sur les templates recette : Dev / Design / Client / QA. Il alimente vos vues filtrées."]},{"heading":"Vues et rituels par équipe","body":["Vue « Design — en cours » : filtre assigné équipe design OU champ rôle = Design. Idem pour dev et validation client.","Évitez les Spaces séparés par équipe sur un même projet : vous perdez les dépendances entre tâches.","Au daily, le PM parcourt la vue « Bloqué sans accountable » : toute tâche sans owner visible est corrigée avant la réunion client."]},{"heading":"Erreurs fréquentes","body":["Multi-assigner toute l’équipe « pour que tout le monde voie » : personne ne se sent responsable.","Confondre Informed et Consulted : trop de watchers noient les notifications utiles.","Recréer le RACI tâche par tâche au lieu de l’inscrire dans les templates.","Laisser le client en édition sur les Lists de production : il modifie des tâches sans passer par le PM.","Oublier de retirer les watchers quand une phase se termine."]},{"heading":"Ce qu’il faut retenir","body":["RACI explicite dans les templates, pas re-négocié à chaque carte.","Un accountable, des watchers pour l’info, @mention pour le consulté ponctuel.","Vues filtrées par rôle pour le daily et le reporting client."]}],"faq":[{"q":"Faut-il un outil RACI dédié ?","a":"Non pour la plupart des projets web agence. ClickUp + atelier initial suffit si le PM maintient la discipline sur les templates."},{"q":"Comment gérer le client qui assigne directement les devs ?","a":"Droits commentaire sur les Lists recette, édition réservée au PM agence. Le RACI Doc rappelle qui valide quoi."},{"q":"Le RACI évolue en cours de projet ?","a":"Oui, en revue mi-projet : ajustez les champs template et communiquez le delta en une ClickUp Doc, pas par oral dispersé."}],"sources":[{"label":"ClickUp : Assign tasks","href":"https://help.clickup.com/hc/en-us/articles/4427260194455-Assign-tasks"}],"relatedTutorialSlugs":["clickup-templates-projet-recurrent","workspace-clickup-projet-web"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/gouvernance-projet"],"relatedMissionSlugs":[],"status":"published"},{"slug":"formulaire-contact-validation-antispam","title":"Formulaire contact : validation anti-spam","description":"Protégez un formulaire contact Next.js : validation client-serveur, honeypot, rate limit, retours accessibles. Server Actions pour sites B2B agence web.","h1":"Formulaire contact : validation et anti-spam","intro":"Un formulaire contact efficace combine validation claire pour l’utilisateur et garde-fous côté serveur contre le spam automatisé. Sur Next.js, une Server Action ou une route API centralise la logique métier. Vous allez poser une double validation, des mécanismes anti-spam pragmatiques et des retours accessibles sans friction excessive.","datePublished":"2026-06-03","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["accessibilite"],"tools":["cursor","figma"],"expertisePoles":["developpement"],"prerequisites":["Formulaire React existant ou composant UI champs texte/email","Route API ou Server Action pour l’envoi email","Environnement de test avec logs serveur accessibles","Service transactionnel configuré (Resend, SendGrid ou équivalent)"],"callouts":[{"kind":"warning","title":"Ne pas se fier au client seul","body":"Toute validation JavaScript peut être contournée. Revalidez email, longueurs et champs obligatoires côté serveur systématiquement."},{"kind":"tip","title":"Honeypot + rate limit d’abord","body":"Couvrent la majorité du spam sans CAPTCHA. Réservez turnstile/hCaptcha aux sites très exposés."},{"kind":"example","title":"Limites serveur","body":"Message max 5 000 caractères · email normalisé (trim, lowercase) · refus 400 si honeypot rempli (silencieux côté UI)."}],"sections":[{"heading":"Validation accessible côté client","body":["Associez chaque champ à un `<label>` et des messages d’erreur liés via `aria-describedby`. Validez au blur et à la soumission ; annoncez les erreurs sans perdre le focus.","Types HTML (`type=\"email\"`, `autocomplete`) comme première ligne de défense. États erreur visuels + texte explicite, jamais couleur seule.","Bouton submit explicite (« Envoyer ma demande »). Désactivez le double envoi (`aria-busy` ou disabled pendant le POST)."]},{"heading":"Traitement serveur robuste","body":["Dans la Server Action ou l’API route : parsez le corps, refusez les payloads incomplets (400). Normalisez l’email et vérifiez le format avec une librairie robuste.","Limitez la taille des champs pour éviter les abus. Retournez des messages d’erreur génériques à l’utilisateur ; logguez le détail côté serveur (IP, user-agent) pour analyse.","Envoyez l’email via un service transactionnel avec template et reply-to sur l’email soumis si pertinent."]},{"heading":"Anti-spam pragmatique","body":["Champ honeypot caché visuellement (`aria-hidden`, hors tab order) : si rempli, rejeter silencieusement sans erreur visible (évite le feedback aux bots).","Rate limiting par IP ou token (edge middleware, Upstash, limite hébergeur Vercel). Délai minimum entre affichage et soumission via timestamp signé.","Pour sites très exposés : CAPTCHA turnstile/hCaptcha en complément, pas en première intention — impact accessibilité et conversion."]},{"heading":"Erreurs fréquentes","body":["Validation client uniquement : spam et injections passent.","Messages d’erreur serveur techniques exposés à l’utilisateur (« SQL error »).","Honeypot visible ou focusable : utilisateurs légitimes bloqués.","Pas de test parcours erreur réseau et timeout : UX brisée sans feedback."]},{"heading":"Ce qu’il faut retenir","body":["Double validation client + serveur, messages accessibles.","Honeypot + rate limit couvrent la majorité du spam.","Tester succès, erreur validation, erreur réseau et honeypot.","Server Action pour formulaire same-origin simple ; API route si multi-clients."]}],"faq":[{"q":"Faut-il une Server Action ou une API route ?","a":"Server Action pour un formulaire unique same-origin simple. API route si vous exposez un endpoint consommé par plusieurs clients ou webhooks."},{"q":"Faut-il un CAPTCHA dès le jour 1 ?","a":"Non. Honeypot + rate limit + validation serveur suffisent sur la plupart des sites B2B. Ajoutez CAPTCHA si spam persistant après mesure."},{"q":"Comment tester l’anti-spam avant mise en prod ?","a":"Script curl avec honeypot rempli (doit échouer silencieusement), rafale de requêtes (rate limit), payload invalide (400 avec message accessible)."}],"sources":[{"label":"Next.js — Server Actions","href":"https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations"},{"label":"RGAA — formulaires","href":"https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/"}],"relatedTutorialSlugs":["accessibilite-formulaire-labels-aria-live","redirections-301-nextjs"],"relatedMissionSlugs":["adverteasy"],"relatedExpertisePaths":["/expertises/developpement/accessibilite-numerique","/expertises/developpement/site-web"],"status":"published"},{"slug":"workspace-clickup-projet-web","title":"ClickUp : structurer un projet web","description":"Hiérarchie ClickUp pour projet web : Workspace, Space, Folder, List. Conventions de nommage, droits client et champs utiles au pilotage PO et PM agence.","h1":"Structurer ClickUp pour un projet web","intro":"Un projet web dérape quand personne ne sait où chercher le brief ou la recette. Posez Workspace, Space, Folder et List dès le cadrage. Vous allez structurer un Space projet et fixer les conventions jusqu’à la MEP.","datePublished":"2026-06-10","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":4,"categories":["po-pm"],"tools":["clickup"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Compte ClickUp avec droits d’administration sur le Workspace","Périmètre projet web validé : livrables, jalons et interlocuteurs client","30 à 45 minutes pour la configuration initiale du Space","Phases de livraison alignées avec l’équipe (cadrage → MEP)"],"callouts":[{"kind":"tip","title":"Un Workspace par organisation","body":"ClickUp recommande un Workspace par entreprise. Multipliez les Spaces, pas les Workspaces : vous gardez templates, membres et reporting centralisés."},{"kind":"warning","title":"Ne pas sur-architecturer","body":"Trois niveaux (Space, Folder, List) suffisent pour la plupart des projets web agence. Réservez les sous-tâches imbriquées aux chantiers réellement complexes."},{"kind":"example","title":"Modèle agence","body":"Space « Client — refonte site », Folders « Discovery », « Design », « Développement », « MEP », Lists « Backlog », « Sprint en cours », « Recette client »."}],"sections":[{"heading":"Hiérarchie ClickUp et Space projet","body":["Le Workspace contient tout : membres, facturation, templates. Les Spaces segmentent les flux. Les Folders regroupent des Lists liées à une phase. Les Lists contiennent les tâches.","Créez un Space par projet ou par client. Nommez explicitement : « Acme — refonte e-commerce 2026 ». Définissez des statuts alignés (À faire, En cours, En revue, Bloqué, Terminé). Client en lecture sur recette ; équipe en édition sur production."]},{"heading":"Folders, Lists et tâches types","body":["Les Folders matérialisent les étapes : cadrage, design, développement, recette, MEP. Sur une landing courte, un Folder « Livraison » avec trois Lists suffit.","Chaque List répond à une question actionnable. Au-delà de 80 tâches actives, scindez par lot. Modèles de tâches pour brief, recette RGAA, MEP. Champs custom : URL preview, environnement, type de livrable."]},{"heading":"Conventions de nommage et gouvernance","body":["Fixez une convention dès le jour 1 dans une ClickUp Doc : préfixe client, numérotation des phases, format des noms de tâches.","Désignez un référent ClickUp : seule cette personne crée les Spaces. Archivez à la livraison pour garder une sidebar exploitable."]},{"heading":"Erreurs fréquentes","body":["Tout mettre dans une seule List « Projet » : filtres inutilisables, client ne distingue plus recette et développement.","Multiplier les Workspaces par habitude : duplication des membres, templates et automatisations.","Folders imbriqués : ClickUp ne le permet pas ; préférez une nomenclature de Lists explicite.","Oublier d’archiver après livraison : sidebar encombrée, recherche impossible."]},{"heading":"Ce qu’il faut retenir","body":["Workspace = organisation ; Space = projet ou client ; Folder = phase ; List = lot actionnable.","Nommage explicite, statuts hérités et champs personnalisés valent plus qu’une arborescence profonde.","Référent structure + revue mi-projet évitent la dette organisationnelle.","La structure sert le handoff : le client retrouve brief, avancement et recette sans formation longue."]}],"faq":[{"q":"Faut-il un Space par projet ou par client ?","a":"Un Space par client si chantiers nombreux et simultanés ; un Space par projet si livrable unique majeur. L’essentiel : identifier le périmètre en moins de dix secondes dans la sidebar."},{"q":"Les Folders sont-ils obligatoires ?","a":"Non. ClickUp autorise des Lists directement dans un Space. Les Folders deviennent utiles dès que vous dépassez cinq Lists ou séparez nettement discovery, build et recette."},{"q":"Comment inviter le client sans exposer l’interne ?","a":"Permissions au niveau Space ou List : invité en commentaire sur les Lists de recette, masquage des Lists internes (estimations, dette). Vérifiez les options de partage selon votre plan ClickUp."}],"sources":[{"label":"ClickUp : Intro to the Hierarchy","href":"https://help.clickup.com/hc/en-us/articles/13856392825367-Intro-to-the-Hierarchy"},{"label":"ClickUp : Project Hierarchy Guide","href":"https://clickup.com/hierarchy-guide"},{"label":"ClickUp : Intro to Spaces","href":"https://help.clickup.com/hc/en-us/articles/6309466958103-Intro-to-Spaces"}],"relatedTutorialSlugs":["clickup-workspace-structure-agence","clickup-statuts-workflow-livraison","clickup-templates-projet-recurrent"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/clickup","/expertises/chefferie-de-projet/gouvernance-projet"],"relatedMissionSlugs":["maestro-gestion-conservatoire"],"status":"published"},{"slug":"optimiser-lcp-images-fonts","title":"LCP Next.js : images et polices","description":"Accélérez le LCP Next.js : hero prioritaire, AVIF/WebP, polices next/font subsetées. Méthode mesurable pour dev et PM avant mise en production Vercel.","h1":"Optimiser le LCP : images et polices","intro":"Le LCP (Largest Contentful Paint) mesure le temps d’affichage du plus grand élément visible. Sur un site vitrine Next.js, le coupable habituel est l’image hero ou la police de titre. Vous allez identifier l’élément LCP, optimiser images et polices, puis valider l’impact en lab et en données field.","datePublished":"2026-06-02","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["ecoconception"],"tools":["cursor","figma"],"expertisePoles":["developpement"],"prerequisites":["Accès Lighthouse, Chrome DevTools Performance ou Vercel Speed Insights","Composant Image next/image sur le hero ou équivalent","Maquette Figma avec dimensions cibles des visuels above-the-fold","Projet Next.js avec next/font ou stratégie polices documentée"],"callouts":[{"kind":"example","title":"Gain typique hero","body":"Remplacer un PNG hero 2400 px par un AVIF 1600 px avec `priority` et `sizes` adapté au viewport réduit souvent le LCP de plusieurs secondes sur mobile."},{"kind":"tip","title":"Mesurer avant d’optimiser","body":"Identifiez l’élément LCP dans Lighthouse ou Chrome DevTools Performance avant de toucher aux polices ou aux images secondaires."},{"kind":"warning","title":"Une seule priority","body":"L’attribut `priority` sur next/image doit être réservé à l’élément LCP. Trop de priority dilue l’effet et dégrade le waterfall réseau."}],"sections":[{"heading":"Comprendre le LCP sur un site vitrine","body":["Le LCP mesure le rendu du plus grand élément visible dans le viewport initial — souvent l’image hero, un bloc texte large ou une bannière.","Un mauvais LCP dégrade l’expérience mobile et peut impacter la visibilité SEO sur les pages à fort trafic.","Sur Next.js, le diagnostic commence par une trace Performance : repérez la ressource marquée LCP dans le waterfall réseau."]},{"heading":"Image LCP : format, taille et priority","body":["Utilisez `next/image` avec `priority` sur l’élément LCP uniquement — pas sur toutes les images above-the-fold.","Servez AVIF ou WebP, dimensions proches du rendu réel, attribut `sizes` cohérent avec le layout responsive.","Évitez le lazy-load sur l’image LCP : `priority` ou `loading=\"eager\"` selon l’API Image."]},{"heading":"Polices web et rendu du titre","body":["Préférez `next/font` pour l’auto-hébergement et la réduction des requêtes tierces.","Limitez les graisses chargées (souvent 2 familles × 2 graisses suffisent sur un vitrine).","Utilisez `display: swap` ou l’équivalent next/font pour éviter le FOIT prolongé sur le titre hero."]},{"heading":"Erreurs fréquentes","body":["Mettre `priority` sur toutes les images : le navigateur ne sait plus quoi charger en premier.","Hero 3000 px exporté Figma alors que le rendu max est 1200 px : poids inutile.","Polices Google Fonts chargées en parallèle de next/font : double téléchargement.","Optimiser en lab sans vérifier le field (CrUX, Search Console, Speed Insights)."]},{"heading":"Ce qu’il faut retenir","body":["Une seule image `priority`, formats modernes, dimensions réalistes.","Polices auto-hébergées et subset de graisses.","Mesure field pour valider l’impact réel utilisateur après déploiement."]}],"faq":[{"q":"Faut-il viser 2,5 s de LCP partout ?","a":"C’est le seuil « bon » Google au 75e percentile. Priorisez les pages à fort trafic et conversion ; ajustez le hero avant la longue traîne."},{"q":"Le LCP peut-il être du texte ?","a":"Oui si un titre ou paragraphe occupe la plus grande zone visible. Dans ce cas, optimisez surtout les polices et le CSS bloquant."},{"q":"Faut-il retirer l’animation du hero pour le LCP ?","a":"Pas systématiquement. Évitez que l’animation retarde le rendu de l’élément LCP ; testez avec prefers-reduced-motion activé."}],"sources":[{"label":"web.dev — LCP","href":"https://web.dev/articles/lcp"},{"label":"Next.js — Image Optimization","href":"https://nextjs.org/docs/app/building-your-application/optimizing/images"}],"relatedTutorialSlugs":["ecoconception-budget-poids-polices","redirections-301-nextjs"],"relatedMissionSlugs":["adverteasy"],"relatedExpertisePaths":["/expertises/developpement/performance-web"],"status":"published"},{"slug":"redirections-301-nextjs","title":"Redirections 301 sur Next.js","description":"Configurez des 301 permanentes Next.js (next.config, middleware) sans boucles. Table de correspondance, tests curl et recette SEO après refonte d’URL.","h1":"Redirections 301 : configuration et pièges","intro":"Après une refonte ou un changement d’URL, les redirections 301 préservent le référencement et évitent les 404. Sur Next.js, deux leviers couvrent la majorité des cas : `redirects` dans la configuration et le middleware pour les règles dynamiques. Vous allez cadrer la table de correspondance, implémenter les règles et valider l’absence de boucles avant mise en production.","datePublished":"2026-06-01","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":4,"categories":["seo-geo"],"tools":["cursor"],"expertisePoles":["developpement"],"prerequisites":["Projet Next.js avec accès à next.config.ts ou middleware.ts","Liste des anciennes et nouvelles URLs validée par l’équipe SEO","Environnement local Next.js (`next dev`) pour tester les règles","Outil de test HTTP : curl -I, onglet Réseau du navigateur ou équivalent"],"callouts":[{"kind":"tip","title":"Bon à savoir","body":"Google recommande les 301 pour les changements permanents d’URL afin de transférer la majorité des signaux de classement."},{"kind":"warning","title":"Éviter les chaînes","body":"Plus de deux redirections consécutives ralentissent le crawl et dégradent l’expérience. Visez un seul saut A → B."},{"kind":"example","title":"Règle type next.config","body":"`{ source: '/ancienne-page', destination: '/nouvelle-page', permanent: true }` — `permanent: true` émet un code 301."}],"sections":[{"heading":"Cadrer la table de correspondance URLs","body":["Avant d’écrire une ligne de code, validez avec le SEO lead une table source → destination : chemins relatifs, statut permanent ou temporaire, date de mise en prod.","Repérez les cas sensibles : pagination, trailing slash, URLs avec paramètres UTM, landing campagnes et fichiers PDF hébergés.","Versionnez la table en CSV ou dans Notion. Chaque redirection a un owner et une date de revue pour les futures refontes."]},{"heading":"Redirections statiques via next.config","body":["Dans next.config.ts, la clé `redirects` retourne un tableau de règles `{ source, destination, permanent: true }`.","Utilisez des chemins relatifs (`/ancienne-page` → `/nouvelle-page`). `permanent: true` émet un code 301.","Testez en local avec `next dev` puis vérifiez le code HTTP en production (curl -I ou les outils réseau du navigateur)."]},{"heading":"Middleware pour règles conditionnelles","body":["Le fichier middleware.ts s’exécute en edge avant le rendu. Utile pour rediriger selon le hostname, la locale ou un préfixe de chemin.","Retournez `NextResponse.redirect(url, 301)` pour une redirection permanente.","Limitez le matcher du middleware aux chemins concernés pour préserver les performances."]},{"heading":"Erreurs fréquentes","body":["Boucle A → B → A : vérifiez que la destination ne renvoie pas vers la source.","Redirection HTTP vers HTTPS oubliée : configurez-la au niveau hébergeur (Vercel) en complément.","Oublier les trailing slashes : alignez la politique (`trailingSlash`) sur les règles de redirection.","Chaînes A → B → C au lieu d’un saut direct A → C : ralentit crawl et utilisateurs."]},{"heading":"Ce qu’il faut retenir","body":["Table de correspondance validée avant implémentation.","next.config `redirects` pour les mappings fixes ; middleware pour la logique dynamique.","Toujours tester l’absence de boucles et le code 301 en production.","Documentez la table pour les futures refontes."]}],"faq":[{"q":"Faut-il utiliser une 301 ou une 302 ?","a":"301 pour un changement définitif d’URL. 302 uniquement pour des redirections temporaires (campagne, maintenance courte)."},{"q":"Combien de redirections gérer dans le repo ?","a":"Jusqu’à quelques centaines dans next.config reste lisible. Au-delà, envisagez un fichier JSON versionné ou une couche edge (CDN) pour centraliser."},{"q":"Comment tester les redirections avant mise en prod ?","a":"En local avec `next dev`, puis curl -I sur chaque URL source en preview et en production. Vérifiez code 301, destination finale et absence de boucle."}],"sources":[{"label":"Next.js — redirects","href":"https://nextjs.org/docs/app/api-reference/config/next-config-js/redirects"},{"label":"Google Search Central — redirections","href":"https://developers.google.com/search/docs/crawling-indexing/301-redirects"}],"relatedTutorialSlugs":["redirects-canonicals-seo-technique","optimiser-lcp-images-fonts"],"relatedMissionSlugs":["le-grand-atelier-woocommerce"],"relatedExpertisePaths":["/expertises/developpement/nextjs","/expertises/developpement/performance-web"],"status":"published"},{"slug":"redirects-canonicals-seo-technique","title":"Redirections, canonicals et SEO technique","description":"Alignez 301, canonicals et politique d’URL sur Next.js. Évitez doublons, chaînes de redirection et fuites crawl après refonte — pour dev, SEO et équipe contenu.","h1":"Redirections, canonicals et SEO technique","intro":"Après une refonte ou un changement d’arborescence, les redirections 301 et les canonicals mal configurés diluent le référencement et génèrent des 404 silencieux. Sur Next.js, vous combinez `redirects` dans next.config, metadata canonical et middleware pour une politique d’URL cohérente — sans promesse de position garantie.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["seo-geo"],"tools":["cursor"],"expertisePoles":["developpement"],"prerequisites":["Projet Next.js avec accès next.config.ts et layouts metadata","Table de correspondance anciennes → nouvelles URLs validée SEO","Outil de test : curl -I, Search Console, Screaming Frog ou équivalent","Politique trailing slash et www/non-www définie avec l’équipe contenu"],"callouts":[{"kind":"warning","title":"Éviter les chaînes","body":"Plus de deux redirections consécutives ralentissent le crawl. Visez un seul saut A → B, jamais A → B → C pour une même URL permanente."},{"kind":"tip","title":"Canonical = URL préférée","body":"Chaque page indexable déclare sa canonical absolue (https, sans paramètres UTM). La canonical ne remplace pas une 301 si l’ancienne URL doit disparaître."},{"kind":"example","title":"Cas refonte","body":"301 `/ancien-service` → `/expertises/developpement` · canonical sur la nouvelle URL · ancienne URL retourne bien 301 en prod (pas 200 avec canonical seule)."}],"sections":[{"heading":"Politique d’URL et canonicals","body":["Définissez une politique : trailing slash ou non, minuscules, pas de paramètres de session dans les URLs indexables. Alignez `trailingSlash` Next.js sur cette politique.","Canonical absolue dans metadata (`alternates.canonical`) : https, domaine de production, sans tracking. Pagination : canonical vers la page elle-même ou vue « view-all » selon stratégie retenue.","Pages techniques (merci formulaire, preview) : noindex + pas de canonical vers une page indexable voisine."]},{"heading":"Redirections 301 dans Next.js","body":["next.config.ts `redirects` : `{ source, destination, permanent: true }` pour mappings fixes post-refonte. Testez en local puis `curl -I` en production.","middleware.ts pour règles conditionnelles : hostname, locale, préfixe. `NextResponse.redirect(url, 301)` — limitez le matcher aux chemins concernés.","Complétez HTTP → HTTPS et www/non-www au niveau hébergeur (Vercel) pour ne pas dupliquer la logique applicative."]},{"heading":"Audit et maintenance post-refonte","body":["Table CSV versionnée : source, destination, date, owner. Revue après chaque déploiement majeur et import contenu CMS.","Search Console : pages avec redirection, doublons sans canonical, 404 en hausse. Croisez avec sitemap généré.","Avec Cursor : rule SEO listant les layouts à auditer ; demandez une revue canonical + redirect sur les templates modifiés."]},{"heading":"Erreurs fréquentes","body":["Canonical relative ou pointant vers preview/staging indexé par erreur.","301 et canonical contradictoires sur la même URL.","Boucle A → B → A : vérifiez que la destination ne redirige pas vers la source.","Oublier les assets PDF ou landing campagnes : 404 post-refonte."]},{"heading":"Ce qu’il faut retenir","body":["301 pour URL définitivement déplacée ; canonical pour URL préférée d’un contenu accessible.","next.config pour statique, middleware pour dynamique, hébergeur pour HTTPS/www.","Table de correspondance versionnée et test curl en prod.","Audit post-MEP : pas de chaîne, pas de boucle, pas de canonical preview."]}],"faq":[{"q":"Faut-il une 301 ou une canonical seule ?","a":"301 si l’ancienne URL ne doit plus exister. Canonical si plusieurs URLs servent le même contenu temporairement (paramètres UTM) — mais préférez bloquer l’indexation des variantes inutiles."},{"q":"Combien de redirections dans next.config ?","a":"Quelques centaines restent lisibles. Au-delà, fichier JSON versionné ou couche CDN. L’essentiel est la traçabilité."},{"q":"Comment gérer hreflang et canonical ensemble ?","a":"Chaque locale a sa canonical dans sa langue. hreflang lie les équivalents ; ne canonicalisez pas une page FR vers une EN."}],"sources":[{"label":"Google : Consolidate duplicate URLs","href":"https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls"},{"label":"Google : 301 redirects","href":"https://developers.google.com/search/docs/crawling-indexing/301-redirects"},{"label":"Next.js : redirects","href":"https://nextjs.org/docs/app/api-reference/config/next-config-js/redirects"}],"relatedTutorialSlugs":["redirections-301-nextjs","seo-geo-checklist-metadata-json-ld"],"relatedExpertisePaths":["/expertises/developpement/nextjs","/expertises/developpement/site-web"],"relatedMissionSlugs":["le-grand-atelier-woocommerce"],"status":"published"},{"slug":"seo-geo-checklist-metadata-json-ld","title":"Metadata et JSON-LD : checklist page","description":"Auditez title, description, canonical, OG et JSON-LD par page Next.js. Checklist Notion et revue Cursor pour PO, SEO lead et développeurs web en agence.","h1":"Checklist metadata et JSON-LD par type de page","intro":"Des pages sans metadata homogène ou sans JSON-LD adapté perdent en clarté pour les moteurs et les moteurs de réponse IA. Cette checklist vous guide type par type (accueil, hub, article, fiche produit) pour un site web professionnel sans promesses de position garantie.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["seo-geo"],"tools":["cursor","notion"],"expertisePoles":["developpement"],"prerequisites":["Accès au code ou au CMS générant les balises <head>","Inventaire des templates de page (hub, détail, formulaire)","Outil de test : Rich Results Test, view-source ou inspecteur","Base Notion ou tableur pour suivre l’audit page par page"],"callouts":[{"kind":"tip","title":"Une ligne par URL en Notion","body":"Base Notion : URL, type de page, title OK (oui/non), description OK, JSON-LD présent, date de revue. Filtre « à corriger » pour les sprints SEO."},{"kind":"warning","title":"Pas de JSON-LD fantaisiste","body":"N’ajoutez pas de FAQPage si la page n’a pas de FAQ visible. Les données structurées doivent refléter le contenu réel."},{"kind":"example","title":"Types JSON-LD courants","body":"Organization (accueil), WebSite + SearchAction (si recherche), Article (blog), FAQPage (FAQ), BreadcrumbList (fil d’Ariane), Product (e-commerce)."}],"sections":[{"heading":"Metadata communes à toutes les pages","body":["<title> unique, descriptif, ≤ 60 caractères utiles ; <meta name=\"description\"> unique, 140–160 caractères, alignée sur l’intention de la page.","Canonical absolu (https, sans paramètres de tracking). Robots : index,follow sauf pages techniques (merci, admin). Open Graph : og:title, og:description, og:image (1200×630), og:url, og:type.","Twitter card si trafic social pertinent. hreflang si multilingue. Vérifiez que le CMS ne génère pas de doublon via pagination mal canonicalisée."]},{"heading":"Checklist par type de page","body":["Accueil : Organization ou WebSite, description marque, og:image dédiée. Hub listing : title hub + description filtre ; canonical stable. Article / tutoriel : og:type article, dates published/modified, author, JSON-LD Article + BreadcrumbList.","FAQ : contenu visible + FAQPage JSON-LD aligné question/réponse. Fiche produit : title produit + marque, description unique, Product ou Offer selon le schéma retenu, image produit en og:image.","Contact / formulaire : title clair, noindex si page de remerciement sans valeur SEO."]},{"heading":"JSON-LD Next.js et suivi Notion","body":["Centralisez les builders JSON-LD (fonctions pures retournant un objet schema.org). Injectez via <script type=\"application/ld+json\"> ou composant JsonLd dédié, une entrée par type pertinent.","Article : headline, datePublished, dateModified, author (Person ou Organization), image, mainEntityOfPage. BreadcrumbList : itemListElement avec position et URL absolues.","Créez une rule Cursor « seo-metadata » avec globs sur layouts. Testez chaque template : Rich Results Test + HTML rendu (pas seulement le source RSC)."]},{"heading":"Erreurs fréquentes","body":["Title identique sur toutes les pages (« Accueil | Site » partout).","og:image manquante ou logo minuscule : partages sociaux dégradés.","Canonical pointant vers HTTP ou vers un domaine de preview."]},{"heading":"Ce qu’il faut retenir","body":["Inventaire Notion + revue Cursor = boucle de contrôle maintenable.","Metadata et JSON-LD par template, testés sur le HTML rendu.","Données structurées = reflet fidèle du contenu, pas de bourrage.","Canonical et OG systématiques avant toute campagne de contenu."]}],"faq":[{"q":"Faut-il placer le JSON-LD dans le head ou le body ?","a":"Les deux sont acceptés par Google. En Next.js App Router, un composant JsonLd en fin de page ou dans le layout est courant ; l’essentiel est la validité JSON et la cohérence avec le contenu."},{"q":"Faut-il un JSON-LD par page ou global ?","a":"Combinez : Organization souvent global ou sur l’accueil ; Article, FAQ, Product spécifiques à chaque URL concernée."},{"q":"Le JSON-LD aide-t-il le GEO (visibilité IA) ?","a":"Il clarifie le contexte pour les crawlers et systèmes de citation. Il ne garantit pas une inclusion dans les réponses LLM ; la qualité éditoriale et les sources restent déterminantes."}],"sources":[{"label":"Schema.org : Article","href":"https://schema.org/Article"},{"label":"Google : Structured data intro","href":"https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data"},{"label":"Notion : Organize with databases","href":"https://www.notion.com/help/guides/organize-your-work-with-databases"}],"relatedTutorialSlugs":["seo-geo-maillage-interne","cursor-setup-projet-rules"],"relatedExpertisePaths":["/expertises/developpement/nextjs","/expertises/developpement/site-web"],"relatedMissionSlugs":[],"status":"published"}],"initialFilters":{"tools":["clickup"]}}]}] </article></body></html>

18:["$","$b",null,{"fallback":["$","p",null,{"className":"text-sm text-[var(--color-text-300)]","children":"Chargement…"}],"children":["$","$L1a",null,{"tutorials":[{"slug":"clickup-custom-fields-metadonnees","title":"Champs custom ClickUp : métadonnées projet","description":"Définissez les champs custom ClickUp pour vos projets web : URL preview, environnement, lot et RACI. Vues filtrables et sync Airtable sans surcharger le kanban.","h1":"Champs custom et métadonnées","intro":"Quand tout devient un statut, le kanban explose. Les champs custom ClickUp portent la granularité métier — environnement, URL staging, lot facturable — sans multiplier les colonnes. Vous allez définir un socle de champs globaux, des règles de saisie et des vues qui en dépendent.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":3,"categories":["po-pm"],"tools":["clickup"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Space ou Workspace avec droits admin champs custom","Liste des métadonnées utiles au pilotage et au reporting (validée en atelier)","Templates tâches existants ou en cours de définition"],"callouts":[{"kind":"tip","title":"Champs globaux Workspace","body":"Créez les champs au niveau Workspace quand ils servent tous les projets : environnement, type livrable, URL preview. Évitez 40 champs locaux par Space."},{"kind":"example","title":"Socle agence web","body":"URL preview · Environnement (dev/staging/prod) · Type (page/composant/intégration) · Lot · Phase · Cause blocage."},{"kind":"warning","title":"Obligation vs option","body":"Trop de champs obligatoires tue l’adoption. Réservez required aux champs bloquants (URL preview en recette, cause si statut Bloqué)."}],"sections":[{"heading":"Cartographier les métadonnées utiles","body":["Listez ce que vous filtrez ou exportez : dashboards client, sync Airtable, rapports direction. Chaque métadonnée récurrente devient un champ, pas un tag libre dans la description.","Séparez statut (où en est la tâche) et métadonnée (contexte) : « En recette » est un statut ; « staging v2.3 » est un champ Environnement.","Alignez les libellés avec Airtable et Notion : mêmes noms de champs = sync Make sans mapping fragile."]},{"heading":"Types de champs et règles de saisie","body":["URL (preview, Figma) · Select (environnement, phase, type livrable) · People (Accountable RACI) · Number (estimate jours) · Dropdown cause blocage.","Valeurs select fermées : pas de « Autre » systématique qui casse les filtres. Ajoutez une valeur en gouvernance si besoin réel.","Intégrez les champs dans les templates : pré-remplissage phase et type livrable à la création depuis modèle."]},{"heading":"Exploiter les champs dans vues et automatisations","body":["Vues filtrées : « Recette staging » = statut En recette AND environnement = staging. Dashboard widget groupé par phase.","Automatisations : si Cause blocage = Client → notifier account manager ; si URL preview vide AND statut = En recette → refuser transition (via checklist ou règle équipe).","Export Make : mappez chaque champ custom vers colonne Airtable homonyme. Documentez le mapping dans Notion."]},{"heading":"Erreurs fréquentes","body":["Doublon champ local / global : valeurs incohérentes entre projets.","Champ texte libre pour ce qui devrait être un select : filtres impossibles.","Renommer un champ en production : sync Make cassée, historique perdu.","15 champs visibles par défaut : équipe ignore la saisie."]},{"heading":"Ce qu’il faut retenir","body":["Champs custom = granularité métier, statuts = workflow.","Socle global Workspace, required minimal, select fermés.","Templates pré-remplis, vues et sync alignées sur les mêmes libellés.","Référent valide tout nouveau champ avant déploiement."]}],"faq":[{"q":"Tags ou champs custom ?","a":"Champs custom pour tout ce que vous filtrez, exportez ou automatisez. Tags pour le libre ponctuel (urgent, demo) si votre équipe les discipline."},{"q":"Combien de champs maximum ?","a":"8–12 champs actifs par Space suffisent sur la plupart des projets web. Au-delà, auditez et archivez les champs morts."},{"q":"Comment modéliser le RACI ?","a":"Assigné = Responsible ; champ People « Accountable » ; watchers = Informed. Consulted reste une @mention ponctuelle."}],"sources":[{"label":"ClickUp : Custom Fields overview","href":"https://help.clickup.com/hc/en-us/articles/4427260194455-Custom-Fields-overview"}],"relatedTutorialSlugs":["clickup-workspace-structure-agence","raci-clickup-multi-equipes"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/clickup"],"relatedMissionSlugs":[],"status":"published"},{"slug":"animations-gsap-reduced-motion","title":"GSAP accessible : fallback reduced-motion","description":"GSAP accessible : matchMedia, durées réduites et états statiques. Du Figma à useGSAP en React — pour dev, design et recette sans exclure reduced-motion.","h1":"Animations GSAP avec fallback reduced-motion","intro":"Les animations renforcent la hiérarchie visuelle, mais un parallax agressif ou une boucle infinie peut provoquer inconfort ou vertiges — et faire échouer la recette accessibilité. La requête média `prefers-reduced-motion` impose un parcours alternatif. Vous allez aligner les choix Figma et l’implémentation GSAP avec `matchMedia`, cleanup au démontage et tests OS réels.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"avance","readingTimeMinutes":4,"categories":["animations","accessibilite"],"tools":["cursor","figma"],"expertisePoles":["developpement"],"prerequisites":["GSAP installé dans le projet (`gsap`, éventuellement `@gsap/react`)","Hook `useGSAP` ou pattern `gsap.context()` pour le cleanup","Maquette Figma indiquant animations essentielles vs décoratives","Accès aux réglages « Réduire les animations » Windows / macOS pour test"],"callouts":[{"kind":"warning","title":"Pas d’autoplay infini","body":"Carrousels, marquees et parallax continus doivent s’arrêter ou être remplacés par un état statique quand reduced-motion est actif."},{"kind":"tip","title":"matchMedia GSAP","body":"`gsap.matchMedia()` centralise desktop, mobile et `(prefers-reduced-motion: reduce)` — un seul contexte à revert au unmount."},{"kind":"example","title":"Fallback type","body":"Parallax hero → simple fade-in 200 ms ou image fixe. ScrollTrigger pinning → section statique avec ancre classique."}],"sections":[{"heading":"Cadrer le motion design côté Figma","body":["Classez chaque animation : essentielle (feedback clic, révélation contenu) ou décorative (parallax, flottement). Seules les essentielles méritent un fallback actif — les décoratives sont désactivées en reduced-motion.","Prototypage Figma : fournissez une frame « reduced » ou une annotation sur le composant hero. Le développeur n’invente pas un état alternatif en sprint.","Coordonnez avec figma-audit-contraste-accessibilite : une animation ne doit pas masquer un problème de focus ou de lisibilité."]},{"heading":"Implémenter gsap.matchMedia en React","body":["Dans un Client Component, `useGSAP(() => { const mm = gsap.matchMedia(); mm.add('(prefers-reduced-motion: reduce)', () => { /* tweens courts ou disable */ }); mm.add('(prefers-reduced-motion: no-preference)', () => { /* ScrollTrigger, parallax */ }); return () => mm.revert(); }, { scope: containerRef });`","Évitez les ScrollTrigger créés hors matchMedia : ils persistent après changement de préférence OS si l’utilisateur bascule sans recharger (cas rare mais réel sur certains navigateurs).","Préférez `transform` et `opacity` — pas d’animation de `height` ou `top` qui provoque du reflow. Voir les bonnes pratiques perf GSAP du projet."]},{"heading":"Tester et valider en recette","body":["Activez « Réduire les animations » dans les paramètres système, rechargez la page : le hero ne doit plus pin/scrub. Désactivez — l’expérience riche revient sans erreur console.","Testez clavier : le focus reste visible pendant et après l’animation. Pas de `pointer-events: none` oublié sur les CTA.","Documentez dans la checklist recette Notion (notion-checklist-recette-mise-en-prod) : case « reduced-motion validé sur homepage + section animée »."]},{"heading":"Erreurs fréquentes","body":["Vérifier reduced-motion uniquement en CSS global sans toucher GSAP : les tweens JS continuent.","Oublier `mm.revert()` ou `ctx.revert()` au unmount : fuites ScrollTrigger en navigation SPA.","Remplacer par une animation plus longue « pour compenser » — l’utilisateur a demandé moins de mouvement.","ScrollTrigger sur tout le site sans audit : charge CPU et accessibilité dégradée."]},{"heading":"Ce qu’il faut retenir","body":["matchMedia GSAP obligatoire dès qu’un ScrollTrigger ou parallax est présent.","Design distingue essentiel vs décoratif ; fallback documenté.","Cleanup useGSAP / context au démontage.","Test OS reduced-motion avant mise en prod."]}],"faq":[{"q":"Faut-il désactiver toute animation en reduced-motion ?","a":"Non. Réduisez durée et amplitude, ou remplacez par un fondu court. Le contenu et les actions restent disponibles."},{"q":"Et si le client exige le parallax ?","a":"Exposez le risque accessibilité. Gardez le parallax sous `no-preference` uniquement ; jamais en override forced."},{"q":"Le CSS prefers-reduced-motion suffit-il sans GSAP ?","a":"Pour du CSS pur, oui. Dès que GSAP pilote le mouvement, la logique doit vivre dans matchMedia — le CSS seul ne stoppe pas les tweens JS."}],"sources":[{"label":"MDN : prefers-reduced-motion","href":"https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion"},{"label":"WCAG 2.2 : Animation from interactions","href":"https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html"}],"relatedTutorialSlugs":["figma-audit-contraste-accessibilite","cursor-composant-react-accessible","notion-checklist-recette-mise-en-prod"],"relatedExpertisePaths":["/expertises/developpement/site-web"],"relatedMissionSlugs":[],"status":"published"},{"slug":"accessibilite-formulaire-labels-aria-live","title":"Formulaires accessibles : labels aria-live","description":"Rendez vos formulaires web conformes RGAA : labels visibles, erreurs annoncées, aria-live. De Figma à React avec Cursor pour PO, design et développement.","h1":"Labels, erreurs et aria-live en formulaire","intro":"Un formulaire inaccessible bloque la conversion et expose au risque juridique. Les erreurs les plus fréquentes — placeholder à la place du label, message d’erreur uniquement en rouge, pas d’annonce aux lecteurs d’écran — se corrigent avec des patterns simples dès la maquette.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["accessibilite"],"tools":["figma","cursor"],"expertisePoles":["developpement"],"prerequisites":["Notions de HTML sémantique (label, input, fieldset)","Projet React ou HTML avec validation côté client et serveur","Extension navigateur ou lecteur d’écran pour tests rapides (NVDA, VoiceOver)","Maquette Figma ou design system avec états champ normal, erreur et succès"],"callouts":[{"kind":"tip","title":"Label visible > placeholder","body":"Le placeholder n’est pas un label. Associez chaque champ avec ou un input imbriqué dans le label."},{"kind":"warning","title":"Couleur seule interdite","body":"Une bordure rouge sans texte d’erreur ni icône avec alternative textuelle est insuffisante pour de nombreux utilisateurs."},{"kind":"example","title":"Pattern erreur","body":"aria-invalid=\"true\" sur le champ + id du message d’erreur référencé par aria-describedby + aria-live=\"polite\" sur la zone de résumé."}],"sections":[{"heading":"Cadrer le formulaire en maquette Figma","body":["Chaque champ a un label visible, un hint optionnel et un état erreur avec message textuel explicite (« L’email doit contenir un @ »).","Ordre de tabulation logique : haut vers bas, gauche vers droite. Groupez les champs liés (adresse) dans un fieldset avec legend.","Indiquez les champs obligatoires avec « obligatoire » dans le label ou aria-required, pas uniquement un astérisque sans légende globale."]},{"heading":"Associer labels, erreurs et aria-live","body":["Utilisez courriel et . Pour les cases à cocher, préférez un label cliquable englobant ou une paire for/id.","Instructions permanentes : aria-describedby pointant vers l’id du hint. Ne dupliquez pas le label dans le placeholder. À la validation, posez aria-invalid=\"true\" sur les champs en échec et référencez le message d’erreur via aria-describedby.","Résumé en tête de formulaire :

pour les erreurs bloquantes après soumission. Succès asynchrone : zone aria-live=\"polite\" annonçant « Votre message a été envoyé ».","Bouton submit explicite (« Envoyer ma demande ») plutôt que « OK ». Désactivez le double envoi (aria-busy ou disabled pendant le POST)."]},{"heading":"Implémenter avec Cursor sans régression","body":["Ajoutez une rule `.mdc` accessibilité formulaires avec exemples {{icon:check}}/{{icon:x}}. Demandez à l’agent de composer un composant en citant @W3C ou votre design system.","Vérifiez le focus visible (outline ou ring) sur tous les interactifs. Ne supprimez pas outline sans substitut conforme.","Testez au clavier seul : tab, shift+tab, espace sur checkbox, entrée sur submit. Puis une passe lecteur d’écran sur un parcours erreur volontaire."]},{"heading":"Erreurs fréquentes","body":["Label masqué en CSS display:none alors qu’il devrait être visible ou sr-only correctement.","aria-live sur tout le document : annonces intempestives à chaque frappe.","Erreur uniquement via toast disparu avant lecture par la technologie d’assistance.","Captcha sans alternative accessible ou champ obligatoire non signalé avant submit."]},{"heading":"Ce qu’il faut retenir","body":["Label visible + for/id sur chaque champ.","Erreur textuelle + aria-invalid + aria-describedby.","aria-live pour succès et résumé d’erreurs post-submit.","Design Figma et code React partagent les mêmes états."]}],"faq":[{"q":"Comment choisir entre aria-live polite et assertive ?","a":"Polite pour les mises à jour non urgentes (compteur de caractères). Assertive pour les erreurs bloquantes après soumission. Évitez assertive en boucle sur chaque validation inline."},{"q":"Faut-il aria-label si un label visible existe ?","a":"Non en principe : le label visible suffit. aria-label ne remplace le visible que pour les icônes-boutons sans texte."},{"q":"Comment tester sans expert RGAA ?","a":"Clavier + lecteur d’écran sur un scénario complet + axe DevTools pour détecter les labels manquants. La recette experte reste recommandée avant mise en prod grand public."}],"sources":[{"label":"W3C WAI : Form labels","href":"https://www.w3.org/WAI/tutorials/forms/labels/"},{"label":"W3C WAI : Notifications","href":"https://www.w3.org/WAI/tutorials/forms/notifications/"},{"label":"MDN : aria-live","href":"https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live"}],"relatedTutorialSlugs":["formulaire-contact-validation-antispam","figma-handoff-dev-mode","cursor-setup-projet-rules"],"relatedExpertisePaths":["/expertises/developpement/accessibilite-numerique","/expertises/developpement/site-web"],"relatedMissionSlugs":["laube-centre-medical"],"status":"published"},{"slug":"notion-base-connaissances-technique","title":"Wiki technique Notion pour l'équipe dev","description":"Structurez un wiki Notion pour vos devs : ADR, patterns, onboarding et playbooks. Gouvernance, recherche et liens repos pour une agence web multi-projets.","h1":"Base de connaissances équipe technique","intro":"Quand la connaissance vit dans Slack ou dans la tête des seniors, chaque onboarding coûte des jours. Une base Notion centralise décisions, patterns et procédures pour que l'équipe retrouve l'information en quelques secondes. Vous allez définir une arborescence stable, des templates ADR et des règles de contribution adaptées à une agence multi-projets.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":4,"categories":["design","code"],"tools":["notion"],"expertisePoles":["developpement"],"prerequisites":["Espace Notion équipe avec permissions par rôle (dev, lead, PM)","Accord sur la stack documentée (Next.js, CMS, hébergeur)","Liste des décisions récentes à formaliser (ADR en attente)","Lien vers les dépôts Git et les rules Cursor du projet"],"callouts":[{"kind":"tip","title":"Notion = couche transverse","body":"Le README du repo reste minimal (install, scripts). Notion porte le contexte multi-projets, les ADR et les playbooks qui dépassent un seul dépôt."},{"kind":"example","title":"Arborescence type","body":"Onboarding → Stack & conventions → ADR → Playbooks (deploy, review, incident) → Glossaire client → Liens utiles."},{"kind":"warning","title":"Évitez le copier-coller de doc obsolète","body":"Une page Notion non maintenue est pire que son absence. Assignez un owner par section et revoyez trimestriellement."}],"sections":[{"heading":"Définir l'arborescence et les templates","body":["Créez une page racine « Wiki technique » avec sommaire. Branches principales : Onboarding, Stack (frameworks, CMS, CI/CD), ADR et Playbooks opérationnels.","Template ADR : Contexte, Options, Décision retenue, Conséquences, Date et auteurs. Numérotez (ADR-001, ADR-002) pour la traçabilité.","Ajoutez un glossaire client et une sous-page « Projet [Client] » par mission, liée au wiki global."]},{"heading":"Rédiger pour la recherche et l'action","body":["Titres explicites avec mots-clés métier (« Déployer sur Vercel — projet Next.js » plutôt que « Procédure »). Une idée par bloc ; listes numérotées pour les procédures.","Liez les rules Cursor (`.cursor/rules/`), les issues GitHub et les tutoriels internes. La recherche Notion (`Ctrl+K`) devient l'entrée unique.","Pour chaque pattern récurrent, une fiche courte : quand l'utiliser, exemple de code, pièges connus."]},{"heading":"Gouvernance et contribution","body":["Toute décision structurante (stack, auth, cache) génère un ADR sous 48 h. Les PR significatives peuvent exiger un lien ADR ou une mise à jour playbook.","Permissions : édition réservée aux devs ; PM en commentaire sur les pages cadrage. Indexez les ADR en base Notion (statut : proposé, accepté, déprécié).","Revue trimestrielle : supprimez les pages orphelines, fusionnez les doublons, mettez à jour versions de dépendances."]},{"heading":"Erreurs fréquentes","body":["Dupliquer la doc Next.js officielle au lieu de renvoyer vers `node_modules/next/dist/docs/` pour les APIs instables.","Mélanger doc client et doc interne sans permissions : risque de fuite d'infos sensibles.","Pas de template ADR : les décisions se perdent dans les threads Slack.","Titres génériques (« Notes », « Divers ») : la recherche Notion ne remonte rien d'utile."]},{"heading":"Ce qu'il faut retenir","body":["Wiki transverse : onboarding, stack, ADR, playbooks, glossaire.","Template ADR numéroté pour chaque décision structurante.","Liens vers repos, rules Cursor et tutoriels — recherche Notion = entrée unique.","Owner par section et revue trimestrielle pour éviter la doc pourrie."]}],"faq":[{"q":"Faut-il privilégier Notion ou le README du repo ?","a":"README pour le minimal viable (install, build, test). Notion pour le contexte transverse, les ADR et les procédures multi-dépôts ou multi-clients."},{"q":"Comment lier les rules Cursor dans le wiki ?","a":"Créez une page « Rules projet » listant chaque fichier `.mdc` avec son objectif et un lien vers le dépôt. Mentionnez-les dans l'onboarding dev."},{"q":"Qui maintient le wiki technique ?","a":"Le lead technique ou un référent rotatif. Chaque auteur d'ADR met à jour sa fiche tant que la décision est active."}],"sources":[{"label":"Notion : Wikis","href":"https://www.notion.com/product/wikis"},{"label":"Notion : Guides","href":"https://www.notion.com/help/guides"},{"label":"Notion : Databases","href":"https://www.notion.com/help/guides/databases"}],"relatedTutorialSlugs":["cursor-setup-projet-rules","notion-wiki-handover-client"],"relatedExpertisePaths":["/expertises/developpement/sur-mesure"],"relatedMissionSlugs":[],"status":"published"},{"slug":"airtable-base-suivi-missions","title":"Airtable : base suivi missions agence","description":"Modélisez une base Airtable missions : clients, projets, jalons et KPI. Tables liées, vues filtrées et sync Make sans doublon pour PM et direction d’agence.","h1":"Structurer une base missions agence","intro":"Quand le suivi mission vit dans des fichiers éparpillés, la marge et le planning deviennent opaques. Une base Airtable bien structurée centralise clients, projets, budgets et statuts, tout en restant léger à maintenir pour une agence web de taille moyenne.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"debutant","readingTimeMinutes":4,"categories":["design","po-pm"],"tools":["airtable"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Compte Airtable (plan équipe recommandé pour permissions avancées)","Liste des types de missions et statuts utilisés en interne","Accord sur l’outil de tâches opérationnel (ClickUp) pour éviter la double saisie","Convention de nommage des champs stable pour les sync Make"],"callouts":[{"kind":"tip","title":"Airtable = couche reporting","body":"Gardez l’exécution quotidienne dans ClickUp ; Airtable agrège jalons, CA signé, marge et reporting direction. Synchronisez via Make plutôt que saisie double."},{"kind":"example","title":"Tables cœur","body":"Clients → Projets (lié) → Jalons (lié) → Équipe (collaborateurs). Table « Timesheet » ou rollup heures optionnelle selon la maturité."},{"kind":"warning","title":"Évitez la sur-modélisation","body":"Dix tables liées dès le jour 1 ralentissent l’adoption. Démarrez avec Clients, Projets, Jalons ; ajoutez Facturation ou UTM plus tard."}],"sections":[{"heading":"Définir le modèle de données","body":["Table Clients : raison sociale, secteur, contact principal, statut (actif, archive), account manager. Table Projets : nom, type, budget signé, dates, statut macro, lien Client.","Table Jalons : libellé, date cible, date réalisée, statut, lien Projet. Table Équipe : nom, rôle, charge (%), lien Projets (many-to-many).","Nommez les champs en français métier stable : évitez les renommages qui cassent les sync Make."]},{"heading":"Créer les vues et permissions utiles","body":["Vue « Pipeline commercial » (Projets, kanban par statut macro). Vue « Jalons semaine » (calendrier, filtre date). Vue « Retards » (date réalisée vide ET date cible passée).","Vue « Direction » (gallery groupée par client, rollups budget et % jalons terminés). Interfaces lecture seule pour clients ; table « README » pour la gouvernance interne."]},{"heading":"Champs formule et indicateurs","body":["Ajoutez des rollups : nombre de jalons terminés par projet, jours de retard max. Formule « En retard » : IF(AND({Date cible}, NOT({Date réalisée}), {Date cible} < TODAY()), 1, 0).","Champ « Semaine ISO » sur les jalons pour alimenter un reporting Make hebdomadaire. Champ « Trimestre » sur Projets pour les revues commerciales.","Ne dupliquez pas les heures ClickUp à la main : prévoyez une colonne « ID ClickUp » sur Projets pour la sync."]},{"heading":"Erreurs fréquentes","body":["Replacer ClickUp par Airtable pour le tasking quotidien : friction et champs inadaptés.","Champs texte libre pour les statuts au lieu de single select : filtres et sync impossibles.","Pas de clé externe (ID CRM, ID ClickUp) : doublons à chaque import Make.","Trop de collaborateurs en édition sur la vue Direction : erreurs de formule et de marge."]},{"heading":"Ce qu’il faut retenir","body":["Clients → Projets → Jalons : le trio minimal pour piloter une agence web.","Vues par rôle et interfaces lecture seule pour le client.","Rollups et formules pour le retard et le % d’avancement.","Sync Make + ID externes plutôt que double saisie."]}],"faq":[{"q":"Airtable remplace-t-il ClickUp ?","a":"Non pour l’opérationnel. Airtable excelle en modèle relationnel, reporting et interfaces ; ClickUp reste plus adapté aux tâches, commentaires et workflows de livraison."},{"q":"Quel plan Airtable pour une agence ?","a":"Team ou Business selon le nombre d’éditeurs, les interfaces client et les exigences SSO. Le plan Free convient au prototype, pas à la production multi-utilisateurs."},{"q":"Comment éviter les doublons clients ?","a":"Champ unique normalisé (SIREN ou domaine e-mail) + formulaire de création avec vérification. Make peut chercher avant insert."}],"sources":[{"label":"Airtable : Bases overview","href":"https://support.airtable.com/docs/airtable-bases-overview"},{"label":"Airtable : Getting started","href":"https://support.airtable.com/docs/getting-started-with-airtable"},{"label":"Airtable : Linked records","href":"https://support.airtable.com/docs/guide-to-linked-record-fields"}],"relatedTutorialSlugs":["airtable-formules-kpi-projet","make-sync-airtable-notion","workspace-clickup-projet-web"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/make","/expertises/developpement/crm"],"relatedMissionSlugs":["maestro-gestion-conservatoire"],"status":"published"},{"slug":"make-clickup-tache-depuis-formulaire","title":"Make + ClickUp : tâche depuis formulaire","description":"Créez une tâche ClickUp à chaque soumission formulaire : List cible, champs custom, assigné et checklist. Flux fiable pour PO et PM agence, sans copier-coller.","h1":"Automatiser une tâche ClickUp depuis un formulaire","intro":"Les demandes client atterrissent souvent par e-mail ou formulaire web, puis disparaissent dans une boîte partagée. Make crée automatiquement une tâche ClickUp structurée : bonne List, champs remplis, assigné identifié et checklist de prise en charge.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["ecommerce","po-pm"],"tools":["make","clickup"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["List ClickUp cible avec champs custom (URL, UTM, type demande)","Webhook ou module formulaire (Next.js, Typeform, Tally…)","Compte Make avec connexion ClickUp autorisée","Mapping documenté formulaire → champs ClickUp"],"callouts":[{"kind":"tip","title":"List explicite dans le scénario","body":"Fixez l’ID de List dans Make plutôt que de laisser l’agent deviner. Un Router par type de demande suffit pour deux ou trois flux."},{"kind":"warning","title":"Anti-doublon obligatoire","body":"Avant Create Task, cherchez une tâche existante avec le même e-mail + sujet sur les 24 dernières heures. Les double-clics utilisateur créent sinon des doublons silencieux."}],"sections":[{"heading":"Cadrer le flux métier","body":["Listez les champs du formulaire que ClickUp doit recevoir : sujet, description, e-mail, URL page, UTM, type de demande (devis, support, brief).","Définissez qui est assigné par défaut (PM, support) et quelle checklist standard s’applique (accusé client, qualification, rendez-vous).","Documentez le mapping dans Notion ou une ClickUp Doc : une colonne formulaire → champ ClickUp → exemple de valeur."]},{"heading":"Construire le scénario Make","body":["Déclencheur : webhook Make (POST JSON depuis votre route API Next.js) ou module natif du service formulaire.","Module ClickUp Search tasks (filtre e-mail + sujet) → Router : si trouvé, Update ou ignore ; sinon Create task.","Mappez les custom fields ClickUp (URL, UTM, source) et le corps de description avec un template Markdown : contexte, lien preview, pièces jointes.","Optionnel : module Slack ou e-mail pour notifier l’assigné avec lien direct vers la tâche."]},{"heading":"Templates et checklist ClickUp","body":["Créez un modèle de tâche « Demande entrante » avec sous-tâches : qualifier, répondre sous 24 h, planifier call.","Dans Make, référencez le template via l’ID ClickUp ou dupliquez la checklist en texte si votre plan ne permet pas l’instanciation template.","Alignez les statuts ClickUp sur le SLA client : Nouveau → En qualification → En cours → Clôturé."]},{"heading":"Erreurs fréquentes","body":["Créer la tâche dans la mauvaise List faute de Router sur le type de demande.","Oublier l’anti-doublon : deux tâches identiques après double soumission.","Laisser la description vide : le PM perd le contexte marketing (UTM, page d’origine).","Ne pas tester le scénario avec un jeu de données réaliste avant mise en prod.","Hardcoder un assigné parti de l’agence sans fallback équipe."]},{"heading":"Ce qu’il faut retenir","body":["Formulaire → Make → ClickUp : List fixe, champs mappés, assigné et checklist.","Anti-doublon par e-mail + sujet avant création.","Notifier l’équipe avec le lien tâche, pas seulement l’e-mail brut du client."]}],"faq":[{"q":"Comment connecter un formulaire Next.js à Make ?","a":"Exposez une route API qui valide le payload côté serveur, puis relaie un POST JSON vers l’URL webhook Make. Ne publiez jamais l’URL webhook dans le front."},{"q":"Comment gérer plusieurs types de demande ?","a":"Router Make sur un champ « type » : chaque branche pointe vers une List et un assigné différents."},{"q":"Que faire si ClickUp est en panne ?","a":"Branche erreur Make → file d’attente (Google Sheet ou e-mail ops) + relance automatique avec scénario planifié."}],"sources":[{"label":"Make : ClickUp","href":"https://www.make.com/en/help/apps/clickup"}],"relatedTutorialSlugs":["make-formulaire-vers-crm","workspace-clickup-projet-web"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/clickup"],"relatedMissionSlugs":[],"status":"published"},{"slug":"wordpress-custom-post-types-champs","title":"WordPress : CPT et champs personnalisés","description":"Déclarez des custom post types et champs ACF sur WordPress pour des contenus métier structurés. Cadrage agence web : registres, templates et recette éditoriale.","h1":"CPT et champs personnalisés WordPress","intro":"Pages et articles natifs ne couvrent pas toujours les besoins métier : réalisations, équipes, offres B2B. Sans CPT et champs structurés, l’équipe bricole avec des page builders fragiles. Vous allez déclarer des custom post types maintenables, associer des champs ACF et préparer les templates de rendu front.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["cms","code"],"tools":["wordpress"],"expertisePoles":["cms"],"prerequisites":["WordPress 6+ avec thème enfant ou mu-plugin pour le code custom","Plugin ACF (Advanced Custom Fields) ou équivalent installé","Brief éditorial listant les types de contenu et champs attendus","Accès admin pour créer les groupes de champs et tester la saisie"],"callouts":[{"kind":"tip","title":"Enregistrer les CPT en code","body":"Utilisez register_post_type dans un mu-plugin ou inc/cpt.php versionné. Évitez les CPT créés uniquement via interface sans export JSON : non reproductibles entre environnements."},{"kind":"warning","title":"Flush des permaliens après ajout","body":"Chaque nouveau CPT avec rewrite custom exige une sauvegarde des permaliens (Réglages → Permaliens → Enregistrer) sous peine de 404."},{"kind":"example","title":"Nommage cohérent","body":"CPT slug projet (singulier), labels français « Projets », champs ACF groupe projet_details : client, secteur, url_demo. Template archive-projet.php et single-projet.php."}],"sections":[{"heading":"Cadrage : modèle de contenu métier","body":["Avant le code, cartographiez entités, relations et écrans front. Un CPT par concept métier évite les champs fourre-tout sur les pages.","Distinguez contenu éditorial (blog) et contenu référentiel (offres, cas clients). Chaque CPT a un propriétaire côté client.","Validez les slugs URL avec le PO et le référent SEO : ils impactent le maillage et les redirections."]},{"heading":"Déclarer les custom post types","body":["Appelez register_post_type au hook init avec labels traduits, public => true, has_archive => true, rewrite => slug métier, supports adaptés (title, editor, thumbnail).","Centralisez la déclaration dans un fichier dédié chargé par functions.php ou mu-plugin. Exportez la config si vous utilisez un générateur, puis versionnez en Git.","Testez la création d’une entrée, l’URL publique et le menu admin. Vérifiez les capacités : map_meta_cap si des rôles clients accèdent au back-office."]},{"heading":"Champs ACF et templates de rendu","body":["Créez un groupe ACF par CPT, règle d’affichage « Type de publication = projet ». Préférez location rules strictes pour éviter des champs orphelins sur d’autres types.","Synchronisez les groupes ACF en JSON dans acf-json/ du thème ou mu-plugin : déploiement staging → prod sans reconfiguration manuelle {{icon:package}}.","Dans single-projet.php, affichez les champs via get_field() ou the_field() avec échappement adapté. Prévoyez des fallbacks si un champ optionnel est vide."]},{"heading":"Erreurs fréquentes","body":["CPT enregistré sans flush permaliens : URLs en 404 silencieuses.","Slugs CPT en conflit avec pages existantes.","Champs ACF uniquement en staging, absents en prod faute d’export JSON.","Un seul CPT « Contenu » avec 40 champs : cauchemar éditorial."]},{"heading":"Ce qu’il faut retenir","body":["Un CPT par entité métier, déclaré en code et versionné ; champs ACF groupés et exportés en JSON.","Recette : création entrée, permaliens, archive, single, droits rôles.","Templates archive-{slug}.php et single-{slug}.php dans le thème enfant.","Alignez slugs et structure avec le PO dès le cadrage pour limiter les migrations ultérieures."]}],"faq":[{"q":"Faut-il ACF ou les champs natifs depuis WordPress 6 ?","a":"Les champs bloc natifs conviennent aux layouts simples. ACF reste pertinent pour groupes complexes, repeaters, relations et sync JSON entre environnements agence."},{"q":"Comment versionner les groupes ACF entre staging et prod ?","a":"Activez la sauvegarde JSON dans acf-json/. Committez les fichiers en Git et déployez avec le thème. En prod, ACF propose la synchronisation des groupes modifiés."},{"q":"Peut-on exposer des CPT en API REST pour un front headless ?","a":"Oui : show_in_rest => true à l’enregistrement. Vérifiez les champs ACF exposés via register_rest_field ou l’extension ACF to REST API selon votre stack."}],"sources":[{"label":"WordPress : Post Types","href":"https://developer.wordpress.org/plugins/post-types/"},{"label":"ACF : Documentation","href":"https://www.advancedcustomfields.com/resources/"}],"relatedTutorialSlugs":["wordpress-theme-enfant-structure-projet","wordpress-migration-contenu-refonte","wordpress-passation-editeur-client"],"relatedExpertisePaths":["/expertises/cms/wordpress"],"relatedMissionSlugs":[],"status":"published"},{"slug":"stripe-abonnements-saas-b2b","title":"Stripe : abonnements SaaS B2B","description":"Abonnements SaaS B2B Stripe : Products, Prices récurrents, essais et webhooks. Cadrage PO/dev pour facturation récurrente et droits applicatifs clients.","h1":"Abonnements SaaS B2B","intro":"Un SaaS B2B facture rarement comme un panier e-commerce : paliers annuels, essai 14 jours, facturation au siège ou upgrade mid-cycle. Stripe Billing structure Products, Prices récurrents et Subscriptions — votre application doit réagir aux webhooks pour ouvrir ou fermer l’accès. Vous allez cadrer le modèle produit et la recette des scénarios d’abonnement.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["ecommerce"],"tools":["stripe"],"expertisePoles":["developpement"],"prerequisites":["Grille tarifaire validée (mensuel / annuel, paliers, devises)","Stripe Billing activé et Products créés en mode test","Règles métier d’accès (feature flags, seats, rôles admin client)","Webhooks configurés pour `customer.subscription.*` et `invoice.paid`"],"callouts":[{"kind":"tip","title":"Price immuable","body":"Ne modifiez pas un Price existant pour changer le montant : créez un nouveau Price et migrez les nouveaux abonnements. Les clients existants restent sur l’ancien tarif jusqu’à changement explicite."},{"kind":"example","title":"Checkout Subscription","body":"Mode `subscription` + `line_items` avec `price` récurrent. `trial_period_days` pour l’essai. `metadata.plan_tier` pour votre moteur de droits."},{"kind":"warning","title":"Provisioning différé","body":"N’activez l’accès produit qu’après `invoice.paid` ou `checkout.session.completed` avec subscription valide. Un `customer.subscription.created` seul peut échouer au premier paiement."}],"sections":[{"heading":"Modéliser Products et Prices B2B","body":["Un Product Stripe = votre offre (ex. « Plan Pro »). Les Prices portent le montant, l’intervalle (`month`, `year`) et la devise. Séparez paliers Starter / Pro / Enterprise en Products distincts.","Pour la facturation au siège, utilisez `quantity` sur la Subscription ou Stripe Billing metered selon votre modèle. Documentez si le seat est facturé au prorata lors d’un ajout mid-cycle.","Les essais gratuits se configurent via `trial_period_days` ou un coupon 100 % limité dans le temps. Le PO valide la date de première facturation affichée au client."]},{"heading":"Parcours souscription et Customer","body":["Réutilisez un Customer Stripe par compte client B2B (`metadata.account_id`). Checkout en mode subscription crée Customer + Subscription en une passe si besoin.","Stockez `stripe_customer_id` et `stripe_subscription_id` dans votre base tenants. C’est la clé de voûte pour upgrades, factures et support.","Proposez une page « Gérer mon abonnement » via Customer Portal (fiche dédiée) plutôt que de réimplémenter annulation et changement de carte."]},{"heading":"Webhooks cycle de vie abonnement","body":["`customer.subscription.updated` : changement de palier, fin d’essai, passage past_due. Mettez à jour les droits applicatifs et notifiez le CS si paiement en échec.","`invoice.paid` : confirme la période payée ; utile pour renouvellement annuel et export comptable.","`customer.subscription.deleted` : révoquez l’accès avec période de grâce configurable selon le contrat B2B."]},{"heading":"Erreurs fréquentes","body":["Modifier le montant d’un Price au lieu d’en créer un nouveau : historique de facturation incohérent.","Activer l’accès SaaS sur `subscription.created` sans attendre le premier paiement.","Oublier le prorata lors d’un upgrade : litige client sur la première facture.","Multi-devises sans Price par devise : conversion approximative côté Stripe.","Pas de gestion `past_due` : accès maintenu alors que Stripe retente en vain."]},{"heading":"Ce qu’il faut retenir","body":["Product + Price récurrent + Subscription = modèle Stripe Billing B2B.","Customer et Subscription IDs dans votre base tenants.","Webhooks `invoice.paid` et `subscription.updated` pilotent l’accès produit.","Customer Portal pour self-service ; Prices immuables pour l’historique tarifaire."]}],"faq":[{"q":"Comment facturer au siège (per seat) ?","a":"Fixez `quantity` sur la Subscription et mettez à jour via API quand un admin invite un utilisateur. Alternative : usage metered si la consommation varie chaque mois."},{"q":"Peut-on proposer un devis annuel signé hors Checkout ?","a":"Oui, via Invoice Stripe envoyée au client ou Subscription avec `collection_method: send_invoice`. Checkout reste le chemin standard pour self-service."},{"q":"Comment tester un échec de renouvellement ?","a":"Utilisez la carte test qui échoue au débit récurrent documentée par Stripe. Vous pouvez aussi avancer l’horloge test du Dashboard pour simuler la fin de période. Vérifiez que votre webhook `invoice.payment_failed` met bien à jour les droits applicatifs."}],"sources":[{"label":"Stripe Docs : Subscriptions","href":"https://docs.stripe.com/billing/subscriptions/overview"},{"label":"Stripe Docs : Products & Prices","href":"https://docs.stripe.com/products-prices/overview"},{"label":"Stripe Docs : Build subscriptions","href":"https://docs.stripe.com/billing/subscriptions/build-subscriptions"}],"relatedTutorialSlugs":["stripe-customer-portal-facturation","stripe-webhooks-idempotence-make","stripe-mode-test-recette-paiement"],"relatedExpertisePaths":["/expertises/developpement/ecommerce"],"relatedMissionSlugs":[],"status":"published"},{"slug":"webflow-animations-reduced-motion","title":"Webflow : animations et reduced-motion","description":"Interactions Webflow compatibles reduced-motion : IX2, Lottie et fallbacks accessibles. Guide designers intermédiaires, recette OS sans exclure utilisateurs.","h1":"Animations et reduced-motion","intro":"Les interactions IX2 et Lottie enrichissent l’expérience, mais un scroll agressif peut provoquer inconfort et faire échouer la recette accessibilité. Sans fallback, vous excluez les utilisateurs qui activent « Réduire les animations » au niveau OS. Vous allez classer les animations, prévoir des alternatives reduced-motion et documenter les tests.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":3,"categories":["animations","accessibilite"],"tools":["webflow"],"expertisePoles":["developpement"],"prerequisites":["Interactions IX2 ou Lottie identifiés sur le projet","Accès custom code Head/Footer si fallback CSS requis","Réglages OS « Réduire les animations » pour test","Checklist recette accessibilité partagée"],"callouts":[{"kind":"warning","title":"Pas d’autoplay infini","body":"Marquee et parallax doivent s’arrêter ou être remplacés par un état statique quand `prefers-reduced-motion: reduce` est actif."},{"kind":"tip","title":"Essentiel vs décoratif","body":"Feedback clic = essentiel (durée courte). Parallax décoratif = désactivé en reduced-motion."},{"kind":"example","title":"Fallback type","body":"Hero parallax → image fixe + fade 200 ms. Lottie loader → image statique. Menu slide → apparition sans translation."}],"sections":[{"heading":"Classifier les animations du projet","body":["Inventoriez trigger, durée, boucle et amplitude. Classez en essentielle ou décorative — seules les essentielles gardent un mouvement réduit ≤ 300 ms.","Coordonnez avec figma-audit-contraste-accessibilite : une animation ne doit pas masquer un défaut de focus sur les CTA."]},{"heading":"IX2, Lottie et custom code","body":["IX2 ne lit pas `prefers-reduced-motion` automatiquement. Dupliquez l’élément avec variante statique via custom CSS, ou réduisez durée et déplacement.","Injectez en Footer `@media (prefers-reduced-motion: reduce)` forçant `animation: none` sur les classes ciblées."]},{"heading":"Tester et documenter en recette","body":["Activez « Réduire les animations » dans les paramètres système, rechargez le site publié. Testez clavier : focus visible pendant et après transition.","Ajoutez une ligne dans notion-checklist-recette-mise-en-prod : {{icon:check}} reduced-motion validé homepage + section IX2."]},{"heading":"Erreurs fréquentes","body":["Compter sur WCAG « par défaut » sans audit IX2.","Scroll jank : interactions While scrolling sur toute la page.","Vidéo background autoplay sans alternative statique.","Oublier les embeds tiers hors Webflow IX2."]},{"heading":"Ce qu’il faut retenir","body":["Inventaire + classification essentiel/décoratif avant production.","Fallback CSS ou variante statique pour IX2 décoratif.","Tests OS reduced-motion sur URL publiée."]}],"faq":[{"q":"Faut-il désactiver toute animation en reduced-motion ?","a":"Non. Réduisez durée et amplitude, ou remplacez par un fondu court. Le contenu reste disponible."},{"q":"Peut-on gérer prefers-reduced-motion nativement dans Webflow ?","a":"Pas entièrement pour IX2. Comptez sur custom CSS ou export code avec matchMedia si migration vers stack custom."},{"q":"Comment concilier parallax visible et accessibilité ?","a":"Exposez le risque accessibilité. Gardez le parallax uniquement hors reduced-motion — ne forcez jamais les préférences système."}],"sources":[{"label":"Webflow University : Interactions","href":"https://university.webflow.com/lesson/intro-to-interactions"},{"label":"MDN : prefers-reduced-motion","href":"https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion"},{"label":"WCAG 2.2 : Animation from interactions","href":"https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html"}],"relatedTutorialSlugs":["animations-gsap-reduced-motion","figma-audit-contraste-accessibilite","notion-checklist-recette-mise-en-prod"],"relatedExpertisePaths":["/expertises/developpement/accessibilite-numerique","/expertises/developpement/site-web"],"relatedMissionSlugs":[],"status":"published"},{"slug":"claude-audit-accessibilite-maquette","title":"Claude : audit accessibilité maquette","description":"Auditez une maquette Figma avec Claude : contrastes, libellés, focus et états interactifs. Checklist agence pour préparer la recette RGAA avant intégration.","h1":"Audit accessibilité maquette","intro":"Repérer les problèmes d’accessibilité en développement coûte cher en allers-retours design. Un pré-audit sur maquette Figma — assisté par Claude — aligne l’équipe sur les mêmes critères WCAG avant handoff. Vous allez structurer un prompt d’audit couvrant contrastes, libellés, focus et états, sans remplacer l’audit HTML final.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["ia","accessibilite"],"tools":["claude","figma"],"expertisePoles":["developpement"],"prerequisites":["Maquettes Figma des composants critiques (boutons, formulaires, navigation)","Tokens couleur et typo documentés (valeurs hex, tailles)","Référentiel accessibilité projet (niveau AA visé)","Exports ou descriptions des variantes (hover, focus, disabled, erreur)"],"callouts":[{"kind":"warning","title":"Maquette ≠ rendu HTML","body":"Claude audite à partir des informations fournies (couleurs, textes, structure). L’audit RGAA définitif reste sur le HTML rendu avec lecteur d’écran et outils automatiques."},{"kind":"tip","title":"Auditer par composant","body":"Passez Button, Input, Link et Card avant les pages marketing. Un composant non conforme se répète partout en intégration."},{"kind":"example","title":"Données à fournir à Claude","body":"Nom composant, couleurs fond/texte (hex), taille police, états interactifs, texte du label, présence d’icône seule, ratio contraste si connu via plugin Figma."}],"sections":[{"heading":"Préparer le contexte Figma pour l’audit","body":["Listez les composants prioritaires : CTA primaire, liens, champs formulaire, messages d’erreur, navigation, modales. Chaque variante (hover, focus, disabled) doit être décrite.","Exportez les valeurs de contraste depuis un plugin Figma (Stark, Contrast) ou saisissez les paires couleur avec leurs ratios. Joignez les règles projet : niveau AA, exceptions documentées.","Décrivez la hiérarchie des titres prévue et les libellés visibles. Claude ne voit pas le fichier Figma : plus le contexte est précis, plus l’audit est utile."]},{"heading":"Construire le prompt d’audit accessibilité","body":["System prompt : « Auditeur accessibilité web agence. Référentiel WCAG 2.2 niveau AA. Signalez les non-conformités avec critère WCAG, gravité et recommandation design. »","Demandez une sortie par composant : Conforme {{icon:check}} / Non conforme {{icon:x}}, critère WCAG, correction proposée, note si vérification HTML requise.","Incluez des points de contrôle explicites : contrastes texte et UI, taille cible tactile, libellés de formulaire, focus visible, alternatives textuelles icônes seules."]},{"heading":"Exploiter les résultats avant handoff","body":["Priorisez les bloquants design (contraste insuffisant, focus absent, label manquant). Corrigez dans Figma avant de transmettre au développement.","Documentez les exceptions validées (logo, décoration) dans la spec composant. Le développeur intègre sans réinterpréter.","Croisez avec le tutoriel audit contraste Figma pour les ratios exacts. Claude accélère la revue qualitative ; les mesures restent vérifiables par plugin."]},{"heading":"Erreurs fréquentes","body":["Envoyer une capture sans valeurs couleur : audit approximatif.","Confondre pré-audit maquette et certification RGAA : deux étapes distinctes.","Oublier les états focus et erreur : non conformité fréquente en recette.","Accepter les ratios calculés par Claude sans vérification plugin.","Auditer des pages entières sans passer par les composants du design system."]},{"heading":"Ce qu’il faut retenir","body":["Contexte Figma détaillé (couleurs, états, libellés) + prompt WCAG = pré-audit actionnable.","Correction design avant handoff, pas en développement.","Claude assiste ; plugins Figma et audit HTML final restent obligatoires.","Documentez les exceptions pour éviter les débats en intégration."]}],"faq":[{"q":"Peut-on faire lire un fichier Figma directement à Claude ?","a":"Non nativement. Vous devez exporter les specs visuelles (couleurs, textes, variantes) ou utiliser une description structurée. Des connecteurs tiers existent mais le contexte explicite reste le plus fiable."},{"q":"Faut-il auditer chaque page marketing ?","a":"Commencez par les composants du design system. Les pages héritent des mêmes règles. Auditez ensuite les compositions spécifiques (landing, tunnel conversion) si elles divergent du système."},{"q":"Comment traiter les écarts entre maquette et HTML ?","a":"Le pré-audit maquette réduit les écarts en amont. En recette, refaites un audit HTML avec les outils RGAA. Les écarts résiduels (polices système, smoothing) sont documentés et corrigés côté CSS."}],"sources":[{"label":"Anthropic : Prompt engineering","href":"https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/overview"},{"label":"WCAG : Contraste minimum","href":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"},{"label":"Figma : Accessibilité","href":"https://help.figma.com/hc/en-us/articles/360039968373-Check-accessibility"}],"relatedTutorialSlugs":["figma-audit-contraste-accessibilite","accessibilite-formulaire-labels-aria-live"],"relatedExpertisePaths":["/expertises/developpement/sur-mesure"],"relatedMissionSlugs":[],"status":"published"},{"slug":"chatgpt-analyse-concurrents-seo","title":"ChatGPT : analyse concurrents SEO","description":"Analyse concurrentielle SEO avec ChatGPT : SERP, angles éditoriaux et gaps sémantiques. Méthode pour consultants SEO et PO contenu, sans promesse de position.","h1":"Analyse concurrence SEO","intro":"L’analyse concurrentielle manuelle sur dix SERP consomme des heures et produit des tableaux peu actionnables. ChatGPT accélère la synthèse des angles éditoriaux et des intentions de recherche — à condition de cadrer des prompts vérifiables et de croiser les sources. Vous allez construire une grille d’analyse reproductible pour vos recommandations SEO client.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["ia","seo-geo"],"tools":["chatgpt"],"expertisePoles":["developpement"],"prerequisites":["Requête cible et marché définis (géo, langue, persona B2B)","Export ou liste des URLs concurrentes (Search Console, Ahrefs, Semrush ou crawl manuel)","Grille d’analyse interne (intention, format, profondeur, CTA)","Accès ChatGPT avec recherche web si disponible sur votre offre"],"callouts":[{"kind":"tip","title":"Prompt en trois temps","body":"1) Cartographier les intentions sur la requête. 2) Comparer formats (guide, FAQ, landing). 3) Proposer des gaps éditoriaux {{icon:puzzle}} alignés avec votre expertise, pas un copier-coller SERP."},{"kind":"warning","title":"Vérifier les faits","body":"ChatGPT peut inventer des volumes de recherche ou des positions. Recoupez toujours avec vos outils SEO et une inspection manuelle des SERP avant recommandation client."},{"kind":"example","title":"Livrable attendu","body":"Tableau : concurrent | angle principal | format | forces | faiblesses | opportunité pour le client. Synthèse en 5 bullets actionnables pour le calendrier éditorial."}],"sections":[{"heading":"Préparer le corpus et la grille d’analyse","body":["Sélectionnez 5 à 10 URLs qui occupent la SERP sur votre requête pilier, plus 2 contenus « référence » de votre client. Notez requête, pays, device et date du crawl.","Définissez les critères : intention (informationnelle, transactionnelle), profondeur (mots, sections H2), rich results (FAQ, vidéo), maillage interne visible. ChatGPT structure mieux quand la grille est explicite dans le prompt."]},{"heading":"Prompts de cartographie sémantique","body":["Demandez une cartographie des sous-thèmes couverts par les concurrents et ceux absents. Forcez le modèle à citer les URLs sources lorsque la recherche web est activée.","Faites produire un tableau comparatif des titres H1, meta descriptions visibles et types de preuve (études de cas, chiffres, témoignages). Relisez : les meta peuvent être approximatives sans fetch direct."]},{"heading":"Transformer la synthèse en plan éditorial","body":["À partir des gaps identifiés, demandez 3 à 5 propositions de contenus piliers avec angle différenciant (expertise agence, cas client anonymisé, checklist téléchargeable).","Reliez chaque proposition à une page existante du site client pour le maillage interne. Exportez vers Notion ou Airtable calendrier éditorial pour validation PO."]},{"heading":"Erreurs fréquentes","body":["Prompt sans liste d’URLs : le modèle généralise sur des concurrents fictifs.","Accepter des volumes ou positions sans source outillée.","Recommandations copiées de la SERP sans angle de marque client.","Oublier la dimension GEO (FAQ structurées, clarté pour moteurs de réponse).","Livrer la synthèse ChatGPT au client sans relecture SEO humaine."]},{"heading":"Ce qu’il faut retenir","body":["ChatGPT accélère la structuration et la comparaison, pas le remplacement du crawl SEO.","Grille explicite + URLs réelles = livrables exploitables en réunion client.","Recoupez systématiquement avec vos outils et une inspection SERP manuelle.","Orientez les recommandations vers des contenus utiles, pas des promesses de ranking."]}],"faq":[{"q":"Peut-on accéder aux SERP en temps réel avec ChatGPT ?","a":"Selon votre offre, la recherche web permet une consultation récente. Les résultats restent incomplets : complétez avec un navigateur en navigation privée et vos outils SEO habituels."},{"q":"Comment éviter les hallucinations sur les concurrents ?","a":"Fournissez la liste d’URLs, exigez des citations et vérifiez chaque fait avant intégration au livrable. Traitez ChatGPT comme un assistant de structuration, pas comme source unique."},{"q":"Peut-on automatiser cette analyse chaque mois ?","a":"Oui via API ou scénario Make avec export crawl + prompt standardisé. Gardez une validation humaine avant envoi client : les SERP évoluent vite."}],"sources":[{"label":"OpenAI Help : ChatGPT search","href":"https://help.openai.com/en/articles/9237897-chatgpt-search"},{"label":"Google : Helpful content","href":"https://developers.google.com/search/docs/fundamentals/creating-helpful-content"}],"relatedTutorialSlugs":["seo-geo-maillage-interne","notion-calendrier-editorial-seo","airtable-inventaire-contenus-seo"],"relatedExpertisePaths":["/expertises/intelligence-artificielle/visibilite-ia-moteurs-reponse"],"relatedMissionSlugs":[],"status":"published"},{"slug":"gemini-api-cas-usage-agence","title":"Gemini API : cas d’usage en agence web","description":"Intégrez Gemini API dans vos livrables agence : résumés, classification, génération structurée. Patterns Node.js, clés restreintes et quotas pour équipes dev.","h1":"Gemini API : cas d’usage agence","intro":"Les équipes agence dépassent vite le copier-coller dans l’interface chat : formulaires intelligents, modération de contenu, assistants internes. Exposer la clé API côté client expose le projet à la fraude et aux dépassements de quota. Vous allez cadrer trois cas d’usage réalistes avec gouvernance des clés et des coûts.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"avance","readingTimeMinutes":4,"categories":["ia","code"],"tools":["gemini"],"expertisePoles":["developpement"],"prerequisites":["Projet Google Cloud ou clé API Google AI Studio","Node.js 20+ ou runtime équivalent pour les exemples","Variables d’environnement gérées (.env, Vercel, Secret Manager)","Lecture de la doc officielle Gemini API (modèles, quotas, pricing)"],"callouts":[{"kind":"warning","title":"Clés API jamais côté client","body":"Appelez Gemini depuis une Route Handler Next.js ou une Function serveur. Exposez une interface métier, pas la clé brute au navigateur."},{"kind":"tip","title":"Structured output","body":"Demandez du JSON schema-validé pour classification de tickets, extraction de champs formulaire ou tagging contenu CMS."},{"kind":"example","title":"Cas agence courants","body":"Résumé de demande contact · Suggestion de catégorie support · Génération de meta description brouillon (relecture humaine obligatoire)."}],"sections":[{"heading":"Choisir le cas d’usage et le modèle","body":["Priorisez les tâches à valeur ajoutée et à volume modéré : pas de génération massive non relue. Exemples : tri initial des leads, résumé de ticket, aide à la rédaction de changelog interne.","Sélectionnez le modèle selon latence et coût : Flash pour classification rapide, Pro pour raisonnement plus long. Consultez la matrice officielle des modèles avant verrouillage en production.","Définissez les entrées et sorties : texte brut, JSON, multimodal (image + texte). Documentez le contrat dans le README du service."]},{"heading":"Implémenter un endpoint sécurisé","body":["Créez une route `app/api/.../route.ts` qui lit `process.env.GEMINI_API_KEY`, valide le corps de requête (Zod) et appelle le SDK `@google/generative-ai` ou l’API REST.","Ajoutez rate limiting et journalisation sans contenu sensible. En cas d’erreur quota, renvoyez un message métier clair au client interne.","Pour Make ou webhook externe, proxyez via votre API : une seule clé centralisée, rotation simplifiée."]},{"heading":"Observabilité, coûts et recette","body":["Tracez tokens consommés par endpoint et par client projet. Alertez au-delà d’un seuil mensuel défini en devis.","Prévoyez des tests de non-régression sur des jeux d’entrées figés. Les mises à jour de modèle peuvent décaler les sorties JSON.","Recette métier : un PO valide 20 échantillons avant activation sur le formulaire public. Les meta descriptions suggérées passent par le SEO lead."]},{"heading":"Erreurs fréquentes","body":["Clé API dans le bundle client ou dans un repo public.","Pas de validation de schéma sur la sortie JSON : crash en aval du pipeline.","Prompts non versionnés : impossible de diagnostiquer une régression.","Absence de fallback si l’API est indisponible : formulaire bloqué.","Traiter des données personnelles sans base légale ni anonymisation."]},{"heading":"Ce qu’il faut retenir","body":["Gemini API sert des micro-produits internes ou client, pas un chatbot générique non cadré.","Serveur uniquement, clés restreintes, sorties structurées et versionnées.","Coûts et qualité se pilotent par seuils, logs et recette métier.","La relecture humaine reste obligatoire sur tout contenu publié."]}],"faq":[{"q":"Faut-il choisir Vertex AI ou Google AI Studio en agence ?","a":"AI Studio convient aux prototypes rapides. Vertex s’impose pour IAM fin, VPC et facturation entreprise multi-projets. Migrez quand le client exige un contrat cloud strict."},{"q":"Comment tester sans impacter la prod ?","a":"Utilisez une clé de développement avec quota bas et un préfixe d’environnement dans les logs. Les tests E2E mockent l’API sauf sur une pipeline nocturne dédiée."},{"q":"Peut-on chaîner Gemini avec Make ?","a":"Oui via HTTP vers votre proxy Next.js plutôt qu’en exposant la clé dans Make. Centralisez auth et quotas côté serveur."}],"sources":[{"label":"Gemini API : Documentation","href":"https://ai.google.dev/gemini-api/docs"},{"label":"Gemini API : Quickstart","href":"https://ai.google.dev/gemini-api/docs/quickstart"},{"label":"Google AI Studio","href":"https://aistudio.google.com/"}],"relatedTutorialSlugs":["make-enrichir-leads-api","gemini-gouvernance-donnees-google","cursor-setup-projet-rules"],"relatedExpertisePaths":["/expertises/developpement/nextjs","/expertises/developpement/sur-mesure"],"relatedMissionSlugs":[],"status":"published"},{"slug":"clickup-dashboard-suivi-projet","title":"Dashboard ClickUp : suivi projet et client","description":"Construisez un dashboard ClickUp pour PO et PM : avancement, jalons, blocages et attentes client. Widgets filtrés et partage sans exposer l’interne agence.","h1":"Dashboard de suivi projet","intro":"Votre client ne navigue pas dans ClickUp comme un PM. Un dashboard dédié résume l’avancement, les prochaines étapes et les points d’attention — sans listes internes, estimations sensibles ni bruit opérationnel. Vous allez composer une vue filtrée, partageable en lecture seule, alignée sur vos phases de livraison web.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["po-pm"],"tools":["clickup"],"expertisePoles":["chefferie-de-projet"],"prerequisites":["Space projet structuré avec statuts homogènes par phase","Champs custom utiles : phase, environnement, type de livrable","Liste des informations autorisées côté client (pas de budget détaillé)"],"callouts":[{"kind":"warning","title":"Filtrer l’interne","body":"Excluez les Lists « dette », « estimations » et les champs budget du dashboard client. Un widget mal filtré expose des TJM ou des notes internes."},{"kind":"tip","title":"Un écran, trois messages","body":"Où en est le projet · ce qui attend le client · prochain jalon daté. Tout le reste relève du kanban interne."},{"kind":"example","title":"Widgets cœur","body":"Status overview (recette + jalons) · Milestones · Blocked tasks · Carte texte contact PM et lien staging."}],"sections":[{"heading":"Cadrer l’objectif du dashboard","body":["Avant d’ajouter des widgets, listez les questions auxquelles le dashboard doit répondre : avancement macro, éléments bloqués, prochaine livraison, attente client. Chaque widget correspond à une question, pas à une List entière.","Distinguez la vue « pilotage interne » (charge, budget, vélocité) de la vue « comité client » (jalons, recette, blocages commentés). Deux dashboards séparés évitent les filtres contradictoires.","Documentez dans une ClickUp Doc les statuts affichés et leur traduction métier pour le client (« En recette client » plutôt que « QA »)."]},{"heading":"Composer les widgets pertinents","body":["Widget « Status overview » sur les Lists recette et jalons uniquement. « Milestones » ou tâches avec dates pour la roadmap contractuelle. « Blocked tasks » avec lien vers le détail commenté — jamais sans contexte.","Calculez un indicateur simple : pourcentage de tâches terminées sur le Folder « Livraison ». Libellez-le « indicateur d’avancement technique » pour ne pas promettre un pourcentage contractuel.","Ajoutez une carte texte : contact PM, prochaine réunion, URL staging, lien vers la doc statuts. Actualisez-la à chaque comité."]},{"heading":"Personnaliser et partager côté client","body":["Créez un dashboard « Vue client » en lecture seule. Renommez les statuts si le jargon interne n’est pas compréhensible. Masquez les widgets sensibles avant d’inviter le client.","Les dashboards ClickUp se rafraîchissent en live : évitez les exports PDF manuels sauf comité formel. Partagez le lien dashboard + Doc statuts dans le mail de kick-off.","Vérifiez les limites de votre plan ClickUp : invité lecture suffit souvent ; certaines options de partage granulaire dépendent de l’offre."]},{"heading":"Erreurs fréquentes","body":["Dashboard incluant toutes les Lists : surcharge visuelle et fuites d’informations internes.","Widgets sans filtre date : mélange sprint passé et actuel, courbe d’avancement incohérente.","Pas de légende sur les statuts : incompréhension en comité, relances inutiles.","Afficher le time tracking détaillé au client sans contrat time & materials transparent."]},{"heading":"Ce qu’il faut retenir","body":["Dashboard client = synthèse filtrée, pas un export du kanban interne.","Jalons, blocages et attente client en priorité ; budget et charge en vue séparée.","Partage lecture seule + Doc statuts associée dès le kick-off.","Revoyez les widgets à mi-projet : les besoins de comité évoluent."]}],"faq":[{"q":"Le client doit-il avoir un siège ClickUp ?","a":"Un invité lecture suffit souvent pour le dashboard et les Lists de recette. Alternative : export périodique ou portail Airtable si le client refuse tout accès outil."},{"q":"Combien de widgets maximum ?","a":"Six à huit widgets actifs par dashboard. Au-delà, l’écran devient illisible sur mobile et en visio."},{"q":"Dashboard ClickUp ou reporting Airtable ?","a":"ClickUp pour l’avancement opérationnel live. Airtable pour la direction (CA, marge, jalons contractuels) si vous synchronisez via Make."}],"sources":[{"label":"ClickUp : Dashboards overview","href":"https://help.clickup.com/hc/en-us/articles/4427260194455-Dashboards-overview"}],"relatedTutorialSlugs":["clickup-statuts-workflow-livraison","clickup-vues-filtres-equipe"],"relatedExpertisePaths":["/expertises/chefferie-de-projet/clickup"],"relatedMissionSlugs":["maestro-gestion-conservatoire"],"status":"published"},{"slug":"cursor-composant-react-accessible","title":"Composant React accessible avec Cursor","description":"Composants React accessibles avec Cursor et rules dédiées : sémantique, clavier, ARIA minimal, focus visible. Workflow agent et relecture manuelle pour dev.","h1":"Composer un composant accessible","intro":"L’agent Cursor accélère le boilerplate React, mais produit encore trop de `

` sans gestion clavier ou de champs sans label associé. En encodant vos exigences dans une rule `.mdc` et en imposant une relecture humaine systématique, vous livrez des composants utilisables au clavier et annoncés correctement aux lecteurs d’écran.","datePublished":"2026-06-11","dateModified":"2026-06-13","authorSlug":"direction-editoriale-cosmos","difficulty":"intermediaire","readingTimeMinutes":4,"categories":["accessibilite","code"],"tools":["cursor"],"expertisePoles":["developpement"],"prerequisites":["Projet React ou Next.js App Router avec composants Client et Server identifiés","Rule accessibilité dans `.cursor/rules/` (ou prête à être créée via `/create-rule`)","eslint-plugin-jsx-a11y activé dans le dépôt","Extension axe DevTools ou lecteur d’écran pour valider un parcours clavier"],"callouts":[{"kind":"tip","title":"Prompt structuré","body":"Demandez explicitement : élément natif (`

Ressources ClickUp

ClickUp : structurer un projet web

Autres catégories populaires

ClickUp : structurer un projet web