wds-docs

WDS Documentation Navigator

前提条件： @wix/design-system がインストールされている必要があります（npm i @wix/design-system または yarn add @wix/design-system）。

ヘルパースクリプト

このスキルには scripts/wds.js が含まれています。これは、@wix/design-system を node_modules 内から自動検出し（モノレポやワークスペースに対応）、絞り込んだ検索を行う Node.js ヘルパーです。バンドルされたスクリプトの絶対パスを使って、ユーザーのプロジェクトディレクトリから実行してください。

# WDS is the absolute path to this skill's scripts/wds.js
WDS="<this-skill-dir>/scripts/wds.js"

node $WDS search <keyword>                # Find components by keyword
node $WDS component <Name>                 # Get props + example list
node $WDS example <Name> "<ExampleName>"   # Get a specific example
node $WDS icons <query>                    # Search for icons

ワークフロー

ステップ 1：適切なコンポーネントを見つける

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

複数のキーワードは OR 条件で照合されます。コンポーネント名、説明、使用方法のガイダンスが返されます。

ステップ 2：props と利用可能な例を取得する

node $WDS component Button

props の一覧（型と説明）と、利用可能なすべての例のリストが返されます。props ファイルが大きい場合（200 行超）は、prop 名と型を含む要約が返されます。

ステップ 3：特定の例を取得する

node $WDS example Button "Loading state"

例の説明と JSX コードが返されます。大文字と小文字を区別せず、部分一致にも対応しています（例：「loading」は「Loading state」に一致します）。

ステップ 4：アイコンを見つける

node $WDS icons Add Edit Delete

アイコンは @wix/wix-ui-icons-common に含まれています。各アイコンには Small バリアントがあります（例：Add と AddSmall）。

フォールバック：ファイルに直接アクセスする

スクリプトを利用できない場合、ドキュメントは node_modules/@wix/design-system/dist/docs/ にあります。

• components.md — コンポーネントカタログ（約 978 行。grep のみ）
• components/{Name}Props.md — コンポーネントごとの props
• components/{Name}Examples.md — コンポーネントごとの例（セクション一覧は ^### を grep）
• icons.md — アイコンカタログ（約 818 行。grep のみ）

これらのファイル全体を読み込まないでください。キーワードで grep してから、offset/limit を指定して必要なセクションだけを読んでください。ドキュメントファイルの正確な構成とセクション形式については、references/file-structure.md を参照してください。

---

コンポーネント早見表（デザインから WDS へ）

デザイン要素	WDS コンポーネント	備考
矩形／コンテナー	<Box>	レイアウト用ラッパー
テキストボタン	<TextButton>	セカンダリーアクション
ラベル付き入力	<FormField> + <Input>	入力をラップ
トグル	<ToggleSwitch>	オン／オフの設定
モーダル	<Modal> + <CustomModalLayout>	組み合わせて使用
グリッド	<Layout> + <Cell>	レスポンシブ

間隔（px から SP への変換）

デザイナーがピクセルを指定した場合は、最も近い SP トークンに変換してください。

トークン	Classic	Studio
SP1	6px	4px
SP2	12px	8px
SP3	18px	12px
SP4	24px	16px
SP5	30px	20px
SP6	36px	24px

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

SP トークンは gap、padding、margin にのみ使用し、width/height には使用しないでください。

インポート

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