webflow-mcp:flowkit-naming

Par webflow · webflow-skills

Appliquer le système de nommage CSS Flowkit dans Webflow. À utiliser lors de la création de classes, de l'audit d'un nommage existant, ou de la construction de nouveaux composants selon les conventions Flowkit. Flowkit est le framework CSS officiel de Webflow avec une approche utility-first.

npx skills add https://github.com/webflow/webflow-skills --skill webflow-mcp:flowkit-naming

Système de Nommage FlowKit

Appliquez les conventions de nommage CSS FlowKit dans les projets Webflow en utilisant les outils Webflow Designer.

Note Importante

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

  • Utilisez webflow_guide_tool de Webflow MCP pour obtenir les meilleures pratiques avant de commencer
  • Utilisez data_sites_tool de Webflow MCP avec l'action list_sites pour identifier le site cible
  • Utilisez de_page_tool de Webflow MCP pour obtenir la page actuelle et basculer entre les pages
  • Utilisez element_tool de Webflow MCP pour sélectionner les éléments et inspecter les classes actuelles
  • Utilisez style_tool de Webflow MCP pour créer et mettre à jour les styles conformes à FlowKit
  • Utilisez de_learn_more_about_styles de Webflow MCP pour comprendre les propriétés de style supportées
  • N'UTILISEZ PAS d'autres outils ou méthodes 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)
  • Connexion Designer requise : l'utilisateur doit être connecté à Webflow Designer pour que cette compétence fonctionne

Instructions

Phase 1 : Découverte et Configuration

  1. Identifier la tâche : Déterminez si l'utilisateur :
    • Crée de nouvelles classes de composants
    • Audite les noms de classes existants
    • Construit des sections de page complètes
    • Refactorise les classes non-FlowKit vers FlowKit
  2. Connecter à Designer : Confirmez que l'utilisateur a Webflow Designer ouvert et connecté
  3. Obtenir la page actuelle : Utilisez de_page_tool de Webflow MCP pour identifier la page de travail actuelle
  4. Demander la portée : Clarifiez les éléments ou sections avec lesquels travailler

Phase 2 : Analyse (si audit des existants)

  1. Obtenir tous les éléments : Utilisez element_tool de Webflow MCP pour récupérer les éléments de la page actuelle
  2. Extraire les classes : Identifiez tous les noms de classes actuellement appliqués
  3. Catégoriser les problèmes :
    • Prefix fk- manquant
    • Casse incorrecte (majuscules/casse mixte)
    • Mauvais séparateurs (tirets bas au lieu de tirets)
    • Nommage non-sémantique
    • Structure de composant incohérente
  4. Générer un rapport d'audit : Montrez les noms actuels par rapport aux noms conformes à FlowKit

Phase 3 : Génération de Suggestions

  1. Appliquer les motifs FlowKit : Générez des noms de classes suivant les conventions FlowKit v2
  2. Structurer par type :
    • Wrappers de composants : fk-[component]
    • Éléments enfants : fk-[component]-[element]
    • Modificateurs d'état : classes combinées avec is-[state]
    • Utilitaires de mise en page : fk-flex, fk-grid, fk-stack
    • Utilitaires d'espacement : fk-space-[size], fk-py-[size], fk-px-[size]
    • Utilitaires de typographie : fk-text-[style]
  3. Valider les suggestions : Assurez-vous que toutes les suggestions suivent les conventions FlowKit
  4. Afficher un aperçu : Affichez la structure hiérarchique avec les classes suggérées

