Scaffold de Composant

Générez un nouveau Composant Code Webflow avec une structure de fichiers appropriée, un composant React et un fichier de définition .webflow.tsx.

Quand Utiliser Cette Skill

Utilisez-la quand :

• Créer un nouveau composant à partir de zéro
• L'utilisateur demande de créer un scaffold, de générer ou de créer un composant
• Démarrer un nouveau composant avec une structure de fichiers Webflow appropriée

N'utilisez PAS quand :

• Convertir un composant React existant (utilisez la skill convert-component)
• Modifier des composants existants (répondez directement ou utilisez component-audit)
• Poser simplement des questions sur les composants (répondez directement)
• Configurer un projet complexe avec une configuration bundler personnalisée (utilisez local-dev-setup à la place)

Remarque : Cette skill peut gérer automatiquement la configuration de base (webflow.json + dépendances). Utilisez local-dev-setup uniquement pour les configurations complexes nécessitant Tailwind, une config webpack personnalisée ou des configurations monorepo.

Instructions

Phase 0 : Vérification des Prérequis (À Exécuter en Premier)

Avant de recueillir des exigences, vérifiez que le projet est configuré pour les Composants Code Webflow :

1. Vérifier webflow.json :

   # Chercher webflow.json à la racine du projet

   • Si absent : Proposez de le créer ou invoquez la skill local-dev-setup

2. Vérifier les dépendances requises dans package.json :

   {
     "devDependencies": {
       "@webflow/webflow-cli": "...",
       "@webflow/data-types": "...",
       "@webflow/react": "..."
     }
   }

   • Si absent : Proposez de les installer :

     npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react

3. Vérifier le répertoire de composants :

   • Chercher un pattern existant (p. ex., src/components/)
   • Si aucun composant n'existe, déterminer où les créer en fonction de la config webflow.json

4. Rapporter le statut de configuration :

   Si tous les prérequis sont remplis :

   ✅ Projet prêt pour les composants code
   - webflow.json : Trouvé
   - Dépendances : Installées
   - Chemin des composants : src/components/
   
   Créons votre composant...

   Si des prérequis manquent :

   ⚠️ Configuration de Projet Requise
   
   Manquant :
   - [ ] Fichier de configuration webflow.json
   - [ ] Dépendance @webflow/webflow-cli
   - [ ] Dépendance @webflow/data-types
   - [ ] Dépendance @webflow/react
   
   Souhaitez-vous que je :
   1. Configure les éléments manquants maintenant (configuration rapide)
   2. Exécute l'initialisation complète du projet (skill local-dev-setup)
   
   Choisissez une option :

   La configuration rapide crée une config minimale :

   // webflow.json
   {
     "library": {
       "name": "Ma Bibliothèque de Composants",
       "components": ["./src/components/**/*.webflow.tsx"]
     }
   }

   Et installe les dépendances.

   Optionnel : webflow.json supporte aussi un champ "globals" pointant vers un fichier globals (p. ex., "globals": "./src/globals.webflow.ts"). Le fichier globals est utilisé pour les imports CSS globaux (p. ex., Tailwind) et l'export de tableaux décorateurs. Ajoutez ceci quand vous utilisez styled-components, Emotion ou Tailwind.

Ne procédez à la Phase 1 qu'après confirmation des prérequis.

Phase 1 : Recueillir les Exigences

1. Obtenir le nom du composant : Demander à l'utilisateur le nom du composant

   • Doit être en PascalCase (p. ex., "Accordion", "ProductCard")
   • Suggérer un nom si l'utilisateur fournit une description à la place

2. Déterminer le type de composant : Demander quel type de composant

   • Interactif (boutons, formulaires, accordéons)
   • Affichage (cartes, bannières, témoignages)
   • Mise en page (grilles, conteneurs, sections)
   • Piloté par les données (listes, tableaux, graphiques)

3. Identifier les props nécessaires : En fonction du type de composant, suggérer des props

   • Contenu texte → props.Text() ou props.RichText()
   • Texte éditable sur le canvas → props.TextNode()
   • Images → props.Image()
   • Liens → props.Link()
   • Valeurs numériques → props.Number()
   • Variantes/styles → props.Variant()
   • Contenu imbriqué → props.Slot()
   • Bascules → props.Boolean()
   • Afficher/masquer les sections → props.Visibility()
   • ID d'éléments HTML → props.Id()

4. Approche de style : Demander la méthode de style préférée

   • CSS Modules (par défaut, recommandé)
   • Tailwind CSS
   • styled-components
   • Emotion
   • Sass / Less
   • CSS brut
   • Autres supportés : MUI (utilise Emotion), Shadcn/UI (utilise Tailwind)

5. Exigences SSR : Déterminer si le composant a besoin de fonctionnalités côté client uniquement

   • Utilise les APIs du navigateur ? → ssr: false
   • Présentation pure ? → ssr: true (par défaut)

Phase 2 : Valider la Configuration du Projet

6. Vérifier la structure du projet :

   • Vérifier que webflow.json existe
   • Vérifier les dépendances requises
   • Identifier le pattern du répertoire de composants

7. Vérifier les conflits :

   • S'assurer que le nom du composant n'existe pas déjà
   • Vérifier qu'il n'y a pas de fichier .webflow.tsx avec le même nom

Phase 3 : Générer les Fichiers

8. Créer la structure de répertoires :

   src/components/[ComponentName]/
   ├── [ComponentName].tsx
   ├── [ComponentName].webflow.tsx
   └── [ComponentName].module.css (si CSS Modules)

9. Générer le composant React ([ComponentName].tsx) :

   
   import React from "react";
   import styles from "./[ComponentName].module.css";

export interface [ComponentName]Props { // Interface Props basée sur les exigences de l'utilisateur }

export const [ComponentName]: React.FC<[ComponentName]Props> = ({ // Props déstructurées avec valeurs par défaut }) => { return ( <div className={styles.container}> {/ JSX du composant /} </div> ); };

10. **Générer le fichier de définition** (`[ComponentName].webflow.tsx`) :
```typescript
import { declareComponent } from "@webflow/react";
import { props } from "@webflow/data-types";
import { [ComponentName] } from "./[ComponentName]";
import "./[ComponentName].module.css";

export default declareComponent([ComponentName], {
  name: "[ComponentName]",
  description: "[Description fournie par l'utilisateur ou générée]",
  group: "[Catégorie]",
  props: {
    // Configuration des props basée sur les exigences
  },
  options: {
    applyTagSelectors: true,
    ssr: true // ou false selon les exigences
  }
});

Remarque sur les décorateurs : declareComponent accepte aussi un tableau decorators optionnel pour envelopper les composants avec des providers. Les décorateurs intégrés incluent styledComponentsShadowDomDecorator (pour styled-components) et emotionShadowDomDecorator (pour Emotion). Les décorateurs globaux peuvent être exportés depuis un fichier globals référencé dans webflow.json — voir la remarque sur le fichier globals ci-dessous.

11. Générer les styles (si CSS Modules) :

    .container {
    /* Styles de base */
    }

Phase 4 : Fournir des Conseils

12. Afficher les fichiers créés : Lister tous les fichiers créés avec les chemins

13. Expliquer les étapes suivantes :

    • Implémenter la logique du composant
    • Ajouter les styles
    • Tester localement en exécutant le projet React (p. ex., npm run dev)
    • Déployer sur Webflow avec npx webflow library share

14. Sensibilisation au Shadow DOM :

    Remarque : Les composants code s'exécutent à l'intérieur du Shadow DOM. Les classes CSS au niveau du site ne fonctionneront pas
    à l'intérieur de votre composant. Utilisez des styles limités au composant (CSS Modules, etc.).
    Les variables CSS du site FONCTIONNENT — utilisez var(--variable-name, fallback).

15. Avertir sur la dénomination :

    ⚠️ Important : Ne renommez pas le fichier .webflow.tsx après le déploiement.
    Le renommage crée un nouveau composant et casse les instances existantes.

Exemples

Demande utilisateur :

Créer un composant accordion

Étape 1 : Recueil des Exigences

📦 Nouveau Composant : Accordion

Je vais créer un composant accordion. Laissez-moi confirmer les exigences :

**Props à inclure :**
1. `title` (Texte) - Le texte d'en-tête de l'accordion
2. `content` (Texte Enrichi) - Le contenu développable
3. `defaultOpen` (Booléen) - Si commencer en développé
4. `icon` (Variante) - Style de chevron : "arrow" | "plus" | "none"

**Style :** CSS Modules (recommandé pour Shadow DOM)

**SSR :** Activé (aucune API de navigateur uniquement nécessaire)

Cela semble-t-il correct ? Des props à ajouter ou supprimer ?

Étape 2 : Après Confirmation de l'Utilisateur

📁 Création des Fichiers du Composant...

Créé :
├── src/components/Accordion/Accordion.tsx
├── src/components/Accordion/Accordion.webflow.tsx
└── src/components/Accordion/Accordion.module.css

✅ Scaffold du composant terminé !

---

**Accordion.tsx** - Composant React avec :
- Props : title, content, defaultOpen, icon
- Gestion d'état pour ouvert/fermé
- Navigation au clavier accessible
- Classes CSS Modules

**Accordion.webflow.tsx** - Définition Webflow avec :
- Toutes les props configurées pour l'édition dans le Designer
- Valeurs par défaut définies
- SSR activé

---

💡 Étapes Suivantes :
1. Examiner et personnaliser le code généré
2. Tester localement en exécutant votre projet React (p. ex., `npm run dev`)
3. Déployer sur Webflow : `npx webflow library share`

⚠️ N'oubliez pas : Ne renommez pas les fichiers .webflow.tsx après le déploiement !

Accordion.tsx Généré :

import React, { useState } from "react";
import styles from "./Accordion.module.css";

export interface AccordionProps {
  title: string;
  content: string;
  defaultOpen?: boolean;
  icon?: "arrow" | "plus" | "none";
}

export const Accordion: React.FC<AccordionProps> = ({
  title,
  content,
  defaultOpen = false,
  icon = "arrow"
}) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <div className={styles.accordion}>
      <button
        className={styles.header}
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
      >
        <span className={styles.title}>{title}</span>
        {icon !== "none" && (
          <span className={`${styles.icon} ${isOpen ? styles.open : ""}`}>
            {icon === "arrow" ? "▼" : "+"}
          </span>
        )}
      </button>
      {isOpen && (
        <div
          className={styles.content}
          dangerouslySetInnerHTML={{ __html: content }}
        />
      )}
    </div>
  );
};

Accordion.webflow.tsx Généré :

import { declareComponent } from "@webflow/react";
import { props } from "@webflow/data-types";
import { Accordion } from "./Accordion";
import "./Accordion.module.css";

export default declareComponent(Accordion, {
  name: "Accordion",
  description: "Section de contenu développable avec en-tête et icône personnalisables",
  group: "Interactive",
  props: {
    title: props.Text({
      name: "Title",
      defaultValue: "Accordion Title"
    }),
    content: props.RichText({
      name: "Content",
      defaultValue: "<p>Accordion content goes here.</p>"
    }),
    defaultOpen: props.Boolean({
      name: "Start Expanded",
      defaultValue: false
    }),
    icon: props.Variant({
      name: "Icon Style",
      options: ["arrow", "plus", "none"],
      defaultValue: "arrow"
    })
  },
  options: {
    applyTagSelectors: true,
    ssr: true
  }
});

Directives

Sélection du Type de Prop

Catégories de Composants (Groupes)

• Interactive : Boutons, formulaires, accordéons, onglets, modales
• Display : Cartes, bannières, témoignages, badges
• Layout : Grilles, conteneurs, sections, diviseurs
• Navigation : Menus, chemins de navigation, pagination
• Media : Galeries, lecteurs vidéo, carrousels
• Data : Tableaux, listes, graphiques, compteurs

Arbre de Décision SSR

Définissez ssr: false si L'UNE de ces conditions s'applique :

1. APIs du navigateur — Utilise window, document, localStorage ou similaire
2. Contenu dynamique/personnalisé — Tableaux de bord spécifiques aux utilisateurs, vues authentifiées, données client
3. UI lourde/interactive — Graphiques, scènes 3D, cartes, éléments pilotés par l'animation
4. Sortie non-déterministe — Nombres aléatoires, valeurs basées sur l'heure, tout ce qui s'affiche différemment serveur vs client

Sinon → Gardez ssr: true (par défaut)

Règles de Dénomination des Fichiers

• Nom du composant : PascalCase (ProductCard)
• Les fichiers utilisent le même nom : ProductCard.tsx, ProductCard.webflow.tsx
• Modules CSS : ProductCard.module.css
• Répertoire : src/components/ProductCard/

Bonne Pratique des Valeurs par Défaut

Toujours fournir des valeurs par défaut significatives :

props: {
  title: props.Text({
    name: "Title",
    defaultValue: "Card Title"  // ✅ Bon
  }),
  count: props.Number({
    name: "Count",
    defaultValue: 0  // ✅ Bon
  })
}

Pas :

props: {
  title: props.Text({
    name: "Title"
    // ❌ defaultValue manquant
  })
}

Gestion des Erreurs

Le nom du composant existe déjà :

⚠️ Le composant "Button" existe déjà à src/components/Button/

Options :
1. Choisir un nom différent
2. Mettre à jour le composant existant (utilisez la skill component-audit)
3. Supprimer l'existant et en créer un nouveau

Que souhaitez-vous faire ?

webflow.json manquant :

❌ Aucun webflow.json trouvé à la racine du projet

Ce fichier est requis pour les composants code. Souhaitez-vous que je :
1. Crée un webflow.json basique
2. Exécute la skill local-dev-setup pour l'initialisation complète du projet

Choisissez une option (1/2) :

Nom de composant invalide :

⚠️ Nom de composant invalide : "my-button"

Les noms de composants doivent être :
- PascalCase (p. ex., "MyButton")
- Commencer par une lettre
- Contenir uniquement des lettres et des chiffres

Nom suggéré : "MyButton"

Utiliser ce nom ? (oui/non)