Navigateur de Documentation WDS

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

Script d'aide

Cette skill contient scripts/wds.js — 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 bundlé :

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

node $WDS search <keyword>                # Trouver des composants par mot-clé
node $WDS component <Name>                 # Obtenir les props + liste d'exemples
node $WDS example <Name> "<ExampleName>"   # Obtenir un exemple spécifique
node $WDS icons <query>                    # Chercher 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

Plusieurs mots-clés sont combinés avec OR. Retourne les noms de composants, descriptions et conseils d'utilisation.

Étape 2 : Obtenir les props et les exemples disponibles

node $WDS component Button

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

Étape 3 : Obtenir un exemple spécifique

node $WDS example Button "Loading state"

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

Étape 4 : 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 ex. Add + AddSmall).

Secours : Accès Direct aux Fichiers

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

• components.md — catalogue des composants (~978 lignes, grep uniquement)
• components/{Name}Props.md — props par composant
• components/{Name}Examples.md — exemples par composant (grep ^### pour la liste des sections)
• icons.md — catalogue des icônes (~818 lignes, grep uniquement)

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

Correspondance Rapide Composant (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">

N'utilisez les tokens SP que 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";