Phase 4 : Application (si l'utilisateur confirme)

  1. Créer des styles : Utilisez style_tool de Webflow MCP pour créer de nouvelles classes conformes à FlowKit
  2. Mettre à jour les éléments : Utilisez element_tool de Webflow MCP pour appliquer les classes aux éléments
  3. Traiter par lots : Si plusieurs éléments, traitez par groupes de 10-15
  4. Afficher la progression : Affichez les éléments en cours de mise à jour

Phase 5 : Vérification et Rapports

  1. Vérifier l'application : Vérifiez que les classes ont été appliquées correctement
  2. Générer un rapport : Montrez ce qui a été créé/mis à jour
  3. Fournir une documentation : Expliquez la structure FlowKit utilisée
  4. Suggérer les étapes suivantes : Recommandez des motifs FlowKit supplémentaires à mettre en œuvre

Référence de Nommage FlowKit

Motifs de Nommage Core

Motif Objectif Exemple
fk-[component] Wrapper de composant (classe de base) fk-card, fk-nav, fk-hero
fk-[component]-[element] Élément enfant dans le composant fk-card-title, fk-nav-link
fk-[component].[modifier] Modificateur de classe combinée (état/variante) fk-card.is-featured
fk-text-[style] Utilitaire de typographie fk-text-xl, fk-text-bold
fk-flex / fk-grid Utilitaires de mise en page fk-flex-center, fk-grid-3
fk-space-[size] Utilitaires d'espacement fk-space-md, fk-py-lg
is-[state] Modificateurs d'état (combiné) is-active, is-hidden, is-disabled

Utilitaires de Mise en Page

fk-section              Wrapper de section avec padding
fk-container            Conteneur de largeur max (centré)
fk-flex                 Conteneur Flexbox
fk-flex-center          Flex centré (les deux axes)
fk-flex-between         Flex space-between
fk-flex-around          Flex space-around
fk-flex-col             Direction flex colonne
fk-grid                 Conteneur grid (base)
fk-grid-2               Grid 2 colonnes
fk-grid-3               Grid 3 colonnes
fk-grid-4               Grid 4 colonnes
fk-grid-6               Grid 6 colonnes
fk-stack                Stack vertical (gap entre items)
fk-row                  Ligne horizontale
fk-wrap                 Flex wrap activé

Utilitaires de Typographie

fk-text-xs              Texte extra petit (12px)
fk-text-sm              Texte petit (14px)
fk-text-md              Texte moyen (16px - par défaut)
fk-text-lg              Texte grand (18px)
fk-text-xl              Texte extra large (24px)
fk-text-2xl             Texte 2x grand (32px)
fk-text-3xl             Texte 3x grand (48px)
fk-text-bold            Poids gras (700)
fk-text-semibold        Poids demi-gras (600)
fk-text-medium          Poids moyen (500)
fk-text-light           Poids léger (300)
fk-text-center          Aligné au centre
fk-text-left            Aligné à gauche
fk-text-right           Aligné à droite
fk-text-uppercase       Transformation majuscules
fk-text-lowercase       Transformation minuscules
fk-text-capitalize      Transformation Majuscule Initiale

Utilitaires d'Espacement

fk-space-xs             Espacement 4px
fk-space-sm             Espacement 8px
fk-space-md             Espacement 16px (par défaut)
fk-space-lg             Espacement 24px
fk-space-xl             Espacement 32px
fk-space-2xl            Espacement 48px
fk-space-3xl            Espacement 64px

Espacement Directionnel :
fk-py-[size]            Padding vertical (haut + bas)
fk-px-[size]            Padding horizontal (gauche + droite)
fk-pt-[size]            Padding haut
fk-pb-[size]            Padding bas
fk-pl-[size]            Padding gauche
fk-pr-[size]            Padding droite

fk-my-[size]            Margin vertical (haut + bas)
fk-mx-[size]            Margin horizontal (gauche + droite)
fk-mt-[size]            Margin haut
fk-mb-[size]            Margin bas
fk-ml-[size]            Margin gauche
fk-mr-[size]            Margin droite

Utilitaires de Couleur

fk-bg-primary           Couleur de fond primaire
fk-bg-secondary         Couleur de fond secondaire
fk-bg-accent            Couleur de fond accent
fk-bg-light             Fond clair
fk-bg-dark              Fond foncé
fk-text-primary         Couleur de texte primaire
fk-text-secondary       Couleur de texte secondaire
fk-text-muted           Couleur de texte muette

Utilitaires de Bordures et Visuels

fk-rounded              Rayon de bordure (par défaut)
fk-rounded-sm           Petit rayon de bordure
fk-rounded-lg           Grand rayon de bordure
fk-rounded-full         Complètement arrondi (pilule/cercle)
fk-border               Bordure (1px solid)
fk-border-top           Bordure haut seulement
fk-border-bottom        Bordure bas seulement
fk-shadow               Box shadow (par défaut)
fk-shadow-sm            Petite ombre
fk-shadow-lg            Grande ombre

Modificateurs d'État (Classes Combinées)

is-active               État actif (navigation, onglets)
is-hidden               Visibilité cachée
is-visible              Visibilité visible
is-disabled             État désactivé
is-loading              État chargement
is-error                État erreur
is-success              État succès
is-primary              Variante primaire
is-secondary            Variante secondaire
is-featured             Variante en vedette/surlignée
is-horizontal           Variante mise en page horizontale
is-vertical             Variante mise en page verticale

Exemples

Exemple 1 : Créer une Section Hero

Demande utilisateur :

Construire une section hero avec nommage FlowKit

Étape 1 : Analyse

🎨 Structure Section Hero FlowKit

Je vais créer une section hero en suivant les conventions FlowKit v2.

Structure :
fk-section (wrapper avec padding)
└── fk-container (conteneur de largeur max)
    └── fk-hero (wrapper de composant)
        ├── fk-hero-content + fk-flex + fk-flex-col + fk-flex-center
        │   ├── fk-hero-eyebrow + fk-text-sm + fk-text-uppercase + fk-mb-sm
        │   ├── fk-hero-title + fk-text-3xl + fk-text-bold + fk-mb-md
        │   ├── fk-hero-subtitle + fk-text-lg + fk-text-muted + fk-mb-lg
        │   └── fk-hero-actions + fk-flex + fk-space-md
        │       ├── fk-button.is-primary
        │       └── fk-button.is-secondary
        └── fk-hero-image + fk-rounded-lg

Total de classes à créer : 12 classes de base + 2 classes combinées
Prêt à créer celles-ci dans Webflow Designer ? (oui/non)

Étape 2 : Après confirmation utilisateur

🔄 Création des Classes Hero FlowKit...

Progression : ████████████████████ 100 % (14/14 classes)

✅ Classes Créées :

**Classes de Mise en Page :**
- ✅ fk-section - Wrapper de section avec padding
- ✅ fk-container - Conteneur de largeur max
- ✅ fk-hero - Wrapper de composant hero

**Classes d'Élément :**
- ✅ fk-hero-content - Conteneur de contenu hero
- ✅ fk-hero-eyebrow - Petit label au-dessus du titre
- ✅ fk-hero-title - Titre principal du hero
- ✅ fk-hero-subtitle - Texte de soutien
- ✅ fk-hero-actions - Conteneur de boutons
- ✅ fk-hero-image - Wrapper d'image hero

**Classes Utilitaires :**
- ✅ fk-flex, fk-flex-col, fk-flex-center
- ✅ fk-text-sm, fk-text-lg, fk-text-3xl
- ✅ fk-text-uppercase, fk-text-bold, fk-text-muted
- ✅ fk-mb-sm, fk-mb-md, fk-mb-lg
- ✅ fk-space-md, fk-rounded-lg

**Classes de Composant :**
- ✅ fk-button (avec classes combinées : is-primary, is-secondary)

---

📋 Guide d'Utilisation :

1. Créer un élément Section → Appliquer `fk-section`
2. Ajouter Container à l'intérieur → Appliquer `fk-container`
3. Ajouter Div à l'intérieur → Appliquer `fk-hero`
4. Construire la structure de contenu en suivant la hiérarchie ci-dessus
5. Utiliser les classes combinées pour les variantes de bouton : `fk-button.is-primary`

🎉 Votre structure de section hero FlowKit est prête !

Exemple 2 : Audit des Classes Existantes

Demande utilisateur :

Vérifier ces classes : feature-card, FK-Button, fk_hero_title, cardTitle

Réponse :

📋 Rapport d'Audit FlowKit

Vérification de 4 classes par rapport aux conventions FlowKit v2...

---

## Problèmes Trouvés : 4

### 1. `feature-card` ⚠️
**Problème :** Prefix FlowKit manquant
**Raison :** Toutes les classes FlowKit doivent commencer par `fk-`
**Suggéré :** `fk-feature-card` ou `fk-card.is-feature`
**Correction :** Renommer la classe pour inclure le préfixe `fk-`

### 2. `FK-Button` ❌
**Problème :** Casse incorrecte (majuscules)
**Raison :** FlowKit utilise uniquement les minuscules
**Suggéré :** `fk-button`
**Correction :** Convertir en minuscules : `fk-button`

### 3. `fk_hero_title` ❌
**Problème :** Mauvais séparateur (tiret bas)
**Raison :** FlowKit utilise des tirets, pas des tirets bas
**Suggéré :** `fk-hero-title`
**Correction :** Remplacer les tirets bas par des tirets

### 4. `cardTitle` ❌
**Problème :** Violations multiples
  - Prefix `fk-` manquant
  - CamelCase au lieu de kebab-case
**Raison :** FlowKit nécessite le préfixe `fk-` et la séparation par tiret
**Suggéré :** `fk-card-title`
**Correction :** Ajouter le préfixe et convertir en kebab-case

---

## Règles de Nommage FlowKit :

✅ **Motifs corrects :**
- `fk-card` (composant)
- `fk-card-title` (élément)
- `fk-button.is-primary` (avec modificateur)
- `fk-text-xl` (utilitaire)

❌ **Motifs incorrects :**
- `card` (pas de préfixe)
- `FK-Card` (mauvaise casse)
- `fk_card` (mauvais séparateur)
- `cardTitle` (camelCase)

Voulez-vous que je renomme ces classes dans Webflow Designer ? (oui/non)

Exemple 3 : Construire un Composant Carte

Demande utilisateur :

Créer un composant carte produit avec classes FlowKit

Réponse :

🎨 Composant Carte Produit FlowKit

Structure :
fk-card (composant de base)
├── fk-card-image-wrapper
│   └── fk-card-image + fk-rounded-lg
├── fk-card-badge + fk-text-xs + fk-text-uppercase + fk-bg-accent
├── fk-card-content + fk-space-md
│   ├── fk-card-category + fk-text-sm + fk-text-muted
│   ├── fk-card-title + fk-text-lg + fk-text-bold
│   ├── fk-card-description + fk-text-md
│   └── fk-card-price + fk-text-xl + fk-text-bold + fk-text-primary
└── fk-card-footer + fk-flex + fk-flex-between + fk-pt-md + fk-border-top
    ├── fk-card-rating + fk-flex + fk-space-xs
    └── fk-button.is-primary + fk-text-sm

---

## Variantes (Classes Combinées) :

### Carte en Vedette
`fk-card.is-featured`
- Bordure/ombre surlignée
- Fond accent
- Utiliser pour les produits promus

### Mise en Page Horizontale
`fk-card.is-horizontal`
- Image/contenu côte à côte
- Meilleur pour les listes
- Image à gauche, contenu à droite

### Taille Compacte
`fk-card.is-compact`
- Padding réduit
- Tailles de texte plus petites
- Utiliser dans les mises en page serrées

---

## Modificateurs Responsifs :

Bureau (par défaut) :
- `fk-grid-3` (3 cartes par ligne)

Tablette :
- Ajouter combinaison : `fk-grid-3.tablet-2`

Mobile :
- Ajouter combinaison : `fk-grid-3.tablet-2.mobile-1`

---

Prêt à créer ces classes ? (oui/non)

Exemple 4 : Refactoriser vers FlowKit

Demande utilisateur :

Refactoriser ma navigation pour utiliser le nommage FlowKit

Étape 1 : Analyse Actuelle

🔍 Analyse de la Navigation Actuelle...

8 éléments trouvés avec classes non-FlowKit :
├── navbar → fk-nav
├── navbar-container → fk-nav-container
├── logo-wrapper → fk-nav-logo
├── menu → fk-nav-menu
├── menu-item → fk-nav-link
├── menu-item active → fk-nav-link.is-active
├── button-group → fk-nav-actions
└── btn-primary → fk-button.is-primary

---

## Plan de Migration :

**Phase 1 : Créer les Classes FlowKit** (8 classes)
- Créer toutes les classes `fk-nav-*`
- Créer les classes utilitaires : `fk-flex`, `fk-flex-between`, `fk-flex-center`
- Créer `fk-button` avec le modificateur `is-primary`

**Phase 2 : Mettre à Jour les Éléments** (8 éléments)
- Remplacer les anciennes classes par les nouvelles classes FlowKit
- Appliquer les classes combinées où nécessaire
- Préserver les styles existants

**Phase 3 : Nettoyage** (optionnel)
- Les anciennes classes peuvent être supprimées après vérification
- Conserver pour maintenant pour la rétrocompatibilité

---

Procéder à la migration ? (oui/non)

Étape 2 : Après Migration

✅ Navigation Refactorisée vers FlowKit

**Classes Créées :** 8
**Éléments Mis à Jour :** 8
**Temps écoulé :** ~3 secondes

---

## Structure Mise à Jour :

fk-nav
├── fk-nav-container + fk-flex + fk-flex-between
│   ├── fk-nav-logo
│   ├── fk-nav-menu + fk-flex + fk-flex-center + fk-space-md
│   │   ├── fk-nav-link (x5)
│   │   └── fk-nav-link.is-active (page actuelle)
│   └── fk-nav-actions + fk-flex + fk-space-sm
│       ├── fk-button.is-secondary
│       └── fk-button.is-primary

---

## Avant → Après :

| Ancienne Classe | Nouvelle Classe FlowKit |
|-----------|-------------------|
| navbar | fk-nav ✅ |
| navbar-container | fk-nav-container ✅ |
| logo-wrapper | fk-nav-logo ✅ |
| menu | fk-nav-menu ✅ |
| menu-item | fk-nav-link ✅ |
| menu-item active | fk-nav-link.is-active ✅ |
| button-group | fk-nav-actions ✅ |
| btn-primary | fk-button.is-primary ✅ |

---

🎉 La navigation est maintenant conforme à FlowKit !

**Étapes suivantes :**
- Tester la navigation sur tous les points d'arrêt
- Vérifier que les états actifs fonctionnent correctement
- Envisager l'ajout de `fk-nav.is-transparent` pour la variante d'en-tête transparent
- Envisager l'ajout de `fk-nav.is-sticky` pour la navigation collante

Directives

Phase 1 : Conditions Critiques

Règle du Préfixe FlowKit :

  • TOUTES les classes de composants et d'éléments DOIVENT commencer par fk-
  • Exception : les modificateurs d'état utilisent le préfixe is- (en classes combinées uniquement)
  • Exception : les classes utilitaires pour les intégrations tierces peuvent omettre le préfixe

Sensibilité à la Casse :

  • Tous les noms de classes sont uniquement en minuscules
  • Pas de lettres majuscules nulle part
  • Pas de camelCase ou PascalCase

Règle du Séparateur :

  • Utilisez des tirets (-) pour séparer les mots
  • N'utilisez jamais de tirets bas (_)
  • N'utilisez jamais d'espaces ou de caractères spéciaux

Structure de Nommage :

Composant :        fk-[component]
Élément :          fk-[component]-[element]
Sous-élément :     fk-[component]-[element]-[detail]
Utilitaire :       fk-[property]-[value]
Modificateur état : is-[state] (classe combinée uniquement)
Réactif :          .[breakpoint]-[value] (classe combinée)

Phase 2 : Règles de Nommage des Composants

Noms de Composants :

  • Gardez concis et sémantique
  • Utilisez des termes de composants web courants : card, nav, hero, footer
  • Évitez les noms trop spécifiques : préférer fk-card à fk-product-feature-card
  • Utilisez les modificateurs pour les variantes : fk-card.is-featured et non fk-card-featured

Hiérarchie des Éléments :

  • Composant parent : fk-card
  • Enfants directs : fk-card-[element] (ex. : fk-card-title)
  • Imbrication profonde : Évitez plus de 3 niveaux
  • Mauvais : fk-card-content-section-text-wrapper
  • Bon : fk-card-content, fk-card-text

Motifs de Composants Courants :

Cartes :

fk-card
├── fk-card-image
├── fk-card-content
│   ├── fk-card-title
│   └── fk-card-text
└── fk-card-footer

Navigation :

fk-nav
├── fk-nav-logo
├── fk-nav-menu
│   └── fk-nav-link
└── fk-nav-actions

Hero :

fk-hero
├── fk-hero-content
│   ├── fk-hero-title
│   ├── fk-hero-subtitle
│   └── fk-hero-actions
└── fk-hero-media

Formulaires :

fk-form
├── fk-form-group
│   ├── fk-form-label
│   └── fk-form-input
└── fk-form-actions

Phase 3 : Classes Utilitaires

Nommage des Utilitaires :

  • Format : fk-[property]-[value]
  • Exemples : fk-text-lg, fk-space-md, fk-grid-3

Utilitaires d'Espacement :

  • Utilisez le dimensionnement en t-shirt : xs, sm, md, lg, xl, 2xl, 3xl
  • Directionnel : py (vertical), px (horizontal), pt (haut), pr (droite), pb (bas), pl (gauche)
  • Même pour les marges : my, mx, mt, mr, mb, ml

Utilitaires de Typographie :

  • Taille : fk-text-[xs|sm|md|lg|xl|2xl|3xl]
  • Poids : fk-text-[light|medium|semibold|bold]
  • Alignement : fk-text-[left|center|right]
  • Transformation : fk-text-[uppercase|lowercase|capitalize]

Utilitaires de Mise en Page :

  • Flexbox : fk-flex, fk-flex-col, fk-flex-center, fk-flex-between
  • Grid : fk-grid, fk-grid-2, fk-grid-3, fk-grid-4, fk-grid-6
  • Conteneur : fk-container, fk-section

Phase 4 : Modificateurs d'État (Classes Combinées)

Règles des Modificateurs d'État :

  • Toujours utilisé en classes combinées avec le préfixe is-
  • Appliquées en plus de la classe de base
  • Exemple : <div class="fk-button is-primary">...</div>

États Courants :

is-active           Actuellement actif/sélectionné
is-disabled         Interaction désactivée
is-hidden           Visibilité cachée
is-visible          Visible (substituer à caché)
is-loading          État chargement
is-error            État erreur
is-success          État succès
is-primary          Variante primaire
is-secondary        Variante secondaire
is-tertiary         Variante tertiaire
is-featured         En vedette/surligné
is-horizontal       Mise en page horizontale
is-vertical         Mise en page verticale
is-expanded         État déployé (accordéons, menus déroulants)
is-collapsed        État replié

Application des Classes Combinées dans Webflow :

  1. Sélectionner l'élément
  2. Ajouter la classe de base : fk-button
  3. Ajouter la classe combinée : is-primary
  4. L'élément a les deux classes : fk-button is-primary
  5. Style de la combinaison : .fk-button.is-primary { ... }

Phase 5 : Conception Responsif

Modificateurs Responsifs :

  • FlowKit utilise les classes combinées pour le comportement responsif
  • Format : .[breakpoint]-[value]
  • Exemple : fk-grid-4.tablet-2.mobile-1

Points d'Arrêt :

Bureau (par défaut):   Aucun modificateur nécessaire
Tablette :             .tablet-[value]
Mobile :               .mobile-[value]

Exemple Grid Responsif :

Base : fk-grid-4 (4 colonnes sur bureau)
+ Combinaison : .tablet-2 (2 colonnes sur tablette)
+ Combinaison : .mobile-1 (1 colonne sur mobile)

Résultat : <div class="fk-grid-4 tablet-2 mobile-1">

Exemple Texte Responsif :

Base : fk-text-3xl (48px sur bureau)
+ Combinaison : .tablet-2xl (32px sur tablette)
+ Combinaison : .mobile-xl (24px sur mobile)

Résultat : <div class="fk-text-3xl tablet-2xl mobile-xl">

Phase 6 : Meilleures Pratiques

Toujours :

  • ✅ Utiliser le préfixe fk- pour tous les composants et éléments
  • ✅ Utiliser des tirets pour séparer les mots
  • ✅ Utiliser uniquement des minuscules
  • ✅ Garder les noms de composants sémantiques et concis
  • ✅ Utiliser les classes combinées pour les modificateurs et états
  • ✅ Combiner librement les utilitaires (fk-flex fk-flex-center fk-space-md)
  • ✅ Suivre la hiérarchie composant-élément
  • ✅ Utiliser les classes combinées responsives pour les points d'arrêt

Jamais :

  • ❌ Omettre le préfixe fk- des composants
  • ❌ Utiliser des tirets bas ou des espaces
  • ❌ Utiliser les majuscules ou camelCase
  • ❌ Créer des noms de classe trop spécifiques
  • ❌ Imbriquer les éléments à plus de 3 niveaux de profondeur
  • ❌ Mélanger FlowKit avec d'autres systèmes de nommage
  • ❌ Créer des classes de modificateur autonomes (utiliser les classes combinées)

Composant vs Utilitaire :

Utiliser les composants quand :

  • Construire des motifs UI réutilisables (cartes, boutons, navigation)
  • Besoin de signification sémantique
  • Plusieurs instances sur le site
  • Exemple : fk-card, fk-nav, fk-hero

Utiliser les utilitaires quand :

  • Appliquer un style à usage unique (espacement, typographie, mise en page)
  • Ajustements rapides sans nouvelles classes
  • Espacement/dimensionnement cohérent sur le site
  • Exemple : fk-text-lg, fk-space-md, fk-flex-center

Empilement d'Utilitaires : Les utilitaires peuvent être librement combinés :

<div class="fk-flex fk-flex-center fk-space-md fk-py-lg">
  Contenu
</div>

Combinaison Composant + Utilitaire :

<div class="fk-card fk-shadow-lg fk-rounded-lg">
  <div class="fk-card-content fk-space-lg">
    <h3 class="fk-card-title fk-text-xl fk-text-bold">Titre</h3>
  </div>
</div>

Phase 7 : Erreurs Courantes et Corrections

Erreur 1 : Prefix Manquant

❌ card, button, nav
✅ fk-card, fk-button, fk-nav

Erreur 2 : Mauvaise Casse

❌ FK-Card, fk-Button, Fk-nav
✅ fk-card, fk-button, fk-nav

Erreur 3 : Mauvais Séparateur

❌ fk_card_title, fk.card.title
✅ fk-card-title

Erreur 4 : camelCase/PascalCase

❌ fkCardTitle, FkCardTitle
✅ fk-card-title

Erreur 5 : Modificateur en Classe Autonome

❌ <div class="fk-button-primary">
✅ <div class="fk-button is-primary">

Erreur 6 : Trop d'Imbrication

❌ fk-hero-content-wrapper-section-title-text
✅ fk-hero-content, fk-hero-title

Erreur 7 : Noms Trop Spécifiques

❌ fk-product-feature-card-with-image-and-price
✅ fk-card (utiliser la combinaison : is-product)

Erreur 8 : Mauvais Motif Responsif

❌ fk-grid-3-tablet-2 (classe unique)
✅ fk-grid-3 tablet-2 (deux classes)

Phase 8 : Notes de Version FlowKit

FlowKit v2 (Actuel) :

  • Nouvelles conventions de nommage (documentées ici)
  • Système grid amélioré avec combinaisons responsives
  • Collection d'utilitaires étendue
  • Bibliothèque de composants améliorée
  • Meilleur système de variables

Principaux Changements v2 :

  • Préfixe fk- standardisé sur tous les composants
  • Introduction du préfixe is- pour les modificateurs d'état (classes combinées)
  • Ajout de classes combinées responsives (.tablet-, .mobile-)
  • Échelle d'espacement étendue (xs à 3xl)
  • Noms d'utilitaires plus sémantiques

Migration depuis v1 : Si l'utilisateur a les classes FlowKit v1 :

  1. Ajouter le préfixe fk- où il manque
  2. Convertir les modificateurs en classes combinées is-
  3. Mettre à jour les classes responsives au format combinaison
  4. Vérifier les utilitaires d'espacement pour la nouvelle échelle

Phase 9 : Optimisation des Performances

Création de Classes :

  • Créer d'abord les classes de composants de base
  • Puis créer les classes d'éléments
  • Enfin créer les classes utilitaires
  • Utiliser style_tool par lots de 10-15 classes

Mises à Jour d'Éléments :

  • Traiter les éléments par groupes de 10-15
  • Afficher la progression pour les grands lots
  • Si >50 éléments, demander à l'utilisateur de confirmer la taille du lot

Connexion Designer :

  • Toujours vérifier la connexion Designer avant de commencer
  • Si la connexion est perdue, mettre en pause et demander à l'utilisateur de se reconnecter
  • Sauvegarder la progression entre les lots

Phase 10 : Gestion des Erreurs

Erreurs Courantes :

1. Designer Non Connecté :

❌ Erreur : Impossible de créer les classes - Designer non connecté

Solution :
1. Ouvrir Webflow Designer
2. Ouvrir le site cible
3. Connecter à Designer dans Claude Code
4. Réessayer l'opération

2. La Classe Existe Déjà :

⚠️ Avertissement : La classe 'fk-button' existe déjà

Options :
1. Ignorer la création (utiliser l'existante)
2. Mettre à jour la classe existante
3. Créer avec un nom différent

3. Nom de Classe Invalide :

❌ Erreur : Le nom de classe 'fk-My Button' n'est pas valide

Problèmes :
- Contient des espaces
- Contient des majuscules

Suggéré : 'fk-my-button'

4. Propriété de Style Non Supportée :

⚠️ Avertissement : La propriété 'custom-property' n'est pas supportée

Cela peut être :
- Propriété CSS personnalisée
- Webflow ne la supporte pas via l'API Designer
- Typo dans le nom de la propriété

Recommandation : Appliquer manuellement dans Designer

Cas Limites

Cas 1 : Classes d'Intégration Tierce Lors de l'intégration avec des bibliothèques tierces (animations, curseurs) :

  • Garder les classes tierces séparées
  • Ajouter un wrapper FlowKit : <div class="fk-slider"><div class="swiper">...</div></div>
  • Ne pas forcer le nommage FlowKit sur les classes tierces

Cas 2 : Migration de Code Existant Lors de la migration d'un site existant volumineux :

  • Créer d'abord les classes FlowKit
  • Appliquer aux nouvelles sections
  • Refactoriser progressivement les anciennes sections
  • Garder temporairement les deux systèmes pour la rétrocompatibilité

Cas 3 : Exigences de Nommage Personnalisé Si le client a un système de nommage existant :

  • Discuter des avantages FlowKit
  • Afficher une comparaison côte à côte
  • Proposer une approche hybride : FlowKit pour les nouveaux composants, garder les anciens pour l'existant
  • Ou refactoriser entièrement (plus de temps, meilleur long terme)

Cas 4 : Conflits de Bibliothèque de Composants Si le site utilise une autre framework (Bootstrap, Tailwind) :

  • FlowKit peut coexister mais non recommandé
  • Choisir un seul système principal
  • Utiliser FlowKit pour les composants personnalisés
  • Utiliser l'autre framework pour les composants pré-construits

Cas 5 : Explosion de Classes Utilitaires Si trop de classes utilitaires sur un seul élément :

  • Envisager de créer une classe de composant à la place
  • Exemple : Au lieu de fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadow
  • Créer : fk-panel avec ces propriétés intégrées

Liste de Contrôle de Production

Avant de considérer l'implémentation FlowKit comme complète :

Configuration :

  • [ ] Webflow Designer connecté
  • [ ] Site cible identifié
  • [ ] Page actuelle confirmée
  • [ ] Portée définie avec l'utilisateur

Structure des Composants :

  • [ ] Tous les composants utilisent le préfixe fk-
  • [ ] La hiérarchie des composants est logique (max 3 niveaux)
  • [ ] Les noms d'éléments sont sémantiques
  • [ ] Les modificateurs utilisent les classes combinées avec le préfixe is-

Utilitaires :

  • [ ] Les utilitaires d'espacement utilisent le dimensionnement en t-shirt (xs-3xl)
  • [ ] Les utilitaires de typographie couvrent tous les styles de texte
  • [ ] Les utilitaires de mise en page gèrent les besoins flex/grid
  • [ ] Les utilitaires de couleur s'alignent avec la marque

Responsif :

  • [ ] Les classes combinées responsives définies pour les composants clés
  • [ ] Les modificateurs de point d'arrêt testés (tablette, mobile)
  • [ ] Les systèmes grid s'adaptent correctement

États :

  • [ ] Les modificateurs d'état définis (is-active, is-disabled, etc.)
  • [ ] Les états hover/focus fonctionnent correctement
  • [ ] Les états actifs stylisés correctement

Documentation :

  • [ ] Structure du composant documentée
  • [ ] Classes utilitaires énumérées
  • [ ] Comportement responsif expliqué
  • [ ] Modificateurs d'état documentés

Validation :

  • [ ] Toutes les classes suivent les conventions de nommage
  • [ ] Aucune lettre majuscule
  • [ ] Aucun tiret bas
  • [ ] Tous ont les préfixes appropriés

Performances :

  • [ ] Classes créées par lots
  • [ ] Indicateurs de progression affichés pour les grandes opérations
  • [ ] Aucune classe dupliquée créée

Expérience Utilisateur :

  • [ ] Retours clairs fournis
  • [ ] Indicateurs de progression affichés
  • [ ] Confirmation de succès donnée
  • [ ] Étapes suivantes recommandées

Skills similaires

flowkit-naming
webflow / webflow-skills

Appliquer les conventions de nommage FlowKit CSS dans des projets Webflow via Designer.

66
webflow-mcp:cms-best-practices
webflow / webflow-skills

Auditer et optimiser l'architecture CMS Webflow avec recommandations structurées.

66
cms-best-practices
webflow / webflow-skills

Auditer et optimiser l'architecture CMS Webflow avec recommandations structurées.

66
webflow-mcp:cms-collection-setup
webflow / webflow-skills

Créer une collection CMS Webflow avec champs personnalisés, relations et configuration complète.

66
webflow-mcp:bulk-cms-update
webflow / webflow-skills

Créer ou mettre à jour en masse des éléments CMS Webflow avec validation et rollback.

66