Navigateur de documentation WDS

Prérequis : @wix/design-system doit être installé (npm i @wix/design-system ou yarn add @wix/design-system).

Script helper

Cette skill inclut scripts/wds.cjs — un helper Node.js qui découvre automatiquement @wix/design-system dans node_modules (gère les monorepos et workspaces) et fournit des recherches ciblées. Exécutez-le depuis le répertoire du projet de l'utilisateur en utilisant le chemin absolu du script inclus :

# WDS est le chemin absolu vers scripts/wds.cjs de cette skill
WDS="<this-skill-dir>/scripts/wds.cjs"

node $WDS search <keyword>                 # Trouver des composants par mot-clé
node $WDS component <Name>                 # Obtenir props + liste d'exemples (un composant)
node $WDS components <Name1> <Name2>...    # Identique à `component`, mais pour plusieurs à la fois
node $WDS example <Name> "<ExampleName>"   # Obtenir un exemple spécifique
node $WDS testkit <Name> [method]          # Obtenir imports testkit + driver API
node $WDS icons <query>                    # Rechercher des icônes

Flux de travail

Étape 1 : Trouver le bon composant

node $WDS search table
node $WDS search form input validation
node $WDS search modal dialog popup

Les mots-clés multiples sont appariés en OU. Retourne les noms de composants, descriptions et conseils d'utilisation.

Étape 2 : Obtenir les props et exemples disponibles

node $WDS component Button

Retourne la liste complète des props (types et descriptions) plus une liste de tous les exemples disponibles. Pour les fichiers de props volumineux (>200 lignes), retourne un résumé avec les noms et types des props.

Si vous savez déjà quels composants vous seront nécessaires (par exemple après une Étape 1 qui a retourné une sélection), préférez la forme batch pour éviter un aller-retour par composant :

node $WDS components Button Card Table Input Text Thumbnail

La sortie affiche le bloc props de chaque composant séparé par ---. Les composants manquants sont enregistrés dans stderr et ignorés ; la commande ne échoue que si chaque composant demandé est manquant.

Étape 3 : Obtenir un exemple spécifique

node $WDS example Button "Loading state"

Retourne la description de l'exemple et le code JSX. L'appariement est insensible à la casse et supporte les sous-chaînes (par exemple, « loading » correspond à « Loading state »).

Étape 4 : Écrire des tests avec le testkit du composant

node $WDS testkit Button             # Imports + API driver complète pour Button
node $WDS testkit Button click       # Juste les détails de la méthode click()

Retourne les snippets d'import pour unidriver, vanilla, puppeteer et playwright ainsi que l'API des méthodes du driver (nom, arguments, type de retour, description). L'appariement du nom de méthode est insensible à la casse et supporte les sous-chaînes.

Étape 5 : Trouver des icônes

node $WDS icons Add Edit Delete

Les icônes proviennent de @wix/wix-ui-icons-common. Chaque icône a une variante Small (par exemple, Add + AddSmall).

Secours : Accès direct aux fichiers

Si le script n'est pas disponible, la documentation se trouve dans node_modules/@wix/design-system/dist/docs/ :

• components.md — catalogue de composants (~978 lignes, grep seulement)
• components/{Name}Props.md — props par composant
• components/{Name}Examples.md — exemples par composant (grep ^### pour la liste des sections)
• components/{Name}Testkit.md — imports testkit + driver API par composant (grep ^### pour la liste des méthodes)
• testkits.md — catalogue de testkit (liste de composants avec docs testkit générées)
• icons.md — catalogue d'icônes (~818 lignes, grep seulement)

Ne lisez pas ces fichiers en entier. Utilisez grep pour les mots-clés, puis lisez les sections spécifiques avec offset/limit. Voir references/file-structure.md pour la disposition exacte des fichiers de documentation et les formes des sections.

Correspondance rapide composants (Design vers WDS)

Espacement (conversion px vers SP)

Quand le designer spécifie des pixels, convertissez au token SP le plus proche :

<Box gap="SP2" padding="SP3">

Utilisez les tokens SP uniquement pour gap, padding, margin — pas pour width/height.

Imports

import { Button, Card, Image } from "@wix/design-system";
import { Add, Edit, Delete } from "@wix/wix-ui-icons-common";

DIRECTIVES

1. Ne remplacez jamais les tokens CSS WDS. Seulement si c'est absolument impossible autrement, mentionnez très clairement à l'utilisateur que c'est un anti-pattern et doit être évité à tout prix.

Dépannage

• Les composants s'affichent sans style (apparence HTML brut, espacement/typographie WDS manquants) : ajoutez import "@wix/design-system/styles.global.css"; une seule fois au composant racine/principal (par exemple page.tsx, point d'entrée modal) — pas dans les fichiers enfants/tab/helper.