CommunityRédaction et éditiongithub.com

webflow/webflow-skills

Créer ou mettre à jour plusieurs éléments CMS dans une collection Webflow avec validation et aperçu des différences. À utiliser pour ajouter plusieurs articles de blog, produits ou mettre à jour des champs sur de nombreux éléments.

Qu'est-ce que webflow-skills ?

Cette compétence permet de réaliser des opérations groupées (création et mise à jour) sur les éléments CMS de Webflow via les outils MCP dédiés. Elle offre une validation complète des données (champs obligatoires, types, contraintes, slugs uniques), un aperçu détaillé avec affichage des différences (old → new) et une approbation granulaire pour sélectionner les éléments à traiter. Fonctionne avec n'importe quel agent utilisant les outils MCP Webflow (comme Claude Code ou Cursor). Le processus se déroule en cinq phases : sélection du site et de la collection, collecte flexible des données, validation et analyse, prévisualisation avec approbation par élément, puis exécution par lots avec suivi de progression, gestion des erreurs et possibilité de rollback. L'agent guide l'utilisateur étape par étape, accepte des formats d'entrée variés (JSON, langage naturel, CSV, listes à puces) et optimise les appels API en filtrant les recherches par nom ou slug.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/webflow/webflow-skills/tree/HEAD/plugins/webflow-skills/skills/bulk-cms-update

Installed? Explore more Rédaction et édition skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Mise à jour CMS par lots

Créez ou mettez à jour plusieurs éléments CMS avec une validation complète, une approbation granulaire et une capacité de rollback.

Note importante

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

  • Utilisez l'outil data_sites_tool de Webflow MCP avec l'action list_sites pour lister les sites disponibles
  • Utilisez l'outil data_cms_tool de Webflow MCP avec l'action get_collection_list pour lister les collections CMS
  • Utilisez l'outil data_cms_tool de Webflow MCP avec l'action get_collection_details pour récupérer les schémas de collection
  • Utilisez l'outil data_cms_tool de Webflow MCP avec l'action list_collection_items pour récupérer les éléments existants
  • Utilisez l'outil data_cms_tool de Webflow MCP avec l'action create_collection_items pour créer des éléments (brouillon ou publié)
  • Utilisez l'outil data_cms_tool de Webflow MCP avec l'action update_collection_items pour mettre à jour des éléments (brouillon ou publié)
  • Utilisez l'outil data_cms_tool de Webflow MCP avec l'action publish_collection_items pour publier des éléments en brouillon
  • Utilisez l'outil webflow_guide_tool pour obtenir les bonnes pratiques avant de commencer
  • 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 : Sélection du site et de la collection

  1. Obtenir le site : Identifiez le site cible. Si l'utilisateur ne fournit pas l'ID du site, demandez-le.
  2. Lister les collections : Utilisez l'outil data_cms_tool de Webflow MCP avec l'action get_collection_list pour afficher les collections disponibles
  3. Demander à l'utilisateur de sélectionner une collection : L'utilisateur spécifie avec quelle collection travailler
  4. Récupérer le schéma de la collection : Utilisez l'outil data_cms_tool de Webflow MCP avec l'action get_collection_details pour récupérer :
    • Toutes les définitions de champs avec leurs types
    • Champs obligatoires vs facultatifs
    • Validations des champs (longueur max, motifs, etc.)
    • Cibles des champs de référence

Phase 2 : Collecte et analyse des données

  1. Demander le type d'opération : Clarifiez ce que l'utilisateur souhaite faire :

    • Créer uniquement de nouveaux éléments
    • Mettre à jour uniquement des éléments existants
    • Créer et mettre à jour
  2. Recevoir les données de l'utilisateur : Acceptez les données dans des formats flexibles :

    • Format structuré (type JSON)
    • Descriptions en langage naturel
    • Données de type CSV
    • Listes à puces
  3. Analyser et normaliser : Convertissez les données utilisateur dans un format structuré

  4. Récupérer les éléments existants (si des mises à jour sont impliquées) : Utilisez l'outil data_cms_tool de Webflow MCP avec l'action list_collection_items pour obtenir les données actuelles

    IMPORTANT - Recherche efficace des éléments :

    • Lorsque vous recherchez des éléments spécifiques par nom, utilisez TOUJOURS le paramètre name pour filtrer (ex. name: "Pikachu")
    • Lorsque vous recherchez par slug, utilisez le paramètre slug pour filtrer
    • NE récupérez JAMAIS tous les éléments d'abord pour ensuite parcourir les résultats - cela gaspille des appels API et des tokens
    • Récupérez la liste complète uniquement lorsque vous devez afficher tous les éléments ou que vous ne savez pas quels éléments cibler

Phase 3 : Validation et analyse

  1. Valider toutes les données :
    • Noms des champs : Vérifiez que tous les noms de champs existent dans le schéma
    • Champs obligatoires : Assurez-vous que tous les champs obligatoires sont fournis
    • Types de champs : Validez que les types de données correspondent au schéma
    • Contraintes : Vérifiez les longueurs max, motifs, valeurs autorisées
    • Slugs : Assurez-vous que les slugs sont uniques et valides
    • Champs de référence : Vérifiez que les éléments référencés existent
  2. Détecter les conflits :
    • Slugs en double (dans le lot ou avec des éléments existants)
    • Champs obligatoires manquants
    • Types de données invalides
    • Violations de contraintes
  3. Analyser l'impact :
    • Compter les créations vs mises à jour
    • Identifier les champs qui vont changer
    • Calculer la taille du lot et le temps de traitement

Phase 4 : Prévisualisation et approbation granulaire

  1. Générer un aperçu détaillé :
    • Afficher chaque élément avec son statut de validation
    • Afficher les avertissements pour tout problème
    • Pour les mises à jour, montrer les différences (ancien → nouveau)
    • Pour les créations, montrer toutes les valeurs des champs
    • Numéroter chaque élément pour une approbation sélective
  2. Présenter les options d'approbation granulaires :
    • Permettre à l'utilisateur de sélectionner des éléments spécifiques à traiter
    • Options : "all", "none", numéros spécifiques, plages de numéros
    • Afficher le temps de traitement estimé
  3. Proposer des options de publication :
    • Publier immédiatement (utiliser les endpoints *_live)
    • Créer en tant que brouillons (utiliser les endpoints normaux + publication manuelle)

Phase 5 : Exécution et rapport

  1. Stocker les données de rollback : Avant toute modification, enregistrez :
    • Valeurs d'origine pour tous les éléments mis à jour
    • Horodatage
    • Détails de l'opération
  2. Traiter par lots :
    • Maximum 50 éléments par lot
    • Afficher un indicateur de progression
    • Gérer les limites de débit avec élégance
  3. Exécuter les opérations : Utilisez les outils MCP Webflow appropriés selon le choix de l'utilisateur
  4. Gérer les erreurs avec élégance :
    • Continuer le traitement en cas d'échec d'un seul élément
    • Suivre les succès et les échecs séparément
    • Fournir des messages d'erreur détaillés
  5. Générer un rapport complet :
    • Résumé (nombre de succès/échecs)
    • Résultats détaillés par élément
    • ID des éléments créés/mis à jour
    • Détails des erreurs pour les éléments en échec
  6. Proposer une option de rollback : Permettre à l'utilisateur d'annuler les modifications si nécessaire

Exemples

Invite utilisateur :

Ajoute 2 articles de blog sur Webflow MCP et mets à jour le premier article pour dire "Top" au lieu de "Best"

Étape 1 : Sélection du site et de la collection

📋 Configuration de la mise à jour CMS par lots

Sites disponibles :
1. MCP Demo#1
2. MCP Demo#2
3. MCP Demo#3

Veuillez sélectionner un site (1-3) :

L'utilisateur sélectionne : 1

Collections disponibles dans MCP Demo#1 :
└── Articles de blog (9 éléments)
    Champs : name, slug, post-body, post-summary, main-image, thumbnail-image, featured, color

Procéder avec la collection Articles de blog ? (oui/non)

L'utilisateur confirme : oui

Étape 2 : Collecte des données

🔍 Schéma de la collection : Articles de blog

Champs obligatoires :
- name (Texte brut, max 256 caractères)
- slug (Texte brut, max 256 caractères, alphanumérique uniquement)

Champs facultatifs :
- post-body (Texte enrichi)
- post-summary (Texte brut)
- main-image (Image)
- thumbnail-image (Image)
- featured (Interrupteur, vrai/faux)
- color (Couleur, format hexadécimal)

Je vais analyser votre demande :
- Créer 2 nouveaux articles sur Webflow MCP
- Mettre à jour le premier article : "Best" → "Top"

Génération des éléments...

Étape 3 : Validation et prévisualisation

📋 Aperçu : Mise à jour CMS par lots

Collection : Articles de blog
Opérations : Créer 2 éléments + Mettre à jour 1 élément

---

### 🆕 Éléments à créer (2)

[1] ✓ NOUVEL ARTICLE
    name : "Webflow MCP : L'avenir du développement web"
    slug : "webflow-mcp-avenir-developpement-web"
    post-summary : "Découvrez comment Webflow MCP révolutionne..."
    post-body : "<h1>L'avenir est là</h1><p>..."
    featured : true
    color : "#9B59B6"
    ✅ Toutes les validations réussies

[2] ✓ NOUVEL ARTICLE
    name : "Pourquoi Webflow MCP transformera votre flux de travail en 2026"
    slug : "webflow-mcp-transformera-flux-travail-2026"
    post-summary : "Apprenez comment l'intégration de Webflow MCP..."
    post-body : "<h1>Transformez votre flux de travail</h1><p>..."
    featured : true
    color : "#3498DB"
    ✅ Toutes les validations réussies

---

### ✏️ Éléments à mettre à jour (1)

[3] ✓ MISE À JOUR EXISTANT
    ID de l'élément : 69615f84fc6ce1aa444d24d5
    Slug : why-webflow-is-best-2026-ai

    Modifications :
      name : "Why Webflow is the Best Choice for 2026" → "Why Webflow is the Top Choice for 2026"

    ✅ Toutes les validations réussies

---

**Résumé :**
- ✅ 2 éléments seront créés
- ✅ 1 élément sera mis à jour
- ⚠️ 0 avertissements
- ❌ 0 erreurs

**Options de publication :**
1. Publier immédiatement (recommandé)
2. Enregistrer en tant que brouillons

Quels éléments souhaitez-vous traiter ?
- Tapez "all" pour traiter les 3 éléments
- Tapez des numéros pour ignorer (ex. "2" pour ignorer l'élément 2)
- Tapez "none" pour annuler

Sélectionnez l'option de publication (1/2) : _
Sélectionnez les éléments : _

L'utilisateur sélectionne : 1, all

⚠️ Vous êtes sur le point de :
- Créer 2 nouveaux articles de blog (publiés en direct)
- Mettre à jour 1 article de blog existant (modifications publiées en direct)

Tapez "confirm" pour continuer.

L'utilisateur confirme : confirm

Étape 4 : Exécution et résultats

🔄 Traitement de la mise à jour par lots...

Création des éléments : ██████████ 100% (2/2)
Mise à jour des éléments : ██████████ 100% (1/1)

✅ Mise à jour CMS par lots terminée !

---

### 🆕 Éléments créés (2)

✓ [1] "Webflow MCP : L'avenir du développement web"
      ID : 6961640c66de07bed9aacf3e
      Slug : webflow-mcp-avenir-developpement-web
      Publié : 9 janv. 2026, 20:24

✓ [2] "Pourquoi Webflow MCP transformera votre flux de travail en 2026"
      ID : 6961640c66de07bed9aacf41
      Slug : webflow-mcp-transformera-flux-travail-2026
      Publié : 9 janv. 2026, 20:24

---

### ✏️ Éléments mis à jour (1)

✓ [3] "Why Webflow is the Top Choice for 2026"
      ID : 69615f84fc6ce1aa444d24d5
      Modifié : titre mis à jour
      Publié : 9 janv. 2026, 20:24

---

**Résumé :**
- ✅ 2 éléments créés avec succès
- ✅ 1 élément mis à jour avec succès
- ❌ 0 échecs
- ⏱️ Terminé en 3,2 secondes

**Nombre total d'éléments :** 11 (était 9)

📋 Rollback disponible :
Dernière mise à jour : 3 éléments modifiés à l'instant
Tapez "undo" dans les 5 minutes pour annuler toutes les modifications

Alternative : Avec avertissements de validation

📋 Aperçu : Mise à jour CMS par lots

[1] ⚠️ NOUVEL ARTICLE
    name : "Test Post"
    slug : "test"
    post-summary : "Hi"
    ⚠️ Avertissement : post-summary trop court (< 20 caractères) - peut affecter le SEO
    ⚠️ Avertissement : slug trop générique - envisagez un slug plus descriptif
    ⚠️ Avertissement : post-body manquant - le contenu sera vide
    ✅ Champs obligatoires présents (peut continuer)

[2] ❌ NOUVEL ARTICLE
    name : "Another Post!!!"
    slug : "another post"
    ❌ Erreur : le slug contient des espaces (doit être alphanumérique avec des tirets uniquement)
    ❌ Erreur : le nom contient des caractères spéciaux non autorisés
    🔴 Impossible de continuer - corrigez d'abord les erreurs

---

**Résumé :**
- ✅ 1 élément peut être créé (avec avertissements)
- ❌ 1 élément contient des erreurs (ne peut pas être créé)

Corriger l'élément 2 ou l'ignorer ? (corriger/ignorer)

Directives

Phase 1 : Exigences critiques

Sélection du site et de la collection :

  • Récupérez toujours la liste réelle des sites avec data_sites_tool et l'action list_sites
  • Ne supposez jamais les ID des sites
  • Affichez les noms des collections et le nombre d'éléments
  • Affichez le schéma des champs avant d'accepter les données
  • Confirmez la sélection de la collection avec l'utilisateur

Phase 2 : Analyse des données

Formats d'entrée flexibles : Acceptez les données dans plusieurs formats :

  1. Structuré (type JSON) :
CREATE :
- name : "Titre de l'article"
  slug : "slug-article"
  featured : true
  1. Langage naturel :
"Ajoute un article de blog intitulé 'Getting Started' avec le slug 'getting-started'"
  1. Style CSV :
name,slug,featured
"Article 1","article-1",true
"Article 2","article-2",false
  1. Listes à puces :
- Article 1 : "Titre" (slug : titre-slug)
- Article 2 : "Autre" (slug : autre-slug)

Règles d'analyse :

  • Soyez tolérant avec les variations de format
  • Inférez les champs facultatifs manquants
  • Demandez des clarifications en cas d'ambiguïté
  • Ne supposez jamais les valeurs des champs obligatoires

Recherche efficace des éléments : Lors de la récupération des éléments existants pour les mises à jour, utilisez des paramètres de filtre pour minimiser les appels API :

# Bon - Filtrer par nom lorsque vous connaissez le nom de l'élément
data_cms_tool(action : "list_collection_items", collection_id, name : "Pikachu")

# Bon - Filtrer par slug lorsque vous connaissez le slug
data_cms_tool(action : "list_collection_items", collection_id, slug : "pikachu")

# Mauvais - Récupérer tous les éléments puis parcourir les résultats
data_cms_tool(action : "list_collection_items", collection_id)  # Retourne 100 éléments
# Puis rechercher manuellement "Pikachu" dans les résultats...
  • Utilisez TOUJOURS les paramètres name ou slug lorsque vous recherchez des éléments spécifiques
  • Cela réduit les appels API, la taille des réponses et l'utilisation des tokens
  • Récupérez des listes non filtrées uniquement lors de l'affichage de tous les éléments ou lorsque la cible est inconnue

Phase 3 : Règles de validation

Validation des noms de champs :

  • Vérifiez que tous les noms de champs existent dans le schéma
  • Correspondance sensible à la casse
  • Suggérez des corrections pour les fautes de frappe
  • Exemple : "autor" → Vouliez-vous dire "author" ?

Champs obligatoires :

  • name et slug sont TOUJOURS obligatoires pour le CMS Webflow
  • Vérifiez les champs obligatoires spécifiques à la collection à partir du schéma
  • Listez clairement tous les champs obligatoires manquants
  • Impossible de continuer si des champs obligatoires sont manquants

Validation des types de champs :

Texte brut :

  • Vérifiez les contraintes de longueur maximale
  • Validez les motifs si spécifiés
  • Aucun HTML autorisé

Texte enrichi :

  • Doit être du HTML valide
  • Vérifiez les balises non fermées
  • Autorisez les éléments HTML courants

Image/Fichier :

  • Acceptez les ID de fichiers ou les URL
  • Validez que le fichier existe (si possible)
  • Texte alternatif facultatif

Interrupteur (Booléen) :

  • Acceptez : true/false, oui/non, 1/0
  • Normalisez en booléen

Couleur :

  • Doit être au format hexadécimal (#RRGGBB)
  • Validez les caractères hexadécimaux
  • Exemple : #FF5733 ✓, red ✗

Champs de référence :

  • Doivent référencer des ID d'éléments existants
  • Validez que les éléments référencés existent
  • Affichez les noms des éléments référencés pour plus de clarté

Validation des slugs :

  • CRITIQUE : Doivent être alphanumériques avec des tirets uniquement
  • Pas d'espaces, de tirets bas ou de caractères spéciaux
  • Maximum 256 caractères
  • Doivent être uniques (vérifiez par rapport aux éléments existants + le lot)
  • Suggérez automatiquement des slugs à partir des titres si manquants
  • Exemple :
    • ❌ "Mon Article !" → ⚠️ Contient des caractères spéciaux
    • ✅ "mon-article" → Valide

Validation des contraintes :

  • Longueur max : Avertissez si proche de la limite, erreur si dépassement
  • Motifs : Testez les motifs regex du schéma
  • Valeurs autorisées : Vérifiez par rapport aux options énumérées

Phase 4 : Prévisualisation et approbation

Format de la prévisualisation :

Pour les opérations de création :

[1] ✓ NOUVEL ÉLÉMENT
    champ1 : "valeur1"
    champ2 : "valeur2"
    champ3 : "valeur3"
    ✅ Toutes les validations réussies

Pour les opérations de mise à jour :

[2] ✓ MISE À JOUR EXISTANT
    ID de l'élément : xxx
    Slug : slug-existant

    Modifications :
      champ1 : "ancienne valeur" → "nouvelle valeur"
      champ2 : (aucun changement)
      champ3 : "ancien" → "nouveau"

    ✅ Toutes les validations réussies

Pour les éléments avec avertissements :

[3] ⚠️ NOUVEL ÉLÉMENT
    name : "Titre"
    ⚠️ Avertissement : Champ facultatif 'post-body' manquant
    ⚠️ Avertissement : Le slug peut être trop générique
    ✅ Peut continuer (avertissements uniquement)

Pour les éléments avec erreurs :

[4] ❌ NOUVEL ÉLÉMENT
    name : "Titre!!!"
    slug : "mauvais slug"
    ❌ Erreur : le slug contient des espaces
    ❌ Erreur : le nom contient des caractères spéciaux
    🔴 Impossible de continuer - corrigez les erreurs

Approbation granulaire :

  • Numérotez chaque élément : [1], [2], [3]...
  • Permettez un traitement sélectif
  • Acceptez les formats :
    • "all" - tout traiter
    • "none" - annuler l'opération
    • "1,3,5" - traiter les éléments 1, 3 et 5
    • "1-5" - traiter les éléments 1 à 5
    • "2" - ignorer uniquement l'élément 2, traiter le reste

Options de publication :

  • Publication immédiate : Utilisez les endpoints *_live (recommandé)
  • Mode brouillon : Utilisez les endpoints standards, puis l'outil publish_collection_items

Phase 5 : Exécution et rollback

Traitement par lots :

  • Traitez un maximum de 50 éléments par lot
  • Affichez un indicateur de progression après chaque lot
  • Respectez les limites de débit API de Webflow (20 requêtes par seconde)

Gestion des erreurs :

  • Si une opération sur un seul élément échoue, continuez avec les autres
  • Consignez l'ID de l'élément et le message d'erreur
  • Présentez un récapitulatif des échecs à la fin

Stockage des données de rollback :

  • Avant toute mise à jour, enregistrez les valeurs d'origine des champs modifiés
  • Conservez les données de rollback pendant toute la session (minimum 5 minutes)
  • L'utilisateur peut taper "undo" pour restaurer les valeurs précédentes

Rapport final : Incluez :

  • Résumé du traitement (créé, mis à jour, échecs)
  • Pour chaque élément : ID, slug, horodatage de la publication
  • ID des éléments créés (pour référence future)
  • Liens vers les éléments dans l'interface Webflow si disponibles

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Skills associés