webflow/webflow-skills

Bonnes pratiques CMS

Fournit des conseils d'expert sur l'architecture, les relations, l'optimisation et la résolution de problèmes du CMS Webflow.

Note importante

Utilisez TOUJOURS les outils MCP Webflow pour toutes les opérations :

• Utilisez webflow_guide_tool de Webflow MCP pour obtenir les bonnes pratiques avant de commencer
• Utilisez data_sites_tool de Webflow MCP avec l'action list_sites pour identifier les sites disponibles
• Utilisez data_sites_tool de Webflow MCP avec l'action get_site pour récupérer les détails du site et les limites du plan
• Utilisez data_cms_tool de Webflow MCP avec l'action get_collection_list pour analyser les collections existantes
• Utilisez data_cms_tool de Webflow MCP avec l'action get_collection_details pour examiner les schémas de collection
• Utilisez data_cms_tool de Webflow MCP avec l'action list_collection_items pour évaluer le volume de contenu
• Utilisez data_pages_tool de Webflow MCP avec l'action list_pages pour comprendre la structure des pages
• Utilisez ask_webflow_ai de Webflow MCP pour des questions API spécifiques
• N'utilisez AUCUN autre outil ou méthode pour les opérations Webflow
• Tous les appels d'outils doivent inclure le paramètre context requis (15-25 mots, perspective à la troisième personne)

Instructions

Phase 1 : Découverte et analyse

1. Identifiez la demande : Déterminez si l'utilisateur :
   • Planifie une nouvelle structure CMS
   • Optimise des collections existantes
   • Résout des problèmes de performance
   • Met en place des relations
   • Cherche des conseils architecturaux
2. Obtenez les informations du site : Utilisez data_sites_tool de Webflow MCP avec les actions list_sites et get_site pour comprendre les limites du plan
3. Analysez la structure existante : Utilisez data_cms_tool de Webflow MCP avec les actions get_collection_list et get_collection_details pour examiner la configuration actuelle
4. Évaluez le volume de contenu : Utilisez data_cms_tool de Webflow MCP avec l'action list_collection_items pour comprendre l'échelle
5. Passez en revue les pages : Utilisez data_pages_tool de Webflow MCP avec l'action list_pages pour voir comment le contenu est affiché

Phase 2 : Collecte des exigences

6. Comprenez le cas d'utilisation : Posez des questions de clarification :
   • Quel contenu doit être géré ?
   • Qui mettra à jour le contenu ?
   • Comment le contenu sera-t-il affiché ?
   • Quelles relations sont nécessaires ?
   • Volume de contenu attendu ?
7. Identifiez les contraintes : Tenez compte des limites du plan, des contraintes techniques, des compétences de l'équipe
8. Définissez les critères de succès : Objectifs de performance, flux de travail éditorial, besoins d'évolutivité

Phase 3 : Planification de l'architecture

9. Concevez la structure des collections : Planifiez les collections, les champs et les relations
10. Sélectionnez les types de champs : Choisissez les types de champs appropriés pour chaque élément de contenu
11. Planifiez les relations : Concevez les connexions un-à-plusieurs et plusieurs-à-plusieurs
12. Envisagez la taxonomie : Déterminez les catégories, les tags et la structure organisationnelle
13. Planifiez pour l'échelle : Concevez pour la croissance (pagination, performance, limites)
14. Documentez les décisions : Expliquez les compromis et le raisonnement

Phase 4 : Recommandations et validation

15. Générez des recommandations : Fournissez des conseils spécifiques et actionnables
16. Priorisez les changements : Organisez par impact (victoires rapides vs. long terme)
17. Expliquez les compromis : Aidez les utilisateurs à comprendre les limitations et les solutions de contournement
18. Validez par rapport aux meilleures pratiques : Vérifiez les limitations et les modèles Webflow
19. Proposez des alternatives : Offrez plusieurs approches lorsque cela est applicable
20. Créez une feuille de route de mise en œuvre : Décomposez en phases

Phase 5 : Guide de mise en œuvre

21. Fournissez des instructions étape par étape : Conseils clairs pour la mise en œuvre
22. Proposez de l'aide : Suggérez d'utiliser d'autres compétences (cms-collection-setup, bulk-cms-update)
23. Structure de document : Recommandez une documentation pour la référence de l'équipe
24. Suggérez une approche de test : Guide sur la façon de valider les changements
25. Planifiez la migration : Si refactorisation, fournissez une stratégie de migration

Architecture des collections

Quand utiliser le CMS vs le Statique

Utilisez le CMS quand :

• Le contenu est mis à jour fréquemment (hebdomadaire ou plus)
• Plusieurs éléments similaires (articles de blog, produits, membres de l'équipe, projets)
• Des utilisateurs non techniques doivent éditer le contenu
• Le contenu nécessite un filtrage/tri sur le frontend
• Le même contenu apparaît sur plusieurs pages (biographies d'auteurs, caractéristiques de produits)
• Le contenu suit une structure cohérente entre les éléments
• Vous devez générer dynamiquement des pages

Utilisez le Statique quand :

• Le contenu change rarement (mises à jour annuelles ou moins)
• Sections uniques et ponctuelles (héros de page À propos, fonctionnalités spéciales de la page d'accueil)
• Mises en page personnalisées complexes par élément qui ne suivent pas de modèles
• Aucun besoin de filtrage ou de recherche dynamique
• Le contenu est hautement personnalisé et ne partage pas de structure
• La performance est critique et le contenu ne change pas
• Vous avez besoin d'une flexibilité de conception totale par section

Approche hybride :

• Pages statiques avec sections pilotées par CMS (par exemple, page d'accueil statique avec témoignages CMS)
• CMS pour le contenu récent, archives statiques pour le contenu ancien
• Pages de destination statiques, CMS pour les sous-pages

Sélection du type de champ

Type de contenu	Champ recommandé	Notes	Limites de caractères
Texte court	Texte brut	Titres, noms, slugs	Max 256 caractères
Texte long (sans formatage)	Texte brut (long)	Descriptions, extraits	Illimité
Contenu formaté	Texte enrichi	Contenu de blog, biographies, articles	Illimité
Image unique	Image	Photos, miniatures, en-têtes	4 Mo max par image
Images multiples	Multi-image	Galeries, photos de produits	Jusqu'à 25 images
Téléchargements de fichiers	Fichier	PDF, documents, téléchargements	4 Mo max par fichier
Valeurs Oui/Non	Interrupteur	Indicateurs de mise en avant, bascules de visibilité	Booléen
Choix unique	Option	Statut, type, catégorie	Options illimitées
Date/heure	Date/Heure	Dates de publication, événements, échéances	Format ISO 8601
Lien vers un élément	Référence	Auteur → Article, Catégorie → Article	Un élément
Lien vers plusieurs éléments	Multi-référence	Article → Tags, Article → Articles connexes	Plusieurs éléments
URL externe	Lien	Liens sociaux, ressources externes	Max 2048 caractères
Valeurs numériques	Nombre	Prix, évaluations, commandes, compteurs	Entier ou décimal
Numéros de téléphone	Téléphone	Numéros de contact	Format E.164
Adresses e-mail	E-mail	E-mails de contact	Format d'e-mail valide
Valeurs de couleur	Couleur	Couleurs de thème, accents, couleurs de marque	Format Hex
Intégrations vidéo	Vidéo	YouTube, Vimeo	URL d'intégration

Arbre de décision du type de champ

Besoin de stocker :
├── Texte ?
│   ├── Court (≤256 caractères) ? → Texte brut
│   ├── Long + Formatage ? → Texte enrichi
│   └── Long + Sans formatage ? → Texte brut (long)
├── Média ?
│   ├── Image unique ? → Image
│   ├── Images multiples ? → Multi-image
│   ├── Vidéo ? → Vidéo
│   └── Téléchargement de fichier ? → Fichier
├── Choix/Sélection ?
│   ├── Oui/Non ? → Interrupteur
│   ├── Une option ? → Option
│   └── Lien vers un élément ? → Référence/Multi-référence
├── Données structurées ?
│   ├── Nombre ? → Nombre
│   ├── Date/Heure ? → Date/Heure
│   ├── Téléphone ? → Téléphone
│   ├── E-mail ? → E-mail
│   └── URL ? → Lien
└── Visuel ?
    └── Couleur ? → Couleur

Modèles de relations

Un-à-plusieurs (champ de référence)

Exemple : Articles → Auteur

Collection Auteurs :
├── nom (Texte, requis)
├── slug (Texte, requis)
├── bio (Texte enrichi)
├── photo (Image)
├── titre (Texte) - titre du poste
├── e-mail (E-mail)
└── liens-sociaux (Lien)

Collection Articles :
├── titre (Texte, requis)
├── slug (Texte, requis)
├── contenu (Texte enrichi)
└── auteur (Référence → Auteurs)  ← Chaque article a UN auteur

Affichage : Sur la page de l'article, accédez à auteur.nom, auteur.photo, auteur.bio

Filtrage : Peut filtrer les articles par auteur spécifique

Avantages :

• ✅ Données d'auteur centralisées (mettre à jour une fois, reflète partout)
• ✅ Facile à maintenir la cohérence
• ✅ Peut créer des pages de profil d'auteur montrant tous leurs articles
• ✅ Efficace (une référence par article)

Cas d'utilisation :

• Articles de blog → Auteur
• Produits → Marque
• Événements → Lieu
• Projets → Client
• Témoignages → Client

Plusieurs-à-plusieurs (Multi-référence)

Exemple : Articles ↔ Tags

Collection Tags :
├── nom (Texte, requis)
├── slug (Texte, requis)
├── description (Texte brut)
└── couleur (Couleur) - regroupement visuel optionnel

Collection Articles :
├── titre (Texte, requis)
├── slug (Texte, requis)
├── contenu (Texte enrichi)
└── tags (Multi-référence → Tags)  ← Chaque article a PLUSIEURS tags

Affichage : Sur la page de l'article, bouclez sur tags pour afficher tous les tags

Filtrage : Peut filtrer les articles par tag spécifique

Avantages :

• ✅ Organisation flexible du contenu
• ✅ Liens croisés entre contenus connexes
• ✅ Meilleur SEO (regroupement de sujets)
• ✅ Navigation utilisateur améliorée

Limitations :

• ⚠️ Max 5 champs multi-référence par collection
• ⚠️ Peut uniquement filtrer par UNE valeur multi-référence à la fois dans les listes de collection
• ⚠️ Impossible de trier par valeurs de champ référencé
• ⚠️ Chaque référence = requête supplémentaire (impact sur les performances)

Solutions de contournement pour le filtrage multi-tags :

1. Créez des tags combinés (par exemple, "vegan-sans-gluten")
2. Utilisez le filtre CMS Finsweet pour le filtrage côté client
3. Créez des listes de collection filtrées séparées pour les combinaisons courantes
4. Utilisez du code personnalisé avec l'API Webflow

Cas d'utilisation :

• Articles de blog ↔ Tags
• Produits ↔ Fonctionnalités
• Projets ↔ Technologies
• Recettes ↔ Ingrédients
• Cours ↔ Sujets

Auto-référence (collections imbriquées)

Exemple : Catégories avec sous-catégories

Collection Catégories :
├── nom (Texte, requis)
├── slug (Texte, requis)
├── description (Texte brut)
├── parent (Référence → Catégories)  ← Auto-référence pour la hiérarchie
└── niveau (Nombre) - 1, 2, 3 pour la logique d'affichage

Cas d'utilisation :

• Catégories avec sous-catégories
• Éléments de menu avec sous-éléments de menu
• Hiérarchie organisationnelle
• Taxonomie de produits

Avantages :

• ✅ Hiérarchie flexible
• ✅ Profondeur illimitée (théoriquement)
• ✅ Facile à réorganiser

Limitations :

• ⚠️ Complexe à afficher les niveaux imbriqués dans Webflow
• ⚠️ Maximum de 2 à 3 niveaux recommandé pour une mise en œuvre pratique
• ⚠️ Nécessite une logique personnalisée pour l'imbrication profonde

Alternative : Utilisez un champ Option pour une catégorisation simple de 1 à 2 niveaux

Relations bidirectionnelles

Exemple : Articles connexes

Collection Articles :
├── titre (Texte, requis)
├── slug (Texte, requis)
├── contenu (Texte enrichi)
└── articles-connexes (Multi-référence → Articles)  ← Auto-référence vers d'autres articles

Affichage : Affichez les articles connexes en bas de la page de l'article

Avantages :

• ✅ Maintient l'engagement des utilisateurs plus longtemps
• ✅ Meilleur SEO (liens internes)
• ✅ Connexions de contenu flexibles

Défis :

• ⚠️ Pas vraiment bidirectionnel (A → B ne crée pas automatiquement B → A)
• ⚠️ Doit maintenir manuellement les deux directions si nécessaire
• ⚠️ Peut prendre du temps pour les éditeurs de contenu

Solutions :

1. Utilisez des tags pour la logique automatique "lié par tag"
2. Curation manuelle pour les connexions les plus importantes
3. Hybride : Manuelle + automatisée basée sur les tags/catégorie

Exemples

Exemple 1 : Planification d'une nouvelle structure CMS

Invite utilisateur :

Je construis un site de recettes. Comment dois-je structurer le CMS ?

Étape 1 : Collecte des exigences

📐 Planification CMS : Site de recettes

Laissez-moi poser quelques questions pour concevoir la meilleure structure :

1. **Volume de contenu** : Combien de recettes prévoyez-vous d'avoir ?
   - Petit (≤50) : Structure simple
   - Moyen (50-200) : Organisation modérée
   - Grand (200+) : Taxonomie avancée nécessaire

2. **Attributs de recette** : Quelles informations chaque recette aura-t-elle ?
   - Basique : Nom, ingrédients, instructions, image
   - Avancé : Temps de préparation, temps de cuisson, difficulté, nutrition, tags diététiques

3. **Besoins d'organisation** : Comment les utilisateurs trouveront-ils les recettes ?
   - Par type de repas (petit-déjeuner, déjeuner, dîner)
   - Par cuisine (italienne, mexicaine, asiatique)
   - Par restrictions alimentaires (vegan, sans gluten, céto)
   - Par méthode de cuisson (cuisson au four, grill, mijoteuse)
   - Par ingrédients (poulet, pâtes, légumes)

4. **Configuration des auteurs** : Auteur unique ou multiple ?
   - Unique : Vous gérez tout le contenu
   - Multiple : Équipe de créateurs de recettes

5. **Engagement utilisateur** : Quelles fonctionnalités interactives ?
   - Commentaires/avis
   - Évaluations
   - Sauvegarder les favoris
   - Imprimer les fiches recettes

En fonction de vos réponses, je concevrai l'architecture CMS optimale.

Étape 2 : Après la réponse de l'utilisateur

📐 Architecture CMS recommandée : Site de recettes

Basée sur vos exigences (Volume moyen, Auteurs multiples, Filtrage avancé) :

---

## Collections nécessaires : 4

### 1. Recettes (Contenu principal)
├── nom (Texte, requis) - "Pâtes Carbonara Maison"
├── slug (Texte, requis) - "pates-carbonara-maison"
├── description (Texte brut, 160 caractères) - Résumé pour le SEO
├── image-vedette (Image) - Image héros pour la page de détail
├── image-miniature (Image) - Image plus petite pour les cartes grille
├── temps-préparation (Nombre, requis) - Minutes de préparation
├── temps-cuisson (Nombre, requis) - Minutes de cuisson
├── temps-total (Nombre) - Calculé automatiquement ou manuel
├── portions (Nombre, requis) - Nombre de portions
├── difficulté (Option : Facile, Moyen, Difficile)
├── ingrédients (Texte enrichi, requis) - Liste d'ingrédients avec quantités
├── instructions (Texte enrichi, requis) - Étapes directionnelles
├── notes (Texte enrichi) - Notes du chef, astuces, substitutions
├── info-nutritionnelle (Texte brut) - Calories, protéines, etc.
├── auteur (Référence → Auteurs, requis)
├── catégorie (Référence → Catégories, requis) - Type de repas principal
├── cuisine (Référence → Cuisines) - Italienne, Mexicaine, etc.
├── tags-diététiques (Multi-référence → Tags Diététiques) - Vegan, SG, etc.
├── méthodes-cuisson (Multi-référence → Méthodes) - Cuisson au four, Grill, etc.
├── mis-en-avant (Interrupteur) - Mettre en avant sur la page d'accueil
├── date-publication (Date, requis)
└── nombre-vues (Nombre) - Suivre la popularité

**Total des champs :** 22 champs
**Plan requis :** Plan CMS minimum (20 collections, 2000 éléments)

### 2. Auteurs
├── nom (Texte, requis)
├── slug (Texte, requis)
├── titre (Texte) - "Chef cuisinier", "Développeur de recettes"
├── bio (Texte enrichi)
├── photo (Image)
├── spécialité (Texte brut) - "Cuisine italienne", "Pâtisserie"
├── social-instagram (Lien)
├── social-siteweb (Lien)
└── e-mail (E-mail)

**Objectif :** Informations d'auteur réutilisables dans toutes les recettes

### 3. Catégories
├── nom (Texte, requis) - "Petit-déjeuner", "Déjeuner", "Dîner", "Desserts"
├── slug (Texte, requis)
├── description (Texte brut)
├── image (Image) - Image héros de catégorie
├── couleur (Couleur)

…

[tronqué pour la traduction